Skip to content

L
luna
Unverified Commit 64d29255 authored by liuzheng712's avatar liuzheng712
Browse files
Options

feat: update

parent ad077e23
Hide whitespace changes
Inline Side-by-side
Showing with 154 additions and 59 deletions
src/app/elements/leftbar/leftbar.component.html
View file @ 64d29255
<div id="wrapper"> <mat-sidenav-container>
<nav class="navbar-default navbar-static-side" role="navigation"> <mat-sidenav #sidenav mode="side" opened="true" class="example-sidenav"
<div class="sidebar-collapse"> [fixedInViewport]="options.value.fixed" [fixedTopGap]="options.value.top"
<ul class="nav"> [fixedBottomGap]="options.value.bottom">
<li class="nav-header"> <nav>
<div class="dropdown profile-element"> <div class="header">
<div href="http://www.jumpserver.org" target="_blank"> <a href="http://www.jumpserver.org" target="_blank">
<img alt="image" height="55" src="/static/imgs/logo-text.png" style="margin-left: 10px"> <img alt="image" height="55" src="/static/imgs/logo-text.png" style="margin-left: 10px">
</div> </a>
</div> <div class="clearfix"></div>
<div class="clearfix"></div> <div class="logo-element">
<div class="logo-element"> <img alt="image" height="40" src="/static/imgs/logo.png">
<img alt="image" height="40" src="/static/imgs/logo.png"> </div>
</div> </div>
</li> <div class="body">
<li *ngFor="let bar of leftbar"> <ul class="nav metismenu nav-frist-level">
<a href="#"> <li *ngFor="let bar of leftbar;let i = index" [ngClass]="{'active':i==active}">
<i class="{{bar.class}}"></i> <a (click)="gotoLink(bar.link,i,-1)">
<span class="nav-label">{{bar.name|trans}}</span> <i class="{{bar.class}}"></i>
<span class="{{bar.label}}"></span> <span class="nav-label">{{bar.name|trans}}</span>
</a> <span class="{{bar.label}}"></span>
<ul class="nav nav-second-level collapse"> </a>
<li *ngFor="let child of bar.child"><a>{{child.name|trans}}</a></li> <ul class="nav nav-second-level collapse">
</ul> <li *ngFor="let child of bar.child;let ii = index" [ngClass]="{'active':ii==active2}">
</li> <a (click)="gotoLink(child.link,i,ii)">{{child.name|trans}}</a>
</ul> </li>
</div> </ul>
</nav> </li>
</div> </ul>
</div>
</nav>
</mat-sidenav>
<div class="navbar-header">
<button class="navbar-minimalize minimalize-styl-2 btn btn-primary " (click)="sidenav.toggle()"><i
class="fa fa-bars"></i></button>
</div>
</mat-sidenav-container>
src/app/elements/leftbar/leftbar.component.scss
View file @ 64d29255
nav {
height: 100%; li a {
background-color: rgba(0, 0, 0, 0);
box-sizing: border-box;
color: rgb(167, 177, 194);
cursor: pointer;
display: block;
font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #2f4050;
font-size: 13px; font-size: 13px;
font-weight: 600;
height: 46px;
line-height: 18.5714px;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
padding-bottom: 14px;
padding-left: 25px;
padding-right: 20px;
padding-top: 14px;
position: relative;
text-align: left;
text-decoration-color: rgb(167, 177, 194);
text-decoration-line: none;
text-decoration-style: solid;
text-size-adjust: 100%;
width: 220px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} }
.nav-header { li.active > a {
padding: 0; width: 216px;
width: 100%; color: white;
} }
.navbar-default { li.active ul.nav.nav-second-level li {;
background-color: #2f4050; border-bottom-style: none;
border-color: #2f4050; border-bottom-width: 0px;
box-sizing: border-box;
color: rgb(103, 106, 108);
display: block;
font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
height: 32px;
line-height: 18.5714px;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
position: relative;
text-align: left;
text-size-adjust: 100%;
visibility: visible;
width: 216px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
li.active ul.nav.nav-second-level {
box-sizing: border-box;
color: rgb(103, 106, 108);
display: block;
font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 18.5714px;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin-bottom: 0px;
margin-top: 0px;
padding-left: 0px;
text-align: left;
text-size-adjust: 100%;
visibility: visible;
width: 216px;
-webkit-margin-after: 0px;
-webkit-margin-before: 0px;
-webkit-margin-end: 0px;
-webkit-margin-start: 0px;
-webkit-padding-start: 0px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} }
.nav-header, body.mini-navbar .nav-header { mat-sidenav {
padding: 0; background-color: #2f4050;
background: #202c37;
} }
.profile-element div:last-child a { nav {
line-height: 60px; width: 220px;
width: 150px; font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
float: left; font-size: 13px;
font-size: 22px;
color: #1ab394;
} }
.logo-element { div.header {
padding: 10px 0; background-color: #202c37;
} }
.nav.nav-tabs li.active {
background-color: #FFF; div.body {
background-color: #2f4050;
height: 100%;
} }
.nav.nav-tabs li > a {
max-height: 38px; li:hover {
color: white !important;
} }
.nav.nav-tabs li.active a { .nav-second-level li a {
border: none; padding: 7px 10px 7px 52px;
} }
src/app/elements/leftbar/leftbar.component.ts
View file @ 64d29255
import {Component, OnInit} from '@angular/core'; import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormGroup} from '@angular/forms';
@Component({ @Component({
selector: 'app-element-leftbar', selector: 'app-element-leftbar',
...@@ -10,7 +11,8 @@ export class ElementLeftbarComponent implements OnInit { ...@@ -10,7 +11,8 @@ export class ElementLeftbarComponent implements OnInit {
{ {
'name': 'Dashboard', 'name': 'Dashboard',
'class': 'fa fa-dashboard', 'class': 'fa fa-dashboard',
'label': 'label label-info pull-right' 'label': '',
'link': '/'
}, },
{ {
'name': 'Users', 'name': 'Users',
...@@ -77,21 +79,41 @@ export class ElementLeftbarComponent implements OnInit { ...@@ -77,21 +79,41 @@ export class ElementLeftbarComponent implements OnInit {
'label': 'fa arrow', 'label': 'fa arrow',
'child': [ 'child': [
{ {
'name': 'Task' 'name': 'Task',
'link': '/task'
}, },
] ]
}, },
{ {
'name': 'Settings', 'name': 'Settings',
'class': 'fa fa-gears', 'class': 'fa fa-gears',
'label': 'label label-info pull-right' 'label': '',
'link': '/luna/setting'
}, },
]; ];
options: FormGroup;
active: number;
active2: number;
constructor() { constructor(fb: FormBuilder) {
this.options = fb.group({
'fixed': true,
'top': 0,
'bottom': 0,
});
} }
ngOnInit() { ngOnInit() {
this.active = 6;
this.active2 = 0;
} }
gotoLink(link: string, index: number, index2: number) {
if (link) {
window.location.href = link;
}
this.active = index;
this.active2 = index2;
}
} }
src/app/setting-page/setting-page.component.scss
View file @ 64d29255
.pace-done { .pace-done {
width: 100%; width: 100%;
height: 100%;
padding: 0; padding: 0;
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment