12.0 change dropdown menu style (#6227)

* 01 remove 200px dropdown menu

* 02 change check mark icon className

* 03 change dropdown padding

* 04 change menu min width 200px

* 05 change sort repos dropdown

frontend/src/components/dialog/create-tag-dialog.js

@@ -91,7 +91,7 @@ class CreateTagDialog extends React.Component {
                           <input name="color" type="radio" value={item} className="colorinput-input" defaultChecked onClick={this.selectTagcolor}></input> :
                           <input name="color" type="radio" value={item} className="colorinput-input" onClick={this.selectTagcolor}></input>}
                         <span className="colorinput-color rounded-circle d-flex align-items-center justify-content-center" style={{backgroundColor:item}}>
-                          <i className="fas fa-check color-selected"></i>
+                          <i className="sf2-icon-tick color-selected"></i>
                         </span>
                       </label>
                     </div>

frontend/src/components/dialog/edit-filetag-dialog.js

@@ -91,7 +91,7 @@ class TagItem extends React.Component {
           <span className="tag-color w-4 h-4 rounded-circle" style={{backgroundColor: repoTag.color}}></span>
           <span className="tag-name mx-2">{repoTag.name}</span>
         </div>
-        {isTagSelected && <i className="fas fa-check tag-selected-icon"></i>}
+        {isTagSelected && <i className="sf2-icon-tick tag-selected-icon"></i>}
       </li>
     );
   }

frontend/src/components/dialog/tag-color.js

@@ -88,7 +88,7 @@ class TagColor extends React.Component {
                     <label className="colorinput">
                       <input name="color" type="radio" value={item} className="colorinput-input" defaultChecked={item == tagColor} onClick={this.selectTagColor} />
                       <span className="colorinput-color rounded-circle d-flex align-items-center justify-content-center" style={{backgroundColor: item}}>
-                        <i className="fas fa-check color-selected"></i>
+                        <i className="sf2-icon-tick color-selected"></i>
                       </span>
                     </label>
                   </div>

frontend/src/components/popover/tag-item.js

@@ -66,7 +66,7 @@ class TagItem extends React.Component {
         <div className="tag-item d-flex align-items-center" style={{backgroundColor: repoTag.color}}>
           <span className="tag-name">{repoTag.name}</span>
         </div>
-        {isTagSelected && <i className="fas fa-check tag-selected-icon"></i>}
+        {isTagSelected && <i className="sf2-icon-tick tag-selected-icon"></i>}
       </li>
     );
   }

frontend/src/components/popover/virtual-tag-color.js

@@ -80,7 +80,7 @@ export default class VirtualTagColor extends React.Component {
                     <label className="colorinput">
                       <input name="color" type="radio" value={item} className="colorinput-input" defaultChecked={item == tagColor} onClick={this.selectTagColor} />
                       <span className="colorinput-color rounded-circle d-flex align-items-center justify-content-center" style={{backgroundColor: item}}>
-                        <i className="fas fa-check color-selected"></i>
+                        <i className="sf2-icon-tick color-selected"></i>
                       </span>
                     </label>
                   </div>

frontend/src/components/repos-sort-menu.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
+import { gettext } from '../utils/constants';
+
+const propTypes = {
+  sortOptions: PropTypes.array,
+  onSelectSortOption: PropTypes.func.isRequired
+};
+
+class ReposSortMenu extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isDropdownMenuOpen: false
+    };
+  }
+
+  toggleDropdownMenu = () => {
+    this.setState({
+      isDropdownMenuOpen: !this.state.isDropdownMenuOpen
+    });
+  };
+
+  render() {
+    const { isDropdownMenuOpen } = this.state;
+    const { sortOptions } = this.props;
+    return (
+      <Dropdown
+        isOpen={isDropdownMenuOpen}
+        toggle={this.toggleDropdownMenu}
+      >
+        <DropdownToggle
+          tag="div"
+          data-toggle="dropdown"
+          title={gettext('Switch view mode')}
+          aria-label={gettext('Switch view mode')}
+          aria-expanded={isDropdownMenuOpen}
+        >
+          <span className="cur-view-path-btn px-1" role="button">
+            <i className="sf3-font-sort2 sf3-font"></i>
+            <i className="sf3-font-down sf3-font"></i>
+          </span>
+        </DropdownToggle>
+        <DropdownMenu right={true} className="mt-1">
+          {sortOptions.map((item, index) => {
+            return (
+              <DropdownItem key={index} onClick={this.props.onSelectSortOption.bind(this, item)}>
+                <div className="d-flex justify-content-between align-items-center">
+                  <span className="mr-8">{item.text}</span>
+                  <span>{item.isSelected && <i className="sf2-icon-tick"></i>}</span>
+                </div>
+              </DropdownItem>
+            );
+          })}
+        </DropdownMenu>
+      </Dropdown>
+    );
+  }
+
+}
+
+ReposSortMenu.propTypes = propTypes;
+
+export default ReposSortMenu;

frontend/src/components/single-selector.js

@@ -85,7 +85,7 @@ class Selector extends Component {
                 return (
                   <li key={index} className="option-item h-6 py-1 px-3 d-flex justify-content-between align-items-center" onClick={(e) => {this.selectItem(e, item);}}>
                     <span className="option-item-text flex-shrink-0 mr-3">{item.text}</span>
-                    <i className={`sf2-icon-tick text-gray font-weight-bold ${item.isSelected ? '' : 'invisible'}`}></i>
+                    <i className={`sf2-icon-tick ${item.isSelected ? '' : 'invisible'}`}></i>
                   </li>
                 );
               })}

frontend/src/components/toolbar/dir-operation-toolbar.js

@@ -236,7 +236,7 @@ class DirOperationToolbar extends React.Component {
               {this.props.children}
               <i className="sf3-font-drop-down sf3-font ml-1 path-item-dropdown-toggle"></i>
             </DropdownToggle>
-            <DropdownMenu onMouseMove={this.onDropDownMouseMove} style={{'width': '200px'}}>
+            <DropdownMenu onMouseMove={this.onDropDownMouseMove}>
               {opList.map((item, index)=> {
                 if (item == 'Divider') {
                   return <DropdownItem key={index} divider />;
@@ -252,7 +252,7 @@ class DirOperationToolbar extends React.Component {
                     >
                       <DropdownToggle
                         caret
-                        className="dropdown-item font-weight-normal rounded-0 d-flex align-items-center pr-2"
+                        className="dropdown-item font-weight-normal rounded-0 d-flex align-items-center"
                         onMouseEnter={this.toggleSubMenuShown.bind(this, item)}
                       >
                         <i className={`sf3-font-${item.icon} sf3-font mr-2 dropdown-item-icon`}></i>

frontend/src/components/toolbar/single-dropdown-toolbar.js

@@ -46,7 +46,7 @@ class SingleDropdownToolbar extends React.Component {
             data-toggle="dropdown"
           >
           </DropdownToggle>
-          <DropdownMenu style={{'width': '200px'}}>
+          <DropdownMenu>
             {opList.map((item, index)=> {
               if (item == 'Divider') {
                 return <DropdownItem key={index} divider />;

frontend/src/components/toolbar/view-file-toolbar.js

@@ -158,7 +158,7 @@ class ViewFileToolbar extends React.Component {
             {this.props.children}
             <i className="sf3-font-drop-down sf3-font ml-1 path-item-dropdown-toggle"></i>
           </DropdownToggle>
-          <DropdownMenu onMouseMove={this.onDropDownMouseMove} style={{'width': '200px'}}>
+          <DropdownMenu onMouseMove={this.onDropDownMouseMove}>
             {opList.map((item, index)=> {
               if (item == 'Divider') {
                 return <DropdownItem key={index} divider />;
@@ -174,7 +174,7 @@ class ViewFileToolbar extends React.Component {
                   >
                     <DropdownToggle
                       caret
-                      className="dropdown-item font-weight-normal rounded-0 d-flex align-items-center pr-2"
+                      className="dropdown-item font-weight-normal rounded-0 d-flex align-items-center"
                       onMouseEnter={this.toggleSubMenuShown.bind(this, item)}
                     >
                       <i className={`sf3-font-${item.icon} sf3-font mr-2 dropdown-item-icon`}></i>

frontend/src/components/view-modes.js

@@ -58,7 +58,7 @@ class ViewModes extends React.Component {
                     <span>{item.text}</span>
                   </span>
                   <span>
-                    {currentViewMode === item.value && <i className="fas fa-check color-selected"></i>}
+                    {currentViewMode === item.value && <i className="sf2-icon-tick"></i>}
                   </span>
                 </div>
               </DropdownItem>

frontend/src/css/history-record-item.css

@@ -37,10 +37,6 @@
   margin-right: 0.25rem;
 }
 
-.history-body .dropdown-menu {
-  min-width: 8rem;
-}
-
 .history-body .dropdown-menu a {
   text-decoration: none;
   color: #6e7687;

frontend/src/css/lib-content-view.css

@@ -153,10 +153,6 @@
   color:#fff;
 }
 
-.dropdown-menu {
-  min-width: 8rem;
-}
-
 .parent-path {
   position: relative;
 }

frontend/src/css/side-panel.css

@@ -177,10 +177,6 @@
   color:#fff;
 }
 
-.dropdown-menu {
-  min-width: 8rem;
-}
-
 .parent-path {
   position: relative;
 }

frontend/src/css/toolbar.css

@@ -39,20 +39,6 @@
   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 */
 .common-toolbar {
   display: flex;

frontend/src/css/user-notifications.css

@@ -46,7 +46,6 @@
 }
 
 .notification-header-close .dropdown-menu {
-  min-width: 8rem;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 }
 

frontend/src/pages/libraries/index.js

@@ -8,8 +8,8 @@ import toaster from '../../components/toast';
 import Repo from '../../models/repo';
 import Group from '../../models/group';
 import Loading from '../../components/loading';
-import Selector from '../../components/single-selector';
 import ViewModes from '../../components/view-modes';
+import ReposSortMenu from '../../components/repos-sort-menu';
 import TopToolbar from '../../components/toolbar/top-toolbar';
 import SingleDropdownToolbar from '../../components/toolbar/single-dropdown-toolbar';
 import SortOptionsDialog from '../../components/dialog/sort-options';
@@ -237,14 +237,6 @@ class Libraries extends Component {
         isSelected: item.value == `${sortBy}-${sortOrder}`
       };
     });
-
-    const customSelectorToggle = (
-      <span className="cur-view-path-btn px-1" role="button">
-        <i className="sf3-font-sort2 sf3-font"></i>
-        <i className="sf3-font-down sf3-font"></i>
-      </span>
-    );
-
     return (
       <Fragment>
         <TopToolbar
@@ -258,15 +250,10 @@ class Libraries extends Component {
               <h3 className="sf-heading m-0">{gettext('Files')}</h3>
               {isDesktop &&
               <div className="d-flex align-items-center">
-                <div className="view-modes mr-2">
+                <div className="mr-2">
                   <ViewModes currentViewMode={currentViewMode} switchViewMode={this.switchViewMode} />
                 </div>
-                <Selector
+                <ReposSortMenu sortOptions={sortOptions} onSelectSortOption={this.onSelectSortOption}/>
-                  customSelectorToggle={customSelectorToggle}
-                  options={sortOptions}
-                  selectOption={this.onSelectSortOption}
-                  menuCustomClass='repos-sort-menu dropdown-menu-right'
-                />
               </div>
               }
             </div>

frontend/src/pages/sdoc/sdoc-file-history/index.css

@@ -269,10 +269,6 @@
   min-height: 22.5px;
 }
 
-.sdoc-file-history-versions .dropdown-menu {
-  min-width: 8rem;
-}
-
 .history-content .main-panel {
   flex: 1 1 auto;
 }

frontend/src/pages/wiki2/css/view-structure.css

@@ -249,7 +249,7 @@
 }
 
 .view-operation-dropdown-menu .sf3-font {
-  font-size: 10px;
+  font-size: 14px;
   margin-right: 10px;
 }
 
@@ -306,7 +306,6 @@
 }
 
 .view-structure .folders-dropdown .dropdown-menu {
-  max-width: 180px;
   max-height: 300px;
   overflow-y: auto;
 }

media/css/seahub_react.css

@@ -129,24 +129,29 @@ a, a:hover { color: #ec8000; }
 .no-deco:focus {
   text-decoration:none;
 }
+
 .ellipsis {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
 .op-target {
   color: #ec8000;
   word-wrap: break-word;
 }
+
 .left-zero {
   left: 0px !important;
 }
+
 .sf-heading {
   font-size: 1rem;
   color: #212529;
   font-weight: normal;
   line-height: 1.5;
 }
+
 .cur-view-path .sf-heading {
   margin: 0;
 }
@@ -178,6 +183,7 @@ a, a:hover { color: #ec8000; }
 .pl10 {
   padding-left: 10px;
 }
+
 .cursor-pointer {
   cursor: pointer;
 }
@@ -280,21 +286,25 @@ a, a:hover { color: #ec8000; }
   z-index:100;
   margin:0 auto;
 }
+
 .inner-caret {
   border-top-color:#fff;
   position:relative;
   top:-15px;
   left:-14px;
 }
+
 .up-outer-caret,
 .up-outer-caret .inner-caret {
   border-width:0 10px 10px;
 }
+
 .up-outer-caret .inner-caret {
   border-bottom-color:#fff;
   top:1px;
   left:-10px;
 }
+
 .up-outer-caret {
   position:absolute;
   top:-11px;
@@ -311,6 +321,7 @@ a, a:hover { color: #ec8000; }
     transform: rotate(360deg);
   }
 }
+
 @-webkit-keyframes loading {
   0% {
     -webkit-transform: rotate(0deg);
@@ -321,6 +332,7 @@ a, a:hover { color: #ec8000; }
     transform: rotate(360deg);
   }
 }
+
 @keyframes loading {
   0% {
     -moz-transform: rotate(0deg);
@@ -335,6 +347,7 @@ a, a:hover { color: #ec8000; }
     transform: rotate(360deg);
   }
 }
+
 .loading-icon {
   display:inline-block;
   width:26px;
@@ -346,6 +359,7 @@ a, a:hover { color: #ec8000; }
   -webkit-animation:loading 0.9s infinite linear;
   animation:loading 0.9s infinite linear;
 }
+
 .loading-tip {
   display:block;
   margin:1em auto;
@@ -544,6 +558,7 @@ a, a:hover { color: #ec8000; }
 .nav .nav-item {
   padding: 0;
 }
+
 .nav .nav-item .nav-link {
   padding: 0.5rem 0;
   margin-right: 30px;
@@ -578,9 +593,11 @@ a, a:hover { color: #ec8000; }
   color: #fff;
   border: none;
 }
+
 .cur-view-path.tab-nav-container {
   padding: 0 16px;
 }
+
 .cur-view-path.tab-nav-container .nav .nav-item .nav-link {
   justify-content: center; /* make short word like 'All' in the center */
   margin: 0 0.75rem;
@@ -815,6 +832,7 @@ a, a:hover { color: #ec8000; }
 .sf-popover-container {
   position:relative;
 }
+
 .sf-popover {
   width:240px;
   background:#fff;
@@ -824,29 +842,35 @@ a, a:hover { color: #ec8000; }
   position:absolute;
   z-index: 20;
 }
+
 .sf-popover-hd {
   padding:5px 0 3px;
   margin: 10px;
 }
+
 .sf-popover-title {
   text-align:center;
 }
+
 .sf-popover-close {
   font-size:16px;
   color:#b9b9b9;
   margin:4px 0 0;
   float:right;
 }
+
 .sf-popover-con {
   padding:0 10px;
   overflow:auto;
 }
+
 .sf-popover-list {
   border-top: 1px solid #e3e3e5;
   list-style: none;
   margin-top: 5px;
   padding-top: 5px;
 }
+
 a.sf-popover-item {
   display:block;
   color:#444;
@@ -856,6 +880,7 @@ a.sf-popover-item {
   padding: 5px 10px;
   margin: 0px -10px;
 }
+
 a.sf-popover-item:hover {
   background-color: #f8f8f8;
 }
@@ -864,9 +889,11 @@ a.sf-popover-item:hover {
 .side-panel-top {
   padding: .5rem 1rem;
 }
+
 .side-panel-close {
   margin:10px 0 0 auto;
 }
+
 .panel-top {
   padding:.5rem 1rem;
   background:#f4f4f7;
@@ -888,15 +915,18 @@ a.sf-popover-item:hover {
   font-size: 1rem;
   word-break: break-all;
 }
+
 .path-split {
   display: inline-block;
   padding: 0 5px;
   color: #818a91;
 }
+
 .path-link {
   color: #eb8205 !important;
   text-decoration: none;
 }
+
 .path-link:hover {
   cursor: pointer;
   text-decoration: underline !important;
@@ -1003,12 +1033,14 @@ table td {
 a.table-sort-op {
   color: inherit;
 }
+
 @media (max-width:767px) {
   a.table-sort-op {
   display: inline-block;
   margin-left: 15px;
   }
 }
+
 a.table-sort-op:hover {
   outline: none;
   text-decoration: none;
@@ -1020,15 +1052,21 @@ a.table-sort-op:hover {
 }
 
 .dropdown-menu {
-  min-width: 8rem;
+  min-width: 200px;
 }
 
 .dropdown-item {
+  height: 32px;
+  padding: 0.25rem 1rem;
   cursor: pointer;
   color: #212529;
   font-size: 14px;
 }
 
+.dropdown-item .sf3-font {
+  color: #8c8c8c;
+}
+
 .btn-secondary.dropdown-toggle.dropdown-item {
   line-height: 1.5;
 }
@@ -1038,16 +1076,8 @@ a.table-sort-op:hover {
   background-color: #20a0ff;
 }
 
-.dropdown-item-icon,
+.show>.btn-secondary.dropdown-toggle.dropdown-item .dropdown-item-icon,
-.btn .dropdown-item-icon {
+.dropdown-item:hover .sf3-font,
-  color: #444;
-  font-size: 1rem;
-}
-
-.show>.btn-secondary.dropdown-toggle.dropdown-item .dropdown-item-icon {
-  color: #fff;
-}
-
 .dropdown-item:hover .dropdown-item-icon,
 .dropdown-item:hover .btn .dropdown-item-icon,
 .dropdown-item:focus .dropdown-item-icon,
@@ -1064,15 +1094,18 @@ a.table-sort-op:hover {
   background-color: #fafafa;
   text-align: center;
 }
+
 @media (min-width: 768px) {
   .empty-tip {
   padding: 30px 80px;
   }
 }
+
 .no-items-img-tip {
   display: inline-block;
   margin-bottom: 20px; 
 }
+
 .empty-tip h2 {
   font-size: 1.125rem;
   text-align: center;
@@ -1277,12 +1310,14 @@ a.table-sort-op:hover {
 .seafile-md-viewer-content .article {
   padding: 0;
 }
+
 .seafile-md-viewer-content {
   background: #fff;
   padding: 70px 75px;
   border:1px solid #e6e6dd;
   min-height: calc(100% - 60px);
 }
+
 .seafile-md-viewer-outline-heading2,
 .seafile-md-viewer-outline-heading3 {
   margin-left: .75rem;
@@ -1293,13 +1328,16 @@ a.table-sort-op:hover {
   text-overflow:ellipsis;
   cursor:pointer;
 }
+
 .seafile-md-viewer-outline-heading3 {
   margin-left: 2rem;
 }
+
 .seafile-md-viewer-outline-heading2:hover,
 .seafile-md-viewer-outline-heading3:hover {
   color: #eb8205;
 }
+
 .seafile-markdown-outline {
   position: fixed;
   padding-right: 1rem;
@@ -1309,13 +1347,16 @@ a.table-sort-op:hover {
   overflow: auto;
   height: 80%;
 }
+
 .seafile-editor-outline {
   border-left: 1px solid #ddd;
 }
+
 .seafile-markdown-outline .active {
   color: #eb8205;
   border-left: 1px solid #eb8205;
 }
+
 .seafile-markdown-outline .outline-h2, 
 .seafile-markdown-outline .outline-h3 {
   height: 30px;
@@ -1325,9 +1366,11 @@ a.table-sort-op:hover {
   text-overflow: ellipsis;
   font-size: 14px;
 }
+
 .seafile-markdown-outline .outline-h2 {
   padding-left: 20px;
 }
+
 .seafile-markdown-outline .outline-h3 {
   padding-left: 40px;
 }
@@ -1360,8 +1403,5 @@ a.table-sort-op:hover {
 }
 
 .word-break-all {
-    /* overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap; */
   word-break: break-all;
 }