From c5d4a0e1f3cce162446339f7ef608822e8843337 Mon Sep 17 00:00:00 2001 From: Red J Adaya Date: Fri, 8 Mar 2024 14:48:52 +0800 Subject: [PATCH] Convert history table to use div (#407) * convert table to div * remove comment * more history UI updates. copy/use controls, change font, fix scroll area * use css variables * fix textfield placeholder color * put back input styles * change overflow-x to auto --- public/themes/default.css | 2 +- public/themes/light.css | 2 + src/app/clientsettings/clientsettings.tsx | 2 +- src/app/common/elements/dropdown.less | 1 + src/app/common/elements/mainview.tsx | 4 +- src/app/common/elements/textfield.less | 4 + src/app/connections/connections.less | 2 +- src/app/connections/connections.tsx | 2 +- src/app/history/history.less | 173 +++++++++++----------- src/app/history/history.tsx | 157 ++++++++++---------- 10 files changed, 177 insertions(+), 172 deletions(-) diff --git a/public/themes/default.css b/public/themes/default.css index 89d4e7fbb..88e9288f5 100644 --- a/public/themes/default.css +++ b/public/themes/default.css @@ -188,7 +188,7 @@ /* table colors */ --table-border-color: rgba(241, 246, 243, 0.15); --table-thead-border-top-color: rgba(250, 250, 250, 0.1); - --table-thead-border-bottom-color: var(--table-border-color); + --table-thead-bright-border-color: #ccc; --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); diff --git a/public/themes/light.css b/public/themes/light.css index ca3b101c3..ddc3cfb36 100644 --- a/public/themes/light.css +++ b/public/themes/light.css @@ -47,6 +47,8 @@ --form-element-label-color: rgba(0, 0, 0, 0.6); --form-element-secondary-color: rgba(0, 0, 0, 0.09); --form-element-icon-color: rgb(0, 0, 0, 0.6); + --form-element-disabled-text-color: #b7b7b7; + --form-element-placeholder-color: #b7b7b7; /* modal colors */ --modal-header-bottom-border-color: rgba(0, 0, 0, 0.3); diff --git a/src/app/clientsettings/clientsettings.tsx b/src/app/clientsettings/clientsettings.tsx index 8c08cccd3..17f4f811e 100644 --- a/src/app/clientsettings/clientsettings.tsx +++ b/src/app/clientsettings/clientsettings.tsx @@ -166,7 +166,7 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove const curTheme = GlobalModel.getTheme(); return ( - +
Term Font Size
diff --git a/src/app/common/elements/dropdown.less b/src/app/common/elements/dropdown.less index 70e4bbb2d..930040c16 100644 --- a/src/app/common/elements/dropdown.less +++ b/src/app/common/elements/dropdown.less @@ -5,6 +5,7 @@ width: 100%; border: 2px solid var(--form-element-border-color); border-radius: 6px; + line-height: 22px; background: var(--form-element-bg-color); &.no-label { diff --git a/src/app/common/elements/mainview.tsx b/src/app/common/elements/mainview.tsx index b3d5cd596..aa6ae65c4 100644 --- a/src/app/common/elements/mainview.tsx +++ b/src/app/common/elements/mainview.tsx @@ -10,17 +10,17 @@ import "./mainview.less"; @mobxReact.observer class MainView extends React.Component<{ - viewName: string; title: string; onClose: () => void; children: React.ReactNode; + className?: string; }> { render() { const sidebarModel = GlobalModel.mainSidebarModel; const maxWidthSubtractor = sidebarModel.getCollapsed() ? 0 : sidebarModel.getWidth(); return (
diff --git a/src/app/common/elements/textfield.less b/src/app/common/elements/textfield.less index 343868176..fd87a0b2d 100644 --- a/src/app/common/elements/textfield.less +++ b/src/app/common/elements/textfield.less @@ -64,6 +64,10 @@ &.offset-left { padding: 5px 16px 5px 0; } + + input::placeholder { + color: var(--form-element-placeholder-color); + } } } diff --git a/src/app/connections/connections.less b/src/app/connections/connections.less index afa5f5a7c..66549fdd9 100644 --- a/src/app/connections/connections.less +++ b/src/app/connections/connections.less @@ -28,7 +28,7 @@ thead { border-radius: var(--sizing-2-xs, 4px); - border-bottom: 2px solid var(--table-thead-border-bottom-color); + border-bottom: 2px solid var(--table-thead-bright-border-color); th { height: 32px; diff --git a/src/app/connections/connections.tsx b/src/app/connections/connections.tsx index 9cc734620..ef75799f2 100644 --- a/src/app/connections/connections.tsx +++ b/src/app/connections/connections.tsx @@ -126,7 +126,7 @@ class ConnectionsView extends React.Component<{ model: RemotesModel }, { hovered let item: RemoteType = null; return ( - + copied -
- -
{cmdstr}
-
-
+
+
+
+ +
); @@ -447,7 +447,7 @@ class HistoryView extends React.Component<{}, {}> { let remoteId: string = null; return ( - +
{
-
- - - - - - - - - - - - - - - - - -
this.handleSelect(item.historyid)}> - - - this.handleUse(item)} - onCopy={() => this.handleCopy(item)} - isCopied={this.copiedItemId.get() == item.historyid} - fontSize="normal" - limitHeight={true} - /> - {formatSSName(snames, scrnames, item)}{formatRemoteName(rnames, item.remote)}{getHistoryViewTs(nowDate, item.ts)} this.activateItem(item.historyid)}> - - - - - - - - - - -
- + +
+
this.handleSelect(item.historyid)}> + +
+
+ this.handleUse(item)} + onCopy={() => this.handleCopy(item)} + isCopied={this.copiedItemId.get() == item.historyid} + fontSize="normal" + limitHeight={true} + /> +
this.activateItem(item.historyid)} + /> +
+
{formatSSName(snames, scrnames, item)}
+
{formatRemoteName(rnames, item.remote)}
+
{getHistoryViewTs(nowDate, item.ts)}
+
this.activateItem(item.historyid)}> + + + -
+ + + + + + + +
+
+ +
+
+ +
+
+ + +
-
+
Showing {offset + 1}-{offset + items.length}