12.0 change toolbar buttons style (#6197)

* 00 fix codes * change toolbar buttons style
2025-09-15 06:44:16 +00:00 · 2024-06-13 15:27:20 +08:00
parent fef6e2d5b5
commit 7e1d98990f
15 changed files with 144 additions and 65 deletions
--- a/frontend/src/components/cur-dir-path/dir-path.js
+++ b/frontend/src/components/cur-dir-path/dir-path.js
@@ -128,7 +128,9 @@ class DirPath extends React.Component {

    return (
      <div className="path-container dir-view-path">
-        <button className="op-btn mr-2" onClick={this.props.toggleTreePanel}><span className="sf3-font-side-bar sf3-font"></span></button>
+        <span className="cur-view-path-btn mr-1" style={{marginLeft: '-4px'}} onClick={this.props.toggleTreePanel}>
+          <span className="sf3-font-side-bar sf3-font"></span>
+        </span>
        {this.props.pathPrefix && this.props.pathPrefix.map((item, index) => {
          return (
            <Fragment key={index}>
--- a/frontend/src/components/cur-dir-path/dir-tool.js
+++ b/frontend/src/components/cur-dir-path/dir-tool.js
@@ -24,6 +24,7 @@ class DirTool extends React.Component {
    super(props);
    this.state = {
      isRepoTagDialogOpen: false,
+      isSwitchModeDropdownMenuOpen: false,
      isDropdownMenuOpen: false
    };
  }
@@ -34,6 +35,12 @@ class DirTool extends React.Component {
    });
  };

+  toggleSwitchModeDropdownMenu = () => {
+    this.setState({
+      isSwitchModeDropdownMenuOpen: !this.state.isSwitchModeDropdownMenuOpen
+    });
+  };
+
  hidePopover = (e) => {
    if (e) {
      let dom = e.target;
@@ -115,27 +122,66 @@ class DirTool extends React.Component {
  };

  render() {
-    let baseClass = 'btn btn-secondary btn-icon sf-view-mode-btn ';
    const menuItems = this.getMenuList();
-    const { isDropdownMenuOpen } = this.state;
+    const { isDropdownMenuOpen, isSwitchModeDropdownMenuOpen } = this.state;
    const { repoID } = this.props;
    return (
      <React.Fragment>
        <div className="d-flex">
-          <div className="view-modes">
-            <button className={`${baseClass} sf3-font-list-view sf3-font ${this.props.currentMode === 'list' ? 'current-mode' : ''}`} id='list' title={gettext('List')} aria-label={gettext('List')} onClick={this.props.switchViewMode.bind(this, 'list')}></button>
-            <button className={`${baseClass} sf3-font-grid-view sf3-font ${this.props.currentMode === 'grid' ? 'current-mode' : ''}`} id='grid' title={gettext('Grid')} aria-label={gettext('Grid')} onClick={this.props.switchViewMode.bind(this, 'grid')}></button>
+          <Dropdown
+            isOpen={isSwitchModeDropdownMenuOpen}
+            toggle={this.toggleSwitchModeDropdownMenu}
+            id="cur-view-change-mode-dropdown"
+          >
+            <DropdownToggle
+              tag="i"
+              children={
+                <span className='cur-view-path-btn px-1'>
+                  <span className={`sf3-font sf3-font-${this.props.currentMode === 'list' ? 'list-view' : 'grid-view'}`}></span>
+                  <span className={'sf3-font sf3-font-down'}></span>
+                </span>
+              }
+              data-toggle="dropdown"
+              title={gettext('Change view mode')}
+              aria-label={gettext('Change view mode')}
+              aria-expanded={isSwitchModeDropdownMenuOpen}
+            >
+            </DropdownToggle>
+            <DropdownMenu right={true}>
+              <DropdownItem key={0} onClick={this.props.switchViewMode.bind(this, 'list')}>
+                <div className="d-flex justify-content-between align-items-center">
+                  <span className="mr-8 d-flex justify-content-between align-items-center">
+                    <span className={'sf3-font-list-view sf3-font mr-2'}></span>
+                    <span>{gettext('List view')}</span>
+                  </span>
+                  <span>
+                    {this.props.currentMode === 'list' && <i className="fas fa-check color-selected"></i>}
+                  </span>
                </div>
+              </DropdownItem>
+              <DropdownItem key={1} onClick={this.props.switchViewMode.bind(this, 'grid')}>
+                <div className="d-flex justify-content-between align-items-center">
+                  <span className="mr-8 d-flex justify-content-between align-items-center">
+                    <span className={'sf3-font-grid-view sf3-font mr-2'}></span>
+                    <span>{gettext('Grid view')}</span>
+                  </span>
+                  <span>
+                    {this.props.currentMode === 'grid' && <i className="fas fa-check color-selected"></i>}
+                  </span>
+                </div>
+              </DropdownItem>
+            </DropdownMenu>
+          </Dropdown>
          {menuItems.length > 0 &&
          <Dropdown isOpen={isDropdownMenuOpen} toggle={this.toggleDropdownMenu}>
            <DropdownToggle
+              tag="i"
              id="cur-folder-more-op-toggle"
-              className={'sf3-font-more sf3-font'}
+              className={'cur-view-path-btn sf3-font-more sf3-font'}
              data-toggle="dropdown"
              title={gettext('More operations')}
              aria-label={gettext('More operations')}
              aria-expanded={isDropdownMenuOpen}
-              onKeyDown={this.onDropdownToggleKeyDown}
            >
            </DropdownToggle>
            <DropdownMenu right={true}>
--- a/frontend/src/css/layout.css
+++ b/frontend/src/css/layout.css
@@ -102,6 +102,32 @@
  border-bottom: 1px solid #eee;
 }

+.cur-view-path .cur-view-path-btn {
+  cursor: pointer;
+  height: 24px;
+  min-width: 24px;
+  width: fit-content;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.cur-view-path .cur-view-path-btn.sf3-font,
+.cur-view-path .cur-view-path-btn .sf3-font {
+  font-size: 16px;
+  color: #666;
+}
+
+.cur-view-path .cur-view-path-btn:hover {
+  background-color: #EFEFEF;
+  border-radius: 3px;  
+}
+
+.cur-view-path .cur-view-path-btn .sf3-font-down {
+  transform: scale(0.8);
+  margin-left: 2px;
+}
+
 .cur-view-content {
  padding: 0rem 1rem;
  flex: 1;
--- a/frontend/src/css/lib-content-view.css
+++ b/frontend/src/css/lib-content-view.css
@@ -252,7 +252,7 @@
 }

 .dir-view-path .path-item-dropdown-toggle {
-  color: #999;
+  color: #666;
  font-size: .6rem;
 }

--- a/frontend/src/css/toolbar.css
+++ b/frontend/src/css/toolbar.css
@@ -58,42 +58,23 @@

 /* end file-operation toolbar */

-/* begin view-mode toolbar */
-.view-modes {
-  padding: 2px;
-  background-color: #e5e6e7;
-  border-radius: 3px;
-  height: 32px;
-}
-.sf-view-mode-btn {
-  width: 44px;
-  height: 28px;
-  padding: 0;
-  background-color: transparent;
-  color: #444;
-  font-size: 14px;
-  line-height: 2;
-  border: 0;
-  border-radius: 2px;
-  font-weight: normal;
-}
-
-.sf-view-mode-btn:hover {
-  background-color: #d2d3d3;
-}
-
-.sf-view-mode-btn.current-mode {
-  background-color: #fff;
-}
-/* end view-mode toolbar */
-
 #cur-folder-more-op-toggle {
-  color: #444;
-  font-size: 14px;
-  height: 32px;
-  padding: 0;
-  line-height: 30px;
  margin-left: 10px;
+  margin-right: -4px;
+}
+
+#cur-view-change-mode-dropdown .dropdown-item {
+  padding: 4px 16px;
+}
+
+#cur-view-change-mode-dropdown .dropdown-item .fas,
+#cur-view-change-mode-dropdown .dropdown-item .sf3-font {
+  color: #666;
+}
+
+#cur-view-change-mode-dropdown .dropdown-item:hover .fas,
+#cur-view-change-mode-dropdown .dropdown-item:hover .sf3-font {
+  color: #fff;
 }

 /* begin common-toolbar */
--- a/frontend/src/pages/wiki2/index.js
+++ b/frontend/src/pages/wiki2/index.js
@@ -177,7 +177,7 @@ class Wiki extends Component {
      toaster.danger(gettext('Page name cannot be empty'));
      return;
    }
-    const { config } = this.state
+    const { config } = this.state;
    let pages = config.pages;
    let newPages = pages.map(page => {
      if (page.id === pageId) {
@@ -188,8 +188,8 @@ class Wiki extends Component {
    const newConfig = { ...config, pages: newPages };
    this.saveWikiConfig(newConfig);
  };
-  render() {

+  render() {
    return (
      <div id="main" className="wiki-main">
        <SidePanel
--- a/frontend/src/pages/wiki2/main-panel.js
+++ b/frontend/src/pages/wiki2/main-panel.js
@@ -48,24 +48,24 @@ class MainPanel extends Component {
      serviceUrl: appConfig.serviceURL,
      assets_url: appConfig.assetsUrl,
    };
-    const currentPageConfig = getCurrentPageConfig(config.pages, currentPageId)
+    const currentPageConfig = getCurrentPageConfig(config.pages, currentPageId);
    return { ...props, docUuid: window.seafile.docUuid, currentPageConfig };
  }

  handleRenameDocument = (e) => {
-    const newName = e.target.value.trim()
-    const { currentPageConfig } = this.state
-    const { id, name, icon } = currentPageConfig
+    const newName = e.target.value.trim();
+    const { currentPageConfig } = this.state;
+    const { id, name, icon } = currentPageConfig;
    if (newName === name) return;
-    const pageConfig = { name: newName, icon }
-    this.props.onUpdatePage(id, pageConfig)
+    const pageConfig = { name: newName, icon };
+    this.props.onUpdatePage(id, pageConfig);
    // Reset title if name is empty
    if (!newName) e.target.value = name;
-  }
+  };

  render() {
    const { permission, pathExist, isDataLoading, isViewFile, config } = this.props;
-    const { currentPageConfig } = this.state
+    const { currentPageConfig } = this.state;
    const isViewingFile = pathExist && !isDataLoading && isViewFile;
    const isReadOnly = !(permission === 'rw');

--- a/frontend/src/pages/wiki2/utils/index.js
+++ b/frontend/src/pages/wiki2/utils/index.js
@@ -44,7 +44,7 @@ const getIconURL = (repoId, fileName) => {
 };

 const getCurrentPageConfig = (pages,pageId) => {
-  return pages.filter(page => page.id === pageId)[0]
-}
+  return pages.filter(page => page.id === pageId)[0];
+};

 export { generatorBase64Code, generateUniqueId, isObjectNotEmpty, getIconURL, getCurrentPageConfig };
--- a/media/css/sf_font3/iconfont.css
+++ b/media/css/sf_font3/iconfont.css
@@ -1,11 +1,11 @@
@font-face {
  font-family: "sf3-font"; /* Project id 1230969 */
-  src: url('iconfont.eot?t=1716950761276'); /* IE9 */
-  src: url('iconfont.eot?t=1716950761276#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('iconfont.woff2?t=1716950761276') format('woff2'),
-       url('iconfont.woff?t=1716950761276') format('woff'),
-       url('iconfont.ttf?t=1716950761276') format('truetype'),
-       url('iconfont.svg?t=1716950761276#sf3-font') format('svg');
+  src: url('iconfont.eot?t=1717754578668'); /* IE9 */
+  src: url('iconfont.eot?t=1717754578668#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('iconfont.woff2?t=1717754578668') format('woff2'),
+       url('iconfont.woff?t=1717754578668') format('woff'),
+       url('iconfont.ttf?t=1717754578668') format('truetype'),
+       url('iconfont.svg?t=1717754578668#sf3-font') format('svg');
 }

 .sf3-font {
@@ -16,6 +16,22 @@
  -moz-osx-font-smoothing: grayscale;
 }

+.sf3-font-monitor:before {
+  content: "\e827";
+}
+
+.sf3-font-star-empty:before {
+  content: "\e825";
+}
+
+.sf3-font-star:before {
+  content: "\e826";
+}
+
+.sf3-font-down:before {
+  content: "\e824";
+}
+
 .sf3-font-new-page:before {
  content: "\e823";
 }
--- a/media/css/sf_font3/iconfont.eot
+++ b/media/css/sf_font3/iconfont.eot
--- a/media/css/sf_font3/iconfont.js
+++ b/media/css/sf_font3/iconfont.js
--- a/media/css/sf_font3/iconfont.svg
+++ b/media/css/sf_font3/iconfont.svg
@@ -14,6 +14,14 @@
    />
      <missing-glyph />
      
+      <glyph glyph-name="monitor" unicode="&#59431;" d="M620.8-16c0-28.8-12.8-57.6-32-80s-48-32-76.8-32-57.6 12.8-76.8 32-32 48-32 80h217.6zM512 768c28.8 0 54.4-25.6 54.4-57.6v-35.2c124.8-25.6 220.8-137.6 220.8-275.2v-44.8c0-80 25.6-156.8 73.6-217.6l25.6-32c9.6-12.8 12.8-28.8 6.4-44.8-6.4-16-22.4-22.4-38.4-22.4H169.6c-16 0-28.8 9.6-38.4 22.4-6.4 16-6.4 32 6.4 44.8l25.6 32c48 60.8 73.6 137.6 73.6 217.6v44.8c0 134.4 92.8 249.6 220.8 275.2V710.4c0 32 25.6 57.6 54.4 57.6z m0-166.4c-105.6 0-192-86.4-192-195.2v-44.8c0-83.2-22.4-166.4-67.2-236.8h521.6c-44.8 70.4-67.2 150.4-67.2 236.8v44.8C704 512 617.6 601.6 512 601.6z m438.4 28.8c25.6 12.8 51.2 0 64-22.4 12.8-25.6 0-51.2-22.4-64l-115.2-54.4c-25.6-12.8-51.2 0-64 22.4s0 51.2 22.4 64l115.2 54.4z m-876.8 32L188.8 608c25.6-12.8 35.2-38.4 22.4-64-12.8-25.6-38.4-35.2-64-22.4L35.2 576C9.6 585.6 0 614.4 9.6 640c12.8 22.4 41.6 35.2 64 22.4zM243.2 832l73.6-105.6c16-22.4 9.6-51.2-12.8-67.2s-51.2-9.6-67.2 12.8L163.2 777.6c-16 22.4-9.6 51.2 12.8 67.2s51.2 9.6 67.2-12.8z m505.6 0c16 22.4 44.8 25.6 67.2 12.8s25.6-44.8 12.8-67.2L755.2 672c-16-22.4-44.8-25.6-67.2-12.8s-28.8 44.8-12.8 67.2L748.8 832z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="star-empty" unicode="&#59429;" d="M512 832c16 0 32-9.6 38.4-25.6l124.8-256 278.4-41.6c16-3.2 28.8-12.8 35.2-28.8s0-32-9.6-44.8l-201.6-201.6 48-281.6c3.2-16-3.2-32-19.2-41.6-12.8-9.6-32-9.6-44.8-3.2L512 38.4 262.4-96c-16-6.4-32-6.4-44.8 3.2-12.8 9.6-19.2 25.6-19.2 41.6l48 281.6-201.6 201.6c-12.8 16-16 32-9.6 48s19.2 25.6 35.2 28.8l278.4 41.6 124.8 256c6.4 16 22.4 25.6 38.4 25.6z m0-144l-96-198.4c-6.4-12.8-19.2-22.4-32-25.6l-214.4-32 156.8-153.6c9.6-9.6 16-25.6 12.8-38.4l-38.4-217.6 192 102.4c12.8 6.4 28.8 6.4 41.6 0l192-102.4-35.2 217.6c-3.2 12.8 3.2 28.8 12.8 38.4l156.8 153.6-214.4 32c-12.8 3.2-25.6 9.6-32 25.6L512 688z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="star" unicode="&#59430;" d="M563.2 800c-9.6 19.2-28.8 32-51.2 32s-41.6-12.8-51.2-32l-118.4-240-262.4-38.4c-22.4-3.2-38.4-19.2-48-38.4-6.4-22.4 0-44.8 12.8-60.8l188.8-188.8L195.2-32c-3.2-22.4 6.4-44.8 22.4-57.6s41.6-16 60.8-3.2L512 32l233.6-124.8c19.2-9.6 44.8-9.6 60.8 3.2 19.2 12.8 25.6 35.2 22.4 57.6l-44.8 265.6 188.8 188.8c16 16 22.4 38.4 12.8 60.8-6.4 22.4-25.6 35.2-48 38.4l-262.4 38.4L563.2 800z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="down" unicode="&#59428;" d="M489.6 150.39999999999998l-342.4 352c-22.4 22.4-22.4 60.8 0 83.2l35.2 35.2c22.4 22.4 57.6 22.4 80 0l249.6-256 249.6 256c22.4 22.4 57.6 22.4 80 0l35.2-35.2c22.4-22.4 22.4-60.8 0-83.2l-342.4-352c-12.8-12.8-32-12.8-44.8 0z"  horiz-adv-x="1024" />
+      
      <glyph glyph-name="new-page" unicode="&#59427;" d="M560 864c19.2 0 48-16 48-48S579.2 768 560 768H160c-19.2 0-32-12.8-32-32v-704c0-19.2 12.8-32 32-32h704c19.2 0 32 12.8 32 32V432c0 16 6.4 48 48 48s48-32 48-48V0c0-54.4-41.6-96-96-96H128c-54.4 0-96 41.6-96 96V768c0 54.4 41.6 96 96 96h432z m179.2-124.8l140.8-147.2-348.8-348.8c-12.8-12.8-28.8-22.4-44.8-28.8-80-28.8-124.8-44.8-134.4-44.8-12.8 0-25.6 0-32 6.4-9.6 6.4-9.6 22.4-6.4 32 0 6.4 12.8 44.8 32 118.4 6.4 22.4 19.2 41.6 35.2 57.6L739.2 739.2z m92.8 96C870.4 873.6 934.4 870.4 969.6 832c38.4-41.6 38.4-105.6 0-147.2l-38.4-38.4-144 140.8L832 835.2z"  horiz-adv-x="1024" />
      
      <glyph glyph-name="upload-files" unicode="&#59425;" d="M160 160v-160h704v160h96v-192c0-35.2-25.6-60.8-57.6-64H128c-35.2 0-64 28.8-64 64v192h96zM518.4 864l278.4-268.8-80-76.8-156.8 150.4v-585.6h-96V656L320 518.4 240 595.2 518.4 864z"  horiz-adv-x="1024" />
@@ -44,7 +52,7 @@
      
      <glyph glyph-name="more-vertical" unicode="&#59418;" d="M512 640c54.4 0 96 41.6 96 96s-41.6 96-96 96-96-41.6-96-96 41.6-96 96-96z m0-352c54.4 0 96 41.6 96 96s-41.6 96-96 96-96-41.6-96-96 41.6-96 96-96z m6.4-352c54.4 0 96 41.6 96 96s-41.6 96-96 96-96-41.6-96-96 44.8-96 96-96z"  horiz-adv-x="1024" />
      
-      <glyph glyph-name="list-view" unicode="&#59419;" d="M256 800h736c19.2 0 32-12.8 32-32v-64c0-19.2-12.8-32-32-32H256c-19.2 0-32 12.8-32 32V768c0 19.2 12.8 32 32 32zM32 800h64c19.2 0 32-12.8 32-32v-64c0-19.2-12.8-32-32-32H32c-19.2 0-32 12.8-32 32V768c0 19.2 12.8 32 32 32z m224-352h736c19.2 0 32-12.8 32-32v-64c0-19.2-12.8-32-32-32H256c-19.2 0-32 12.8-32 32v64c0 19.2 12.8 32 32 32z m-224 0h64c19.2 0 32-12.8 32-32v-64c0-19.2-12.8-32-32-32H32c-19.2 0-32 12.8-32 32v64c0 19.2 12.8 32 32 32z m224-352h736c19.2 0 32-12.8 32-32v-64c0-19.2-12.8-32-32-32H256c-19.2 0-32 12.8-32 32v64c0 19.2 12.8 32 32 32z m-224 0h64c19.2 0 32-12.8 32-32v-64c0-19.2-12.8-32-32-32H32c-19.2 0-32 12.8-32 32v64c0 19.2 12.8 32 32 32z"  horiz-adv-x="1024" />
+      <glyph glyph-name="list-view" unicode="&#59419;" d="M304 768h672c25.6 0 48-22.4 48-48S1001.6 672 976 672h-672C278.4 672 256 694.4 256 720S278.4 768 304 768z m-224 32C124.8 800 160 764.8 160 720S124.8 640 80 640 0 675.2 0 720 35.2 800 80 800z m224-368h672c25.6 0 48-22.4 48-48s-22.4-48-48-48h-672c-25.6 0-48 22.4-48 48s22.4 48 48 48z m-224 32C124.8 464 160 428.8 160 384s-35.2-80-80-80S0 339.20000000000005 0 384s35.2 80 80 80z m224-368h672c25.6 0 48-22.4 48-48s-22.4-48-48-48h-672c-25.6 0-48 22.4-48 48S278.4 96 304 96z m-224 32C124.8 128 160 92.79999999999995 160 48S124.8-32 80-32 0 3.2000000000000455 0 48 35.2 128 80 128z"  horiz-adv-x="1024" />
      
      <glyph glyph-name="info" unicode="&#59420;" d="M512 896c281.6 0 512-230.4 512-512s-230.4-512-512-512S0 102.4 0 384 230.4 896 512 896z m0-96C281.6 800 96 614.4 96 384s185.6-416 416-416 416 185.6 416 416c0 108.8-44.8 217.6-121.6 294.4S620.8 800 512 800z m32-352c19.2 0 32-12.8 32-32v-256c0-19.2-12.8-32-32-32h-64c-19.2 0-32 12.8-32 32v256c0 19.2 12.8 32 32 32h64z m-19.2 192c9.6 0 16-3.2 22.4-9.6 3.2-3.2 6.4-6.4 9.6-6.4 25.6-25.6 25.6-64 0-89.6-3.2-3.2-6.4-6.4-9.6-6.4-6.4-3.2-16-6.4-22.4-9.6h-25.6c-9.6 0-16 3.2-22.4 9.6-3.2 3.2-6.4 6.4-9.6 6.4-25.6 25.6-25.6 64 0 89.6 3.2 3.2 6.4 6.4 9.6 6.4 6.4 3.2 16 6.4 22.4 9.6h25.6z"  horiz-adv-x="1024" />
      
--- a/media/css/sf_font3/iconfont.ttf
+++ b/media/css/sf_font3/iconfont.ttf
--- a/media/css/sf_font3/iconfont.woff
+++ b/media/css/sf_font3/iconfont.woff
--- a/media/css/sf_font3/iconfont.woff2
+++ b/media/css/sf_font3/iconfont.woff2