feat: add workspace drawer icon display

orgrimarr · orgrimarr · commit 0f49690b9c59 · 2023-06-17T14:31:12.000+02:00
diff --git a/src/components/ui/WorkspaceIcon.tsx b/src/components/ui/WorkspaceIcon.tsx
@@ -0,0 +1,71 @@
+import { Component, ReactNode } from 'react';
+import { observer } from 'mobx-react';
+import withStyles, { WithStylesProps } from 'react-jss';
+import classnames from 'classnames';
+import { mdiInfinity } from '@mdi/js';
+import Icon from './icon';
+
+const styles = theme => ({
+  root: {
+    height: `${theme.serviceIcon.width}px`,
+    width: `${theme.serviceIcon.width}px`,
+    textAlign: 'center',
+    display: 'table-cell',
+    verticalAlign: 'middle',
+  },
+  icon: {
+    height: 'auto',
+    width: `${theme.serviceIcon.width}px`,
+    maxHeight: `${theme.serviceIcon.width}px`,
+  },
+  iconLetterContainer: {
+    border: `1px solid ${theme.colorText}`,
+    borderRadius: '20%',
+  },
+  iconLetter: {
+    fontSize: 'x-large',
+    fontWeight: '500',
+  },
+});
+
+interface IProps extends WithStylesProps<typeof styles> {
+  className?: string;
+  name: string | null;
+  iconUrl: string;
+}
+
+@observer
+class WorkspaceIcon extends Component<IProps> {
+  render(): ReactNode {
+    const { classes, className, name, iconUrl } = this.props;
+    if (iconUrl === 'allServices') {
+      return (
+        <div className={classnames([classes.root, className])}>
+          <Icon icon={mdiInfinity} size={1.5} />
+        </div>
+      );
+    }
+    if (iconUrl) {
+      return (
+        <div className={classnames([classes.root, className])}>
+          <img src={iconUrl} className={classes.icon} alt={name || undefined} />{' '}
+        </div>
+      );
+    }
+    return (
+      <div
+        className={classnames([
+          classes.root,
+          classes.iconLetterContainer,
+          className,
+        ])}
+      >
+        <span className={classes.iconLetter}>
+          {(name || ' ').slice(0, 1).toLocaleUpperCase()}
+        </span>
+      </div>
+    );
+  }
+}
+
+export default withStyles(styles, { injectTheme: true })(WorkspaceIcon);
diff --git a/src/containers/layout/AppLayoutContainer.tsx b/src/containers/layout/AppLayoutContainer.tsx
@@ -80,6 +80,7 @@ class AppLayoutContainer extends Component<IProps> {
             ? workspaceStore.getWorkspaceServices(workspace).map(s => s.name)
             : services.all.map(s => s.name)
         }
+        useIconDisplayStyle={settings.all.app.useWorkspaceDrawerIconStyle}
       />
     );
 
diff --git a/src/features/appearance/index.ts b/src/features/appearance/index.ts
@@ -380,6 +380,15 @@ function generateOpenWorkspaceStyle() {
   `;
 }
 
+function generateWorkspaceWidthStyle(widthStr) {
+  const width = Number(widthStr);
+  return `
+    .drawerWithIconWidth {
+      width: ${width}
+    }
+  `;
+}
+
 function generateStyle(settings, app) {
   let style = '';
 
@@ -418,6 +427,8 @@ function generateStyle(settings, app) {
     isFullScreen,
   );
 
+  style += generateWorkspaceWidthStyle(serviceRibbonWidth);
+
   if (shouldShowDragArea) {
     style += generateShowDragAreaStyle(accentColor);
   }
diff --git a/src/features/workspaces/components/EditWorkspaceForm.tsx b/src/features/workspaces/components/EditWorkspaceForm.tsx
@@ -30,6 +30,10 @@ const messages = defineMessages({
     id: 'settings.workspace.form.name',
     defaultMessage: 'Name',
   },
+  iconUrl: {
+    id: 'settings.workspace.form.iconUrl',
+    defaultMessage: 'Icon',
+  },
   yourWorkspaces: {
     id: 'settings.workspace.form.yourWorkspaces',
     defaultMessage: 'Your workspaces',
@@ -107,6 +111,12 @@ class EditWorkspaceForm extends Component<IProps> {
           value: workspace.name,
           validators: [required],
         },
+        iconUrl: {
+          label: intl.formatMessage(messages.iconUrl),
+          placeholder: intl.formatMessage(messages.iconUrl),
+          value: workspace.iconUrl || '',
+          validators: [],
+        },
         keepLoaded: {
           label: intl.formatMessage(messages.keepLoaded),
           value: workspace.services.includes(KEEP_WS_LOADED_USID),
@@ -181,6 +191,7 @@ class EditWorkspaceForm extends Component<IProps> {
           )}
           <div className={classes.nameInput}>
             <Input {...form.$('name').bind()} />
+            <Input {...form.$('iconUrl').bind()} />
             <Toggle {...form.$('keepLoaded').bind()} />
             <p className={`${classes.keepLoadedInfo} franz-form__label`}>
               {intl.formatMessage(messages.keepLoadedInfo)}
diff --git a/src/features/workspaces/components/WorkspaceDrawer.tsx b/src/features/workspaces/components/WorkspaceDrawer.tsx
@@ -40,16 +40,22 @@ const messages = defineMessages({
 const styles = theme => ({
   drawer: {
     background: theme.workspaces.drawer.background,
-    width: `${theme.workspaces.drawer.width}px`,
     display: 'flex',
     flexDirection: 'column',
   },
+  drawerWithText: {
+    width: `${theme.workspaces.drawer.width}px`,
+  },
   headline: {
     fontSize: '24px',
     marginTop: '38px',
     marginBottom: '25px',
     marginLeft: theme.workspaces.drawer.padding,
   },
+  headlineWithicon: {
+    marginLeft: '0',
+    color: theme.workspaces.drawer.buttons.color,
+  },
   workspacesSettingsButton: {
     float: 'right',
     marginRight: theme.workspaces.drawer.padding,
@@ -90,6 +96,7 @@ const styles = theme => ({
 
 interface IProps extends WithStylesProps<typeof styles>, WrappedComponentProps {
   getServicesForWorkspace: (workspace: Workspace | null) => string[];
+  useIconDisplayStyle: boolean;
 }
 
 @observer
@@ -104,19 +111,24 @@ class WorkspaceDrawer extends Component<IProps> {
   }
 
   render(): ReactElement {
-    const { classes, getServicesForWorkspace } = this.props;
+    const { classes, getServicesForWorkspace, useIconDisplayStyle } =
+      this.props;
     const { intl } = this.props;
     const { activeWorkspace, isSwitchingWorkspace, nextWorkspace, workspaces } =
       workspaceStore;
     const actualWorkspace = isSwitchingWorkspace
       ? nextWorkspace
       : activeWorkspace;
+
+    const drawerWithClass = useIconDisplayStyle
+      ? 'drawerWithIconWidth'
+      : classes.drawerWithText;
     return (
-      <div className={`${classes.drawer} workspaces-drawer`}>
-        <H1 className={classes.headline}>
-          {intl.formatMessage(messages.headline)}
-          <span
-            className={classes.workspacesSettingsButton}
+      <div className={`${classes.drawer} ${drawerWithClass} workspaces-drawer`}>
+        {useIconDisplayStyle ? (
+          <button
+            type="button"
+            className={`${classes.headline} ${classes.headlineWithicon}`}
             onKeyDown={noop}
             onClick={() => {
               workspaceActions.openWorkspaceSettings();
@@ -130,11 +142,34 @@ class WorkspaceDrawer extends Component<IProps> {
               size={1.5}
               className={classes.workspacesSettingsButtonIcon}
             />
-          </span>
-        </H1>
+          </button>
+        ) : (
+          <H1 className={classes.headline}>
+            {intl.formatMessage(messages.headline)}
+            <span
+              className={classes.workspacesSettingsButton}
+              onKeyDown={noop}
+              onClick={() => {
+                workspaceActions.openWorkspaceSettings();
+              }}
+              data-tip={`${intl.formatMessage(
+                messages.workspacesSettingsTooltip,
+              )}`}
+            >
+              <Icon
+                icon={mdiCog}
+                size={1.5}
+                className={classes.workspacesSettingsButtonIcon}
+              />
+            </span>
+          </H1>
+        )}
+
         <div className={classes.workspaces}>
           <WorkspaceDrawerItem
             name={intl.formatMessage(messages.allServices)}
+            iconUrl="allServices"
+            useIconDisplayStyle={useIconDisplayStyle}
             onClick={() => {
               workspaceActions.deactivate();
               workspaceActions.toggleWorkspaceDrawer();
@@ -147,6 +182,8 @@ class WorkspaceDrawer extends Component<IProps> {
             <WorkspaceDrawerItem
               key={workspace.id}
               name={workspace.name}
+              iconUrl={workspace.iconUrl}
+              useIconDisplayStyle={useIconDisplayStyle}
               isActive={actualWorkspace === workspace}
               onClick={() => {
                 if (actualWorkspace === workspace) {
@@ -171,9 +208,12 @@ class WorkspaceDrawer extends Component<IProps> {
           >
             <Icon
               icon={mdiPlusBox}
+              size={useIconDisplayStyle ? 1.5 : 1}
               className={classes.workspacesSettingsButtonIcon}
             />
-            <span>{intl.formatMessage(messages.addNewWorkspaceLabel)}</span>
+            {useIconDisplayStyle !== true && (
+              <span>{intl.formatMessage(messages.addNewWorkspaceLabel)}</span>
+            )}{' '}
           </div>
         </div>
         <ReactTooltip place="right" type="dark" effect="solid" />
diff --git a/src/features/workspaces/components/WorkspaceDrawerItem.tsx b/src/features/workspaces/components/WorkspaceDrawerItem.tsx
@@ -8,6 +8,7 @@ import { Menu } from '@electron/remote';
 import { MenuItemConstructorOptions } from 'electron';
 import { altKey, cmdOrCtrlShortcutKey } from '../../../environment';
 import { acceleratorString } from '../../../jsUtils';
+import WorkspaceIcon from '../../../components/ui/WorkspaceIcon';
 
 const messages = defineMessages({
   noServicesAddedYet: {
@@ -49,6 +50,11 @@ const styles = theme => ({
     marginTop: '4px',
     color: theme.workspaces.drawer.listItem.name.color,
   },
+  icon: {
+    maxWidth: '30px',
+    maxHeight: '30px',
+    margin: 'auto',
+  },
   activeName: {
     color: theme.workspaces.drawer.listItem.name.activeColor,
   },
@@ -70,6 +76,8 @@ const styles = theme => ({
 interface IProps extends WithStylesProps<typeof styles>, WrappedComponentProps {
   isActive: boolean;
   name: string;
+  iconUrl: string;
+  useIconDisplayStyle: boolean;
   onClick: MouseEventHandler<HTMLInputElement>;
   services: string[];
   onContextMenuEditClick?: () => void | null;
@@ -83,6 +91,8 @@ class WorkspaceDrawerItem extends Component<IProps> {
       classes,
       isActive,
       name,
+      iconUrl,
+      useIconDisplayStyle,
       onClick,
       onContextMenuEditClick = null,
       services,
@@ -124,24 +134,30 @@ class WorkspaceDrawerItem extends Component<IProps> {
           `${cmdOrCtrlShortcutKey(false)}+${altKey(false)}`,
         )}
       >
-        <span
-          className={classnames([
-            classes.name,
-            isActive ? classes.activeName : null,
-          ])}
-        >
-          {name}
-        </span>
-        <span
-          className={classnames([
-            classes.services,
-            isActive ? classes.activeServices : null,
-          ])}
-        >
-          {services.length > 0
-            ? services.join(', ')
-            : intl.formatMessage(messages.noServicesAddedYet)}
-        </span>
+        {useIconDisplayStyle === true ? (
+          <WorkspaceIcon name={name} iconUrl={iconUrl} />
+        ) : (
+          <>
+            <span
+              className={classnames([
+                classes.name,
+                isActive ? classes.activeName : null,
+              ])}
+            >
+              {name}
+            </span>
+            <span
+              className={classnames([
+                classes.services,
+                isActive ? classes.activeServices : null,
+              ])}
+            >
+              {services.length > 0
+                ? services.join(', ')
+                : intl.formatMessage(messages.noServicesAddedYet)}
+            </span>
+          </>
+        )}
       </div>
     );
   }
diff --git a/src/features/workspaces/components/WorkspaceItem.tsx b/src/features/workspaces/components/WorkspaceItem.tsx
@@ -4,6 +4,7 @@ import { observer } from 'mobx-react';
 import withStyles, { WithStylesProps } from 'react-jss';
 import { noop } from 'lodash';
 import Workspace from '../models/Workspace';
+import WorkspaceIcon from '../../../components/ui/WorkspaceIcon';
 
 const styles = theme => ({
   row: {
@@ -13,7 +14,10 @@ const styles = theme => ({
       background: theme.workspaces.settings.listItems.hoverBgColor,
     },
   },
-  columnName: {},
+  columnName: {
+    width: '60px',
+    borderCollapse: 'separate',
+  },
 });
 
 interface IProps extends WithStylesProps<typeof styles> {
@@ -28,6 +32,13 @@ class WorkspaceItem extends Component<IProps> {
 
     return (
       <tr className={classes.row}>
+        <td
+          className={classes.columnName}
+          onClick={() => onItemClick(workspace)}
+          onKeyDown={noop}
+        >
+          <WorkspaceIcon name={workspace.name} iconUrl={workspace.iconUrl} />
+        </td>
         <td onClick={() => onItemClick(workspace)} onKeyDown={noop}>
           {workspace.name}
         </td>
diff --git a/src/features/workspaces/models/Workspace.ts b/src/features/workspaces/models/Workspace.ts
@@ -7,6 +7,8 @@ export default class Workspace {
 
   @observable name = null;
 
+  @observable iconUrl = '';
+
   @observable order = null;
 
   @observable services: string[] = [];
@@ -22,6 +24,7 @@ export default class Workspace {
 
     this.id = data.id;
     this.name = data.name;
+    this.iconUrl = data.iconUrl;
     this.order = data.order;
 
     let { services } = data;
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json

Original file line number	Diff line number	Diff line change
`@@ -80,6 +80,7 @@ class AppLayoutContainer extends Component<IProps> {`
`80`	`80`	`? workspaceStore.getWorkspaceServices(workspace).map(s => s.name)`
`81`	`81`	`: services.all.map(s => s.name)`
`82`	`82`	`}`
	`83`	`+ useIconDisplayStyle={settings.all.app.useWorkspaceDrawerIconStyle}`
`83`	`84`	`/>`
`84`	`85`	`);`
`85`	`86`