ID search

src/ui/ab.tis

@@ -32,23 +32,26 @@ class SearchBar: Reactor.Component {
     }
 
     function render() {
-        return <div #search-id><input|text @{this.search_id} novalue={translate("Search ID")} />
+        return <div .search-id>
+            <span .search-icon>{search_icon}</span>
+            <input|text @{this.search_id} novalue={translate("Search ID")} />
             {this.value && <span .clear-input>{clear_icon}</span>}
         </div>;
     }
 
-    event click $(span.clear-input svg) {
+    event click $(span.clear-input) {
         this.search_id.value = '';
-        this.onChange();
+        this.onChange('');
     }
 
     event change $(input) (_, el) {
-        this.value = el.value;
-        this.onChange();
+        this.onChange(el.value.trim());
     }
     
-    function onChange() {
-        this.parent.onChange();
+    function onChange(v) {
+        this.value = v;
+        this.update();
+        this.parent.filter(v);
     }
 }
 
@@ -61,7 +64,7 @@ class SessionStyle: Reactor.Component {
 
     function render() {
         var sessionsStyle = getSessionsStyle(this.type);
-        return <div #sessions-style>
+        return <div .sessions-style>
                 <span class={sessionsStyle == "tile" ? "active" : "inactive"}>{svg_tile}</span>
                 <span class={sessionsStyle != "tile" ? "active" : "inactive"}>{svg_list}</span>
             </div>;
@@ -71,7 +74,8 @@ class SessionStyle: Reactor.Component {
         var option = getSessionsStyleOption(this.type);
         var sessionsStyle = getSessionsStyle(this.type);
         handler.set_option(option, sessionsStyle == "tile" ? "list" : "tile");
-        stupidUpdate(app);
+        //stupidUpdate(app); // seems fixed in new sciter
+        app.update();
     }
 }
 
@@ -79,6 +83,7 @@ class SessionList: Reactor.Component {
     this var sessions = [];
     this var type = "";
     this var style;
+    this var filterPattern = "";
     
     function this(params) {
         this.sessions = params.sessions;
@@ -86,8 +91,24 @@ class SessionList: Reactor.Component {
         this.style = getSessionsStyle(params.type);
     }
 
+    function filter(v) {
+        this.filterPattern = v;
+        this.update();
+    }
+
+    function getSessions() {
+        var p = this.filterPattern;
+        if (!p) return this.sessions;
+        var tmp = [];
+        this.sessions.map(function(s) {
+            var name = s[4] || s.alias || s[0] || s.id || "";
+            if (name.indexOf(p) >= 0) tmp.push(s);
+        });
+        return tmp;
+    }
+
     function render() {
-        var sessions = this.sessions;
+        var sessions = this.getSessions();
         if (sessions.length == 0) return <span />;
         var me = this;
         sessions = sessions.map(function(x) { return me.getSession(x); });

src/ui/index.css

@@ -39,25 +39,75 @@ body {
     padding: 20px;
 }
 
-div#search-id {
+div.sessions-bar {
+    color: color(light-text);
+    padding-top: 0.5em;
+    border-top: color(border) solid 1px;
+    margin-bottom: 1em;
+    position: relative;
+    flow: horizontal;
+}
+
+div.sessions-style {
+    margin-left: 0.5em;
+}
+
+div.sessions-style span {
+    display: inline-block;
+    padding: 6px 12px;
+    cursor: pointer;
+}
+
+div.sessions-style svg {
+    size: 14px;
+}
+
+div.sessions-style span.active {
+    cursor: default;
+    border-radius: 3px;
+    background: white;
+    color: black;
+}
+
+div.search-id {
+    width: 200px;
     padding: 0;
     position: relative;
-}
-
-span.clear-input svg {
-    display: none;
-    position: absolute;
-    right: 6px;
-    top: 10px;
-    size: 1.4em;
-    color: color(border);
-}
-
-div#search-id:hover span.clear-input svg {
     display: inline-block;
 }
 
-span.clear-input svg:hover {
+div.search-id input {
+    font-size: 1em;
+    height: 20px;
+    border: none;
+    padding-left: 26px;
+}
+
+div.search-id span {
+    position: absolute;
+    top: 0px;
+    padding: 6px;
+    color: color(border);
+}
+
+div.search-id svg {
+    size: 14px;
+}
+
+span.search-icon {
+    left: 0px;
+}
+
+span.clear-input {
+    display: none;
+    right: 0px;
+}
+
+div.search-id:hover span.clear-input {
+    display: inline-block;
+}
+
+span.clear-input:hover {
     color: black;
 }
 
@@ -154,32 +204,6 @@ div.recent-sessions-content {
     flow: horizontal-flow;
 }
 
-div#sessions-bar {
-    color: color(light-text);
-    padding-top: 0.5em;
-    border-top: color(border) solid 1px;
-    margin-bottom: 1em;
-    position: relative;
-    flow: horizontal;
-}
-
-div#sessions-bar span {
-    display: inline-block;
-    padding: 0.5em 1em;
-    cursor: pointer;
-}
-
-div#sessions-bar svg {
-    size: 14px;
-}
-
-div#sessions-bar span.active {
-    cursor: default;
-    border-radius: 3px;
-    background: white;
-    color: black;
-}
-
 div.remote-session {
     border-radius: 1em;
     height: 140px;

src/ui/index.tis

@@ -55,15 +55,20 @@ class RecentSessions: Reactor.Component {
         var sessions = handler.get_recent_sessions();
         if (sessions.length == 0) return <span />;
         return <div style="width: *">
-            <div #sessions-bar>
-            <div style="width:*">
-              {translate("Recent Sessions")}
+            <div .sessions-bar>
+                <div style="width:*">
+                    {translate("Recent Sessions")}
+                </div>
+                <SearchBar parent={this} />
+                {!app.hidden && <SessionStyle />}
             </div>
-            {!app.hidden && <SessionStyle />}
-            </div>
-            {!app.hidden && <SessionList style={sessionsStyle} sessions={sessions} />}
+            {!app.hidden && <SessionList @{this.sessionList} style={sessionsStyle} sessions={sessions} />}
         </div>;
     }
+
+    function filter(v) {
+        this.sessionList.filter(v);
+    }
 }
 
 function createNewConnect(id, type) {