Skip to content
This repository has been archived by the owner on Mar 25, 2023. It is now read-only.

Commit

Permalink
feat(side-bar): reorder sidebar links (closes #36)
Browse files Browse the repository at this point in the history 
* Extract side bar from app component
* Implement reordering using drag n drop

Fixes #36
  • Loading branch information
@andrewbents
andrewbents authored Sep 4, 2017
1 parent 7efce4d commit c516c3e
Show file tree
Hide file tree
Showing 13 changed files with 658 additions and 316 deletions.
4 changes: 4 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -306,6 +306,10 @@ In this sections you can specify limits for custom offerings in the following fo

Any of these parameters may be left unspecified, in which case 0 will be used for min and infinity will be used for max.

### allowReorderingSidebar

A boolean value which allows or forbids a user to reorder links in the main sidebar

### Extensions
Please check [Wiki](https://github.com/bwsw/cloudstack-ui/wiki/Plugins) for extension configuration options.

Expand Down
122 changes: 1 addition & 121 deletions src/app/app.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,129 +6,9 @@
<mdl-layout-drawer
*ngIf="loggedIn"
class="mdl-color--grey-50 flex-container"
[attr.style]="drawerStyles"
[class.drawer-open]="isDrawerOpen"
>
<md-icon
(click)="toggleDrawer()"
class="hide-button"
>
keyboard_arrow_left
</md-icon>
<mdl-layout-title>
<img class="logo" [src]="logoSource">
<div class="title-header">
<md-icon class="link-element">person</md-icon>
<div class="link-element">{{ 'NAVIGATION_SIDEBAR.WELCOME' | translate:{ name: title } }}</div>
</div>
</mdl-layout-title>
<nav #navigationBar class="mdl-navigation">
<a
(click)="linkClick('/instances')"
class="mdl-navigation__link link-container"
routerLink="/instances"
[class.link-hover-light]="isLightTheme"
[class.link-hover-dark]="!isLightTheme"
[routerLinkActive]="linkActiveStyle"
>
<md-icon class="link-element">cloud</md-icon>
<div class="link-element" [innerHTML]="'NAVIGATION_SIDEBAR.VMS' | translate"></div>
</a>

<a
(click)="linkClick('/storage')"
class="mdl-navigation__link link-container"
routerLink="/storage"
[class.link-hover-light]="isLightTheme"
[class.link-hover-dark]="!isLightTheme"
[routerLinkActive]="linkActiveStyle"
>
<md-icon class="link-element">dns</md-icon>
<div class="link-element" [innerHTML]="'NAVIGATION_SIDEBAR.SPARE_DRIVES' | translate"></div>
</a>

<a
(click)="linkClick('/templates')"
class="mdl-navigation__link link-container"
routerLink="/templates"
[class.link-hover-light]="isLightTheme"
[class.link-hover-dark]="!isLightTheme"
[routerLinkActive]="linkActiveStyle"
>
<span class="link-element disc-icon" style="margin-right: 10px"></span>
<div class="link-element" [innerHTML]="'NAVIGATION_SIDEBAR.IMAGES' | translate"></div>
</a>

<a
(click)="linkClick('/sg-templates')"
*ngIf="!disableSecurityGroups"
class="mdl-navigation__link link-container"
routerLink="/sg-templates"
[class.link-hover-light]="isLightTheme"
[class.link-hover-dark]="!isLightTheme"
[routerLinkActive]="linkActiveStyle"
>
<md-icon class="link-element">security</md-icon>
<div class="link-element" [innerHTML]="'NAVIGATION_SIDEBAR.FIREWALL_TEMPLATES' | translate"></div>
</a>

<a
(click)="linkClick('/events')"
class="mdl-navigation__link link-container"
routerLink="/events"
[class.link-hover-light]="isLightTheme"
[class.link-hover-dark]="!isLightTheme"
[routerLinkActive]="linkActiveStyle"
>
<md-icon>event_note</md-icon>
<div class="link-element" [innerHTML]="'NAVIGATION_SIDEBAR.ACTIVITY_LOG' | translate"></div>
</a>

<a
(click)="linkClick('/ssh-keys')"
class="mdl-navigation__link link-container"
routerLink="/ssh-keys"
[class.link-hover-light]="isLightTheme"
[class.link-hover-dark]="!isLightTheme"
[routerLinkActive]="linkActiveStyle"
>
<md-icon>vpn_key</md-icon>
<div class="link-element" [innerHTML]="'NAVIGATION_SIDEBAR.SSH_KEYS' | translate"></div>
</a>

<a
(click)="linkClick('/settings')"
class="mdl-navigation__link link-container"
routerLink="/settings"
[class.link-hover-light]="isLightTheme"
[class.link-hover-dark]="!isLightTheme"
[routerLinkActive]="linkActiveStyle"
>
<md-icon>settings</md-icon>
<div class="link-element" [innerHTML]="'NAVIGATION_SIDEBAR.SETTINGS' | translate"></div>
</a>

<a
class="mdl-navigation__link link-container"
routerLink="/logout"
[class.link-hover-light]="isLightTheme"
[class.link-hover-dark]="!isLightTheme"
[routerLinkActive]="linkActiveStyle"
>
<md-icon>exit_to_app</md-icon>
<div class="link-element" [innerHTML]="'NAVIGATION_SIDEBAR.LOGOUT' | translate"></div>
</a>
</nav>

<div class="license-container">
<div class="license">
{{ 'NAVIGATION_SIDEBAR.LICENSE.LICENSE_1' | translate: { year: currentYear } }}
<a href="https://bitworks.software/" target="_blank">{{ 'NAVIGATION_SIDEBAR.LICENSE.LICENSE_2' | translate }}</a>
<br>
{{ 'NAVIGATION_SIDEBAR.LICENSE.LICENSE_3' | translate }}
</div>
</div>

<cs-app-sidebar [title]="title"></cs-app-sidebar>
</mdl-layout-drawer>
<mdl-layout-content
class="mdl-color--grey-100"
Expand Down
92 changes: 1 addition & 91 deletions src/app/app.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,105 +30,15 @@ footer {
padding-left: 16px;
}

.mdl-navigation__link md-icon {
margin-right: 10px;
}

.link-container {
padding-left: 30px !important;
padding-right: 30px !important;
}

.link-container::before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}

.link-element {
display: inline-block;
vertical-align: middle;
}

.link-active-light {
background-color: #757575;
}

.link-hover-light:hover {
background-color: #757575 !important;
}

.link-active-dark {
background-color: #E0E0E0;
}

.link-hover-dark:hover {
background-color: #E0E0E0 !important;
}

a {
color: inherit !important;
}

:host /deep/ .link-element {
border-color: inherit;
}

mdl-layout-drawer {
border: none;
}

.license {
width: 100%;
font-size: 12px;
padding: 5px;
line-height: 1;
text-align: center;
flex: 1;
align-self: flex-end;
}

.license-container {
display: flex;
flex: 1;
flex-direction: row;
min-height: 40px;
}

.flex-container {
display: flex;
flex-direction: column;
min-height: 100vh;
}

.logo {
padding: 20px;
max-width: 100%;
}

mdl-layout-title {
padding-left: 0 !important;
text-align: center;
}

.title-header {
line-height: 1;
padding-bottom: 20px;
text-align: center;
font-size: 14px;
word-break: break-all;
}

.hide-button {
display: inline-block;
height: 20px;
margin: 20px 0 0 20px;
width: 20px;
font-size: 24px;
cursor: pointer;
}

.drawer-open {
transform: translateX(0) !important;
}
Expand All @@ -144,7 +54,7 @@ mdl-layout-title {

&.mat-icon-button {
position: absolute !important;
right: 0px !important;
right: 0 !important;
}
}

Expand Down
Loading

0 comments on commit c516c3e

Please sign in to comment.