diff --git a/frontend/src/components/cur-dir-path/dir-path.js b/frontend/src/components/cur-dir-path/dir-path.js index 36ce2b9178..9db4254590 100644 --- 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 (
- + + + {this.props.pathPrefix && this.props.pathPrefix.map((item, index) => { return ( diff --git a/frontend/src/components/cur-dir-path/dir-tool.js b/frontend/src/components/cur-dir-path/dir-tool.js index 95ba12bb96..98ceab7d14 100644 --- 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 (
-
- - -
+ + + + + + } + data-toggle="dropdown" + title={gettext('Change view mode')} + aria-label={gettext('Change view mode')} + aria-expanded={isSwitchModeDropdownMenuOpen} + > + + + +
+ + + {gettext('List view')} + + + {this.props.currentMode === 'list' && } + +
+ + +
+ + + {gettext('Grid view')} + + + {this.props.currentMode === 'grid' && } + +
+ + + {menuItems.length > 0 && diff --git a/frontend/src/css/layout.css b/frontend/src/css/layout.css index db80f2c21f..2a90e73073 100644 --- 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; diff --git a/frontend/src/css/lib-content-view.css b/frontend/src/css/lib-content-view.css index e7bc8965bf..dedb1c65fb 100644 --- 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; } diff --git a/frontend/src/css/toolbar.css b/frontend/src/css/toolbar.css index 1137760b77..304d7bcf05 100644 --- 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 */ diff --git a/frontend/src/pages/wiki2/index.js b/frontend/src/pages/wiki2/index.js index 4568ac8429..05d5cd0854 100644 --- a/frontend/src/pages/wiki2/index.js +++ b/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 (
{ - 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'); diff --git a/frontend/src/pages/wiki2/utils/index.js b/frontend/src/pages/wiki2/utils/index.js index 1d7c975369..978e72b4d6 100644 --- 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 }; diff --git a/media/css/sf_font3/iconfont.css b/media/css/sf_font3/iconfont.css index 03043c8000..1d3bbbda58 100644 --- 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"; } diff --git a/media/css/sf_font3/iconfont.eot b/media/css/sf_font3/iconfont.eot index cc08c124d2..85eb6293f9 100644 Binary files a/media/css/sf_font3/iconfont.eot and b/media/css/sf_font3/iconfont.eot differ diff --git a/media/css/sf_font3/iconfont.js b/media/css/sf_font3/iconfont.js index f355507d33..9376c047ad 100644 --- a/media/css/sf_font3/iconfont.js +++ b/media/css/sf_font3/iconfont.js @@ -1 +1 @@ -window._iconfont_svg_string_1230969='',function(h){var c=(c=document.getElementsByTagName("script"))[c.length-1],l=c.getAttribute("data-injectcss"),c=c.getAttribute("data-disable-injectsvg");if(!c){var s,o,t,v,i,m=function(c,l){l.parentNode.insertBefore(c,l)};if(l&&!h.__iconfont__svg__cssinject__){h.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(c){console&&console.log(c)}}s=function(){var c,l=document.createElement("div");l.innerHTML=h._iconfont_svg_string_1230969,(l=l.getElementsByTagName("svg")[0])&&(l.setAttribute("aria-hidden","true"),l.style.position="absolute",l.style.width=0,l.style.height=0,l.style.overflow="hidden",l=l,(c=document.body).firstChild?m(l,c.firstChild):c.appendChild(l))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(s,0):(o=function(){document.removeEventListener("DOMContentLoaded",o,!1),s()},document.addEventListener("DOMContentLoaded",o,!1)):document.attachEvent&&(t=s,v=h.document,i=!1,f(),v.onreadystatechange=function(){"complete"==v.readyState&&(v.onreadystatechange=null,z())})}function z(){i||(i=!0,t())}function f(){try{v.documentElement.doScroll("left")}catch(c){return void setTimeout(f,50)}z()}}(window); \ No newline at end of file +window._iconfont_svg_string_1230969='',function(h){var c=(c=document.getElementsByTagName("script"))[c.length-1],l=c.getAttribute("data-injectcss"),c=c.getAttribute("data-disable-injectsvg");if(!c){var s,o,t,v,i,m=function(c,l){l.parentNode.insertBefore(c,l)};if(l&&!h.__iconfont__svg__cssinject__){h.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(c){console&&console.log(c)}}s=function(){var c,l=document.createElement("div");l.innerHTML=h._iconfont_svg_string_1230969,(l=l.getElementsByTagName("svg")[0])&&(l.setAttribute("aria-hidden","true"),l.style.position="absolute",l.style.width=0,l.style.height=0,l.style.overflow="hidden",l=l,(c=document.body).firstChild?m(l,c.firstChild):c.appendChild(l))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(s,0):(o=function(){document.removeEventListener("DOMContentLoaded",o,!1),s()},document.addEventListener("DOMContentLoaded",o,!1)):document.attachEvent&&(t=s,v=h.document,i=!1,f(),v.onreadystatechange=function(){"complete"==v.readyState&&(v.onreadystatechange=null,z())})}function z(){i||(i=!0,t())}function f(){try{v.documentElement.doScroll("left")}catch(c){return void setTimeout(f,50)}z()}}(window); \ No newline at end of file diff --git a/media/css/sf_font3/iconfont.svg b/media/css/sf_font3/iconfont.svg index d047c168dc..4ef9c7bfc5 100644 --- a/media/css/sf_font3/iconfont.svg +++ b/media/css/sf_font3/iconfont.svg @@ -14,6 +14,14 @@ /> + + + + + + + + @@ -44,7 +52,7 @@ - + diff --git a/media/css/sf_font3/iconfont.ttf b/media/css/sf_font3/iconfont.ttf index ba46c15d02..812341a495 100644 Binary files a/media/css/sf_font3/iconfont.ttf and b/media/css/sf_font3/iconfont.ttf differ diff --git a/media/css/sf_font3/iconfont.woff b/media/css/sf_font3/iconfont.woff index cf8c7a4429..1e48b96037 100644 Binary files a/media/css/sf_font3/iconfont.woff and b/media/css/sf_font3/iconfont.woff differ diff --git a/media/css/sf_font3/iconfont.woff2 b/media/css/sf_font3/iconfont.woff2 index 50af2462be..6a11774715 100644 Binary files a/media/css/sf_font3/iconfont.woff2 and b/media/css/sf_font3/iconfont.woff2 differ