From 5220d2e5c97fdb08ca022682ac3b05f9dd69683c Mon Sep 17 00:00:00 2001 From: Tulir Asokan Date: Sat, 10 Nov 2018 19:22:04 +0200 Subject: [PATCH] Improve design of management UI --- maubot/management/frontend/.sass-lint.yml | 8 +--- maubot/management/frontend/public/index.html | 20 ++++++---- .../src/components/PreferenceTable.js | 24 +++++------ .../frontend/src/components/Switch.js | 2 +- .../frontend/src/pages/dashboard/Client.js | 8 ++-- .../frontend/src/pages/dashboard/Instance.js | 10 +++-- .../frontend/src/pages/dashboard/index.js | 7 ++-- .../frontend/src/style/base/elements.sass | 11 +++-- .../frontend/src/style/base/vars.sass | 2 +- .../src/style/lib/preferencetable.sass | 27 ++++++++----- .../frontend/src/style/lib/switch.sass | 10 +++-- .../src/style/pages/client/index.sass | 5 +-- .../src/style/pages/client/instances.sass | 11 +++-- .../src/style/pages/dashboard-grid.css | 5 ++- .../frontend/src/style/pages/dashboard.sass | 40 +++++++++++-------- .../frontend/src/style/pages/instance.sass | 10 +++-- .../frontend/src/style/pages/sidebar.sass | 2 +- 17 files changed, 113 insertions(+), 89 deletions(-) diff --git a/maubot/management/frontend/.sass-lint.yml b/maubot/management/frontend/.sass-lint.yml index 9c61ab1..61fdcfc 100644 --- a/maubot/management/frontend/.sass-lint.yml +++ b/maubot/management/frontend/.sass-lint.yml @@ -17,8 +17,6 @@ rules: - mq no-warn: 1 no-debug: 1 - no-ids: 2 - no-important: 2 hex-notation: - 2 - style: uppercase @@ -26,8 +24,4 @@ rules: - 2 - size: 4 property-sort-order: - - 1 - - order: - - display - - margin - ignore-custom-properties: true + - 0 diff --git a/maubot/management/frontend/public/index.html b/maubot/management/frontend/public/index.html index 932bd2e..886ebf5 100644 --- a/maubot/management/frontend/public/index.html +++ b/maubot/management/frontend/public/index.html @@ -17,18 +17,22 @@ along with this program. If not, see . --> - + + + Maubot Manager - - - -
- + + + +
+ diff --git a/maubot/management/frontend/src/components/PreferenceTable.js b/maubot/management/frontend/src/components/PreferenceTable.js index b58c55b..92dc3ce 100644 --- a/maubot/management/frontend/src/components/PreferenceTable.js +++ b/maubot/management/frontend/src/components/PreferenceTable.js @@ -34,28 +34,28 @@ export const PrefTable = ({ children, wrapperClass }) => { ) } -export const PrefRow = ({ name, children }) => ( -
-
{name}
+export const PrefRow = ({ name, fullWidth = false, labelFor = undefined, children }) => ( +
+
{children}
) -export const PrefInput = ({ rowName, ...args }) => ( - - +export const PrefInput = ({ rowName, fullWidth = false, ...args }) => ( + + ) -export const PrefSwitch = ({ rowName, ...args }) => ( - - +export const PrefSwitch = ({ rowName, fullWidth = false, ...args }) => ( + + ) -export const PrefSelect = ({ rowName, ...args }) => ( - - ) diff --git a/maubot/management/frontend/src/components/Switch.js b/maubot/management/frontend/src/components/Switch.js index 6ef43fd..a063abe 100644 --- a/maubot/management/frontend/src/components/Switch.js +++ b/maubot/management/frontend/src/components/Switch.js @@ -42,7 +42,7 @@ class Switch extends Component { render() { return (
+ tabIndex="0" onKeyPress={this.toggleKeyboard} id={this.props.id}>
{this.props.onText || "On"} diff --git a/maubot/management/frontend/src/pages/dashboard/Client.js b/maubot/management/frontend/src/pages/dashboard/Client.js index dba8eb2..24e91f2 100644 --- a/maubot/management/frontend/src/pages/dashboard/Client.js +++ b/maubot/management/frontend/src/pages/dashboard/Client.js @@ -193,18 +193,18 @@ class Client extends Component { renderPreferences = () => ( - - + diff --git a/maubot/management/frontend/src/pages/dashboard/Instance.js b/maubot/management/frontend/src/pages/dashboard/Instance.js index 67bcf16..f983938 100644 --- a/maubot/management/frontend/src/pages/dashboard/Instance.js +++ b/maubot/management/frontend/src/pages/dashboard/Instance.js @@ -63,8 +63,8 @@ class Instance extends Component { } componentWillReceiveProps(nextProps) { - this.setState(Object.assign(this.initialState, nextProps.instance), () => - this.updateClientOptions()) + this.setState(Object.assign(this.initialState, nextProps.instance)) + this.updateClientOptions() } clientSelectEntry = client => client && { @@ -127,7 +127,9 @@ class Instance extends Component { } get selectedClientEntry() { - return this.clientSelectEntry(this.props.ctx.clients[this.state.primary_user]) + return this.state.primary_user + ? this.clientSelectEntry(this.props.ctx.clients[this.state.primary_user]) + : {} } get selectedPluginEntry() { @@ -159,7 +161,7 @@ class Instance extends Component { + disabled={!this.isNew} fullWidth={true}/> this.setState({ enabled })}/> Maubot Manager -
-
- {localStorage.username} -
+ +
+ {localStorage.username}