12.0 change toolbar buttons style (#6197)

* 00 fix codes

* change toolbar buttons style

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}>

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>
-          </div>
+          <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}>

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;

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;
 }
 

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;
+#cur-folder-more-op-toggle {
+  margin-left: 10px;
+  margin-right: -4px;
 }
 
-.sf-view-mode-btn:hover {
-  background-color: #d2d3d3;
+#cur-view-change-mode-dropdown .dropdown-item {
+  padding: 4px 16px;
 }
 
-.sf-view-mode-btn.current-mode {
-  background-color: #fff;
+#cur-view-change-mode-dropdown .dropdown-item .fas,
+#cur-view-change-mode-dropdown .dropdown-item .sf3-font {
+  color: #666;
 }
-/* end view-mode toolbar */
 
-#cur-folder-more-op-toggle {
-  color: #444;
-  font-size: 14px;
-  height: 32px;
-  padding: 0;
-  line-height: 30px;
-  margin-left: 10px;
+#cur-view-change-mode-dropdown .dropdown-item:hover .fas,
+#cur-view-change-mode-dropdown .dropdown-item:hover .sf3-font {
+  color: #fff;
 }
 
 /* begin common-toolbar */

frontend/src/pages/wiki2/index.js

@@ -171,13 +171,13 @@ class Wiki extends Component {
       callback && callback();
     });
   };
-  
+
   onUpdatePage = (pageId, newPage) => {
     if (newPage.name === '') {
       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

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');
 

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 };

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";
 }