diff --git a/packages/strapi-admin/admin/src/components/GlobalStyle/index.js b/packages/strapi-admin/admin/src/components/GlobalStyle/index.js index ac51a6a08b..f8599cb41f 100644 --- a/packages/strapi-admin/admin/src/components/GlobalStyle/index.js +++ b/packages/strapi-admin/admin/src/components/GlobalStyle/index.js @@ -137,6 +137,39 @@ const GlobalStyle = createGlobalStyle` } + // scrollbar + ::-webkit-scrollbar { + width: 9px; + } + + ::-webkit-scrollbar-track { + background-color: #eee; + } + + ::-webkit-scrollbar-track:hover { + background-color: #ddd; + } + + ::-webkit-scrollbar-thumb { + background-color: #ccc; + border-radius: 0.5rem; + } + + ::-webkit-scrollbar-thumb:hover { + background-color: #bbb; + } + + ::-webkit-scrollbar-button { + display: none; + } + + // firefox scrollbar + * { + scrollbar-color: #bbb #eee; + scrollbar-width: thin; + } + + `; export default GlobalStyle; diff --git a/packages/strapi-admin/admin/src/components/LeftMenuLinkContainer/MenuSection.js b/packages/strapi-admin/admin/src/components/LeftMenuLinkContainer/MenuSection.js new file mode 100644 index 0000000000..b21cd2393a --- /dev/null +++ b/packages/strapi-admin/admin/src/components/LeftMenuLinkContainer/MenuSection.js @@ -0,0 +1,17 @@ +import styled from 'styled-components'; + +const LeftMenuSection = styled.div` + box-sizing: border-box; + display: flex; + flex-direction: column; + flex: 1; + + &:first-child { + overflow: hidden; + min-height: 175px; + height: auto; + flex: 0 1 auto; + } +`; + +export default LeftMenuSection; diff --git a/packages/strapi-admin/admin/src/components/LeftMenuLinkContainer/Wrapper.js b/packages/strapi-admin/admin/src/components/LeftMenuLinkContainer/Wrapper.js index c3963e43d5..296f8d2685 100644 --- a/packages/strapi-admin/admin/src/components/LeftMenuLinkContainer/Wrapper.js +++ b/packages/strapi-admin/admin/src/components/LeftMenuLinkContainer/Wrapper.js @@ -11,6 +11,8 @@ const Wrapper = styled.div` overflow-y: auto; height: calc(100vh - (${props => props.theme.main.sizes.leftMenu.height} + 10.2rem)); box-sizing: border-box; + display: flex; + flex-direction: column; .title { padding-left: 2rem; diff --git a/packages/strapi-admin/admin/src/components/LeftMenuLinkContainer/index.js b/packages/strapi-admin/admin/src/components/LeftMenuLinkContainer/index.js index 8812215a17..cd8c131260 100644 --- a/packages/strapi-admin/admin/src/components/LeftMenuLinkContainer/index.js +++ b/packages/strapi-admin/admin/src/components/LeftMenuLinkContainer/index.js @@ -5,6 +5,7 @@ import { get, snakeCase, isEmpty } from 'lodash'; import { SETTINGS_BASE_URL } from '../../config'; import Wrapper from './Wrapper'; +import MenuSection from './MenuSection'; import messages from './messages.json'; import LeftMenuLinkSection from '../LeftMenuLinkSection'; @@ -19,6 +20,7 @@ const LeftMenuLinkContainer = ({ plugins }) => { acc[snakeCase(section.name)] = { name: section.name, searchable: true, + shrink: true, links: get(acc[snakeCase(section.name)], 'links', []).concat( section.links .filter(link => link.isDisplayed !== false) @@ -50,49 +52,58 @@ const LeftMenuLinkContainer = ({ plugins }) => { }; }); - const menu = { - ...contentTypesSections, - plugins: { - searchable: false, - name: 'plugins', - emptyLinksListMessage: messages.noPluginsInstalled.id, - links: pluginsLinks, + const menus = [ + contentTypesSections, + { + plugins: { + searchable: false, + name: 'plugins', + emptyLinksListMessage: messages.noPluginsInstalled.id, + links: pluginsLinks, + }, + general: { + searchable: false, + name: 'general', + links: [ + { + icon: 'list', + label: messages.listPlugins.id, + destination: '/list-plugins', + }, + { + icon: 'shopping-basket', + label: messages.installNewPlugin.id, + destination: '/marketplace', + }, + { + icon: 'cog', + label: messages.settings.id, + destination: SETTINGS_BASE_URL || '/settings', + }, + ], + }, }, - general: { - searchable: false, - name: 'general', - links: [ - { - icon: 'list', - label: messages.listPlugins.id, - destination: '/list-plugins', - }, - { - icon: 'shopping-basket', - label: messages.installNewPlugin.id, - destination: '/marketplace', - }, - { - icon: 'cog', - label: messages.settings.id, - destination: SETTINGS_BASE_URL || '/settings', - }, - ], - }, - }; + ]; return ( - {Object.keys(menu).map(current => ( - - ))} + {menus.map( + section => ( + + {Object.entries(section).map(([key, value]) => ( + + ))} + + ) + )} ); }; diff --git a/packages/strapi-admin/admin/src/components/LeftMenuLinkSection/LeftMenuListLink.js b/packages/strapi-admin/admin/src/components/LeftMenuLinkSection/LeftMenuListLink.js index 0ed7d0c9fe..028c189520 100644 --- a/packages/strapi-admin/admin/src/components/LeftMenuLinkSection/LeftMenuListLink.js +++ b/packages/strapi-admin/admin/src/components/LeftMenuLinkSection/LeftMenuListLink.js @@ -1,9 +1,18 @@ import styled from 'styled-components'; const LeftMenuListLink = styled.div` - max-height: 180px; + box-sizing: border-box; + min-height: 3.7rem; + flex-shrink: 0; margin-bottom: 0.1rem; overflow: auto; + border-bottom: 1px solid rgba(255, 255, 255, 0.05); + + ${props => + props.shrink && + ` + flex-shrink: 1; + `} `; export default LeftMenuListLink; diff --git a/packages/strapi-admin/admin/src/components/LeftMenuLinkSection/index.js b/packages/strapi-admin/admin/src/components/LeftMenuLinkSection/index.js index d33cc27ec6..82f8233e84 100644 --- a/packages/strapi-admin/admin/src/components/LeftMenuLinkSection/index.js +++ b/packages/strapi-admin/admin/src/components/LeftMenuLinkSection/index.js @@ -10,7 +10,14 @@ import LeftMenuListLink from './LeftMenuListLink'; import EmptyLinksList from './EmptyLinksList'; import EmptyLinksListWrapper from './EmptyLinksListWrapper'; -const LeftMenuLinksSection = ({ section, searchable, location, links, emptyLinksListMessage }) => { +const LeftMenuLinksSection = ({ + section, + searchable, + location, + links, + emptyLinksListMessage, + shrink, +}) => { const [search, setSearch] = useState(''); const filteredList = sortBy( @@ -39,7 +46,7 @@ const LeftMenuLinksSection = ({ section, searchable, location, links, emptyLinks setSearch={setSearch} search={search} /> - + {filteredList.length > 0 ? ( filteredList.map((link, index) => ( props.theme.main.sizes.leftMenu.width}; background: ${props => props.theme.main.colors.strapi['blue-darker']}; + + // scrollbar overrides + * { + ::-webkit-scrollbar { + width: 7px; + } + + ::-webkit-scrollbar-track, + ::-webkit-scrollbar-track:hover { + background-color: rgba(255, 255, 255, 0.1); + } + + ::-webkit-scrollbar-thumb { + background-color: rgba(255, 255, 255, 0.3); + } + + ::-webkit-scrollbar-thumb:hover { + background-color: rgba(255, 255, 255, 0.5); + } + + // firefox + scrollbar-color: rgba(255, 255, 255, 0.5) rgba(255, 255, 255, 0.1); + } `; Wrapper.defaultProps = { diff --git a/packages/strapi-plugin-content-manager/admin/src/components/SelectMany/components.js b/packages/strapi-plugin-content-manager/admin/src/components/SelectMany/components.js index 1cc182d63d..6927e6ce26 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/SelectMany/components.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/SelectMany/components.js @@ -1,7 +1,6 @@ import styled from 'styled-components'; const ListWrapper = styled.div` - overflow: hidden; max-height: 116px; > ul {