diff options
author | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2019-12-26 22:43:36 +0300 |
---|---|---|
committer | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-01-29 01:18:05 +0300 |
commit | 71ac230a533fdd4819a8d36b82570285a0973b97 (patch) | |
tree | 8283f8d380b512972b2957cdff9611040e2f2f15 /src/components/AppNavigation/AppNavigation.vue | |
parent | 676f2fcaac7b81bc3a77c2ecc047d508927814d5 (diff) | |
download | webui-vue-71ac230a533fdd4819a8d36b82570285a0973b97.tar.xz |
Style primary navigation
Adding styles and interaction patterns based on community
approved design proposals.
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Ie7f422db6fbbca2033e10d2d2ae331540a8a038a
Diffstat (limited to 'src/components/AppNavigation/AppNavigation.vue')
-rw-r--r-- | src/components/AppNavigation/AppNavigation.vue | 139 |
1 files changed, 107 insertions, 32 deletions
diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue index 6871b88d..c246b537 100644 --- a/src/components/AppNavigation/AppNavigation.vue +++ b/src/components/AppNavigation/AppNavigation.vue @@ -1,13 +1,13 @@ <template> <b-nav vertical> - <b-nav-item to="/"><Analytics16 /> Overview</b-nav-item> + <b-nav-item to="/"><icon-overview />Overview</b-nav-item> <li class="nav-item"> <b-button v-b-toggle.health-menu variant="link"> - <DataCheck16 /> Health + <icon-health />Health + <icon-expand class="icon-expand" /> </b-button> - - <b-collapse tag="ul" id="health-menu"> + <b-collapse tag="ul" id="health-menu" class="nav-item__nav"> <b-nav-item href="javascript:void(0)">Event Log</b-nav-item> <b-nav-item href="javascript:void(0)">Hardware Status</b-nav-item> <b-nav-item href="javascript:void(0)">Sensors</b-nav-item> @@ -16,23 +16,24 @@ <li class="nav-item"> <b-button v-b-toggle.control-menu variant="link"> - <SettingsAdjust16 /> - Control + <icon-control />Control + <icon-expand class="icon-expand" /> </b-button> - <b-collapse tag="ul" id="control-menu"> - <b-nav-item href="javascript:void(0)" - >Server power operations</b-nav-item - > + <b-collapse tag="ul" id="control-menu" class="nav-item__nav"> + <b-nav-item href="javascript:void(0)"> + Server power operations + </b-nav-item> <b-nav-item href="javascript:void(0)">Manage power usage</b-nav-item> <b-nav-item href="javascript:void(0)">Server LED</b-nav-item> </b-collapse> </li> + <li class="nav-item"> <b-button v-b-toggle.configuration-menu variant="link"> - <Settings16 /> - Health + <icon-configuration />Configuration + <icon-expand class="icon-expand" /> </b-button> - <b-collapse tag="ul" id="configuration-menu"> + <b-collapse tag="ul" id="configuration-menu" class="nav-item__nav"> <b-nav-item href="javascript:void(0)">Network settings</b-nav-item> <b-nav-item href="javascript:void(0)">SNMP settings</b-nav-item> <b-nav-item href="javascript:void(0)">Firmware</b-nav-item> @@ -41,14 +42,14 @@ <li class="nav-item"> <b-button v-b-toggle.access-control-menu variant="link"> - <Password16 /> - Access Control + <icon-access-control />Access Control + <icon-expand class="icon-expand" /> </b-button> - <b-collapse tag="ul" id="access-control-menu"> + <b-collapse tag="ul" id="access-control-menu" class="nav-item__nav"> <b-nav-item href="javascript:void(0)">LDAP</b-nav-item> - <b-nav-item to="/access-control/local-user-management" - >Local user management</b-nav-item - > + <b-nav-item to="/access-control/local-user-management"> + Local user management + </b-nav-item> <b-nav-item href="javascript:void(0)">SSL Certificates</b-nav-item> </b-collapse> </li> @@ -56,28 +57,102 @@ </template> <script> -import Analytics16 from '@carbon/icons-vue/es/analytics/16'; -import DataCheck16 from '@carbon/icons-vue/es/data--check/16'; -import SettingsAdjust16 from '@carbon/icons-vue/es/settings--adjust/16'; -import Settings16 from '@carbon/icons-vue/es/settings/16'; -import Password16 from '@carbon/icons-vue/es/password/16'; +import IconAnalytics from '@carbon/icons-vue/es/analytics/16'; +import IconDataCheck from '@carbon/icons-vue/es/data--check/16'; +import IconSettingsAdjust from '@carbon/icons-vue/es/settings--adjust/16'; +import IconSettings from '@carbon/icons-vue/es/settings/16'; +import IconPassword from '@carbon/icons-vue/es/password/16'; +import IconChevronUp from '@carbon/icons-vue/es/chevron--up/16'; export default { name: 'AppNavigation', components: { - Analytics16, - DataCheck16, - SettingsAdjust16, - Settings16, - Password16 + iconOverview: IconAnalytics, + iconHealth: IconDataCheck, + iconControl: IconSettingsAdjust, + iconConfiguration: IconSettings, + iconAccessControl: IconPassword, + iconExpand: IconChevronUp } }; </script> -<style scoped> -ul li ul { +<style scoped lang="scss"> +svg { + fill: $gray-900; + margin-left: 0 !important; //!important overriding button specificity + vertical-align: text-bottom; + &:not(.icon-expand) { + margin-right: $spacer; + } +} + +.nav { + min-height: 100%; + padding-top: $spacer; +} + +.nav-item__nav { list-style: none; padding-left: 0; - margin-left: 1rem; + margin-left: 0; + + .nav-link { + padding-left: $spacer * 4; + + &:not(.nav-link--current) { + font-weight: normal; + } + } +} + +.btn-link { + width: 100%; + text-align: left; + text-decoration: none !important; + border-radius: 0; + + &.collapsed { + .icon-expand { + transform: rotate(180deg); + } + } + + &:focus { + box-shadow: $btn-focus-box-shadow; + } +} + +.icon-expand { + float: right; + margin-top: $spacer / 4; +} + +.btn-link, +.nav-link { + position: relative; + font-weight: $headings-font-weight; + padding-left: $spacer; // defining consistent padding for links and buttons + padding-right: $spacer; + color: $gray-900 !important; //using important to avoid styling states + + &:hover { + background-color: $gray-300; + } +} + +.nav-link--current { + font-weight: $headings-font-weight; + background-color: $gray-300; + + &::before { + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 4px; + background-color: $primary; + } } </style> |