History view theme fixes (#377)

* use Dropdown element in history view

* use elements for filters

* fix for selected and hovered color

public/themes/default.css

@@ -213,6 +213,8 @@
     --table-thead-bg-color: rgba(250, 250, 250, 0.02);
     --table-tr-border-bottom-color: rgba(241, 246, 243, 0.15);
     --table-tr-hover-bg-color: rgba(255, 255, 255, 0.06);
+    --table-tr-selected-bg-color: #222;
+    --table-tr-selected-hover-bg-color: #333;
 
     /* session colors */
     --session-bg-color: rgba(13, 13, 13, 0.85);

public/themes/light.css

@@ -31,6 +31,8 @@
     --table-thead-bg-color: rgba(250, 250, 250, 0.15);
     --table-tr-border-bottom-color: rgba(0, 0, 0, 0.15);
     --table-tr-hover-bg-color: rgba(0, 0, 0, 0.15);
+    --table-tr-selected-bg-color: #dddddd;
+    --table-tr-selected-hover-bg-color: #cccccc;
 
     /* form colors */
     --form-element-border-color: rgba(0, 0, 0, 0.3);

src/app/history/history.less

@@ -66,6 +66,11 @@
             flex-direction: row;
             align-items: center;
 
+            .workspace-dropdown,
+            .remote-dropdown {
+                width: 200px;
+            }
+
             .dropdown {
                 font-size: 0.8em;
                 padding: 0.5em 1em;
@@ -101,13 +106,14 @@
             }
 
             .search-checkbox {
-                margin-left: 15px;
+                margin: 0 15px;
                 padding: 5px 10px 5px 10px;
                 background: var(--button-secondary-bg-color);
                 border-radius: 4px;
                 display: flex;
                 flex-direction: row;
                 align-items: center;
+                height: 34px;
 
                 &.is-active {
                     background-color: #666;
@@ -135,9 +141,7 @@
             }
 
             .reset-button {
-                margin-left: 1em;
+                height: 34px;
-                color: var(--app-text-color);
-                line-height: 1.75em;
             }
         }
     }
@@ -290,16 +294,16 @@
         tr.history-item {
             padding: 0 10px 0 10px;
             display: flex;
-            border-bottom: 1px solid rgba(250, 250, 250, 0.1);
+            border-bottom: 1px solid var(--table-tr-border-bottom-color);
             align-items: center;
             color: var(--app-text-color);
 
             &.is-selected {
-                background-color: #222;
+                background-color: var(--table-tr-selected-bg-color);
             }
 
             &.is-selected:hover {
-                background-color: #333;
+                background-color: var(--table-tr-selected-hover-bg-color);
             }
 
             &:hover {

src/app/history/history.tsx

@@ -14,7 +14,7 @@ import localizedFormat from "dayjs/plugin/localizedFormat";
 import customParseFormat from "dayjs/plugin/customParseFormat";
 import { Line } from "@/app/line/linecomps";
 import { checkKeyPressed, adaptFromReactOrNativeKeyEvent } from "@/util/keyutil";
-import { TextField } from "@/elements";
+import { TextField, Dropdown, Button } from "@/elements";
 
 import { ReactComponent as AngleDownIcon } from "@/assets/icons/history/angle-down.svg";
 import { ReactComponent as ChevronLeftIcon } from "@/assets/icons/history/chevron-left.svg";
@@ -390,6 +390,41 @@ class HistoryView extends React.Component<{}, {}> {
         GlobalModel.historyViewModel.closeView();
     }
 
+    @boundMethod
+    getDefaultWorkspace(sessionId: string, names: Record<string, string>): string {
+        if (sessionId == null) {
+            return "Limit Workspace";
+        }
+        return formatSessionName(names, sessionId);
+    }
+
+    @boundMethod
+    getWorkspaceItems(snames: Record<string, string>, sessionIds: string[]): { label: string; value: string }[] {
+        return sessionIds.reduce<{ label: string; value: string }[]>((items, sessionId) => {
+            items.push({ label: "#" + snames[sessionId], value: sessionId });
+            return items;
+        }, []);
+    }
+
+    @boundMethod
+    getDefaultRemote(remoteId: string, names: Record<string, string>): string {
+        if (remoteId == null) {
+            return "Limit Remote";
+        }
+        return formatRemoteName(names, { remoteid: remoteId });
+    }
+
+    @boundMethod
+    getRemoteItems(rnames: Record<string, string>, remoteIds: string[]): { label: string; value: string }[] {
+        return remoteIds.reduce<{ label: string; value: string }[]>(
+            (items, remoteId) => {
+                items.push({ label: "[" + rnames[remoteId] + "]", value: remoteId });
+                return items;
+            },
+            [{ label: "(all remotes)", value: null }]
+        );
+    }
+
     render() {
         let isHidden = GlobalModel.activeMainView.get() != "history";
         if (isHidden) {
@@ -423,74 +458,18 @@ class HistoryView extends React.Component<{}, {}> {
                         />
                     </div>
                     <div className="advanced-search">
-                        <div
+                        <Dropdown
-                            className={cn("dropdown", "session-dropdown", {
+                            className="workspace-dropdown"
-                                "is-active": this.sessionDropdownActive.get(),
+                            defaultValue={this.getDefaultWorkspace(hvm.searchSessionId.get(), snames)}
-                            })}
+                            options={this.getWorkspaceItems(snames, sessionIds)}
-                        >
+                            onChange={this.clickLimitSession}
-                            <div onClick={this.toggleSessionDropdown}>
+                        />
-                                <span className="label">
+                        <Dropdown
-                                    {hvm.searchSessionId.get() == null
+                            className="remote-dropdown"
-                                        ? "Limit Workspace"
+                            defaultValue={this.getDefaultRemote(hvm.searchRemoteId.get(), rnames)}
-                                        : formatSessionName(snames, hvm.searchSessionId.get())}
+                            options={this.getRemoteItems(rnames, remoteIds)}
-                                </span>
+                            onChange={this.clickLimitRemote}
-                                <AngleDownIcon className="icon" />
+                        />
-                            </div>
-                            <div className="dropdown-menu" role="menu">
-                                <div className="dropdown-content has-background-black-ter">
-                                    <div
-                                        onClick={() => this.clickLimitSession(null)}
-                                        key="all"
-                                        className="dropdown-item"
-                                    >
-                                        (all workspaces)
-                                    </div>
-                                    <For each="sessionId" of={sessionIds}>
-                                        <div
-                                            onClick={() => this.clickLimitSession(sessionId)}
-                                            key={sessionId}
-                                            className="dropdown-item"
-                                        >
-                                            #{snames[sessionId]}
-                                        </div>
-                                    </For>
-                                </div>
-                            </div>
-                        </div>
-                        <div
-                            className={cn("dropdown", "remote-dropdown", {
-                                "is-active": this.remoteDropdownActive.get(),
-                            })}
-                        >
-                            <div onClick={this.toggleRemoteDropdown}>
-                                <span className="label">
-                                    {hvm.searchRemoteId.get() == null
-                                        ? "Limit Remote"
-                                        : formatRemoteName(rnames, { remoteid: hvm.searchRemoteId.get() })}
-                                </span>
-                                <AngleDownIcon className="icon" />
-                            </div>
-                            <div className="dropdown-menu" role="menu">
-                                <div className="dropdown-content has-background-black-ter">
-                                    <div
-                                        onClick={() => this.clickLimitRemote(null)}
-                                        key="all"
-                                        className="dropdown-item"
-                                    >
-                                        (all remotes)
-                                    </div>
-                                    <For each="remoteId" of={remoteIds}>
-                                        <div
-                                            onClick={() => this.clickLimitRemote(remoteId)}
-                                            key={remoteId}
-                                            className="dropdown-item"
-                                        >
-                                            [{rnames[remoteId]}]
-                                        </div>
-                                    </For>
-                                </div>
-                            </div>
-                        </div>
                         <div className="fromts">
                             <div className="fromts-text">From:&nbsp;</div>
                             <div className="hoverEffect">
@@ -516,9 +495,9 @@ class HistoryView extends React.Component<{}, {}> {
                                 Filter Cmds
                             </div>
                         </div>
-                        <div onClick={this.resetAllFilters} className="button reset-button hoverEffect">
+                        <Button className="secondary reset-button" onClick={this.resetAllFilters}>
                             Reset All
-                        </div>
+                        </Button>
                     </div>
                 </div>
                 <div key="control1" className={cn("control-bar", "is-top", { "is-hidden": items.length == 0 })}>