Slim down view mode dropdown by using icons (#6900)

* slim down view mode dropdown by using icons

* update changelog

* fix linting

* disable view mode items when necessary

CHANGELOG.unreleased.md

@@ -15,6 +15,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 
 ### Changed
 - Upgraded antd UI library to v4.24.8 [#6865](https://github.com/scalableminds/webknossos/pull/6865)
+- The view mode dropdown was slimmed down by using icons to make the toolbar more space efficient. [#6900](https://github.com/scalableminds/webknossos/pull/6900)
 
 ### Fixed
 - Fixed a bug where N5 datasets reading with end-chunks that have a chunk size differing from the metadata-supplied chunk size would fail for some areas. [#6890](https://github.com/scalableminds/webknossos/pull/6890)

frontend/javascripts/oxalis/view/action-bar/dataset_position_view.tsx

@@ -24,6 +24,7 @@ type Props = {
 };
 const positionIconStyle: React.CSSProperties = {
   transform: "rotate(-45deg)",
+  marginRight: 0,
 };
 const warningColors: React.CSSProperties = {
   color: "rgb(255, 155, 85)",

frontend/javascripts/oxalis/view/action-bar/view_modes_view.tsx

@@ -1,4 +1,4 @@
-import { Select } from "antd";
+import { Button, Dropdown, MenuProps, Space } from "antd";
 import { connect } from "react-redux";
 import type { Dispatch } from "redux";
 import React, { PureComponent } from "react";
@@ -9,9 +9,9 @@ import {
 import type { OxalisState, AllowedMode } from "oxalis/store";
 import Store from "oxalis/store";
 import * as Utils from "libs/utils";
-import type { ViewMode } from "oxalis/constants";
+import { ViewMode, ViewModeValues } from "oxalis/constants";
 import constants from "oxalis/constants";
-const { Option } = Select;
+
 type StateProps = {
   viewMode: ViewMode;
   allowedModes: Array<AllowedMode>;
@@ -21,6 +21,17 @@ type DispatchProps = {
 };
 type Props = StateProps & DispatchProps;
 
+const VIEW_MODE_TO_ICON = {
+  [constants.MODE_PLANE_TRACING]: <i className="fas fa-th-large without-icon-margin" />,
+  [constants.MODE_ARBITRARY]: <i className="fas fa-globe without-icon-margin" />,
+  [constants.MODE_ARBITRARY_PLANE]: (
+    <i
+      className="fas fa-square-full without-icon-margin"
+      style={{ transform: "scale(0.8, 1) rotate(-45deg)" }}
+    />
+  ),
+};
+
 class ViewModesView extends PureComponent<Props, {}> {
   handleChange = (mode: ViewMode) => {
     // If we switch back from any arbitrary mode we stop recording.
@@ -51,24 +62,40 @@ class ViewModesView extends PureComponent<Props, {}> {
   }
 
   render() {
+    const handleMenuClick: MenuProps["onClick"] = (args) => {
+      if (ViewModeValues.includes(args.key as ViewMode)) {
+        this.handleChange(args.key as ViewMode);
+      }
+    };
+
+    const MENU_ITEMS: MenuProps["items"] = [
+      {
+        key: "1",
+        type: "group",
+        label: "Select View Mode",
+        children: ViewModeValues.map((mode) => ({
+          label: Utils.capitalize(mode),
+          key: mode,
+          disabled: this.isDisabled(mode),
+          icon: <span style={{ marginRight: 8 }}>{VIEW_MODE_TO_ICON[mode]}</span>,
+        })),
+      },
+    ];
+
+    const menuProps = {
+      items: MENU_ITEMS,
+      onClick: handleMenuClick,
+    };
+
     return (
-      <Select
-        value={this.props.viewMode}
-        style={{
-          width: 120,
-        }}
-        onChange={this.handleChange}
-      >
-        {[
-          constants.MODE_PLANE_TRACING,
-          constants.MODE_ARBITRARY,
-          constants.MODE_ARBITRARY_PLANE,
-        ].map((mode) => (
-          <Option key={mode} disabled={this.isDisabled(mode)} value={mode}>
-            {Utils.capitalize(mode)}
-          </Option>
-        ))}
-      </Select>
+      // The outer div is necessary for proper spacing.
+      <div>
+        <Dropdown menu={menuProps}>
+          <Button>
+            <Space>{VIEW_MODE_TO_ICON[this.props.viewMode]}</Space>
+          </Button>
+        </Dropdown>
+      </div>
     );
   }
 }

package.json

@@ -137,7 +137,7 @@
     "@airbrake/browser": "^2.1.7",
     "@ant-design/colors": "^6.0.0",
     "@ant-design/icons": "^4.6.2",
-    "@fortawesome/fontawesome-free": "^5.14.0",
+    "@fortawesome/fontawesome-free": "^5.15.4",
     "@rehooks/document-title": "^1.0.2",
     "@scalableminds/prop-types": "^15.6.1",
     "@tanstack/query-sync-storage-persister": "^4.14.1",

yarn.lock

@@ -572,10 +572,10 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
-"@fortawesome/fontawesome-free@^5.14.0":
-  version "5.15.1"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.1.tgz#ccfef6ddbe59f8fe8f694783e1d3eb88902dc5eb"
-  integrity sha512-OEdH7SyC1suTdhBGW91/zBfR6qaIhThbcN8PUXtXilY4GYnSBbVqOntdHbC1vXwsDnX0Qix2m2+DSU1J51ybOQ==
+"@fortawesome/fontawesome-free@^5.15.4":
+  version "5.15.4"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.4.tgz#ecda5712b61ac852c760d8b3c79c96adca5554e5"
+  integrity sha512-eYm8vijH/hpzr/6/1CJ/V/Eb1xQFW2nnUKArb3z+yUWv7HTwj6M7SP957oMjfZjAHU6qpoNc2wQvIxBLWYa/Jg==
 
 "@humanwhocodes/config-array@^0.9.2":
   version "0.9.5"