feat: add inspinia

.angular-cli.json

@@ -8,7 +8,7 @@
       "root": "src",
       "outDir": "dist",
       "assets": [
-        "assets",
+        "static",
         "favicon.ico"
       ],
       "index": "index.html",
@@ -20,14 +20,17 @@
       "prefix": "app",
       "styles": [
         "../node_modules/bootstrap/dist/css/bootstrap.min.css",
+        "../node_modules/font-awesome/css/font-awesome.css",
         "../node_modules/xterm/dist/xterm.css",
         "../node_modules/layui-layer/dist/theme/default/layer.css",
         "../node_modules/animate.css/animate.min.css",
-        "./assets/css/style.css",
+        "assets/inspinia/style.scss",
         "styles.css"
       ],
       "scripts": [
         "../node_modules/jquery/dist/jquery.min.js",
+        "../node_modules/metismenu/dist/metisMenu.js",
+        "../node_modules/jquery-sparkline/jquery.sparkline.js",
         "../node_modules/tether/dist/js/tether.min.js",
         "../node_modules/bootstrap/dist/js/bootstrap.min.js",
         "../node_modules/xterm/dist/xterm.js",

package.json

@@ -27,12 +27,21 @@
     "bootstrap": "^4.0.0-alpha.6",
     "clipboard": "^1.7.1",
     "core-js": "^2.4.1",
+    "font-awesome": "^4.7.0",
     "directory-encoder": "^0.9.2",
     "filetree-css": "^1.0.0",
     "handlebars": "^4.0.11",
-    "jquery": "^3.2.1",
+    "jquery": "^3.1.0",
+    "jquery-slimscroll": "^1.3.8",
+    "jquery-sparkline": "^2.4.0",
+    "jvectormap": "1.2.2",
+    "metismenu": "^2.5.0",
+    "ng2-charts": "^1.5.0",
+    "ngx-bootstrap": "^1.6.6",
+    "peity": "^3.2.1",
     "layui-layer": "git+https://github.com/jumpserver/layer.git",
     "ng2-cookies": "^1.0.12",
+    "npm": "^5.5.1",
     "rxjs": "^5.4.2",
     "socket.io": "^2.0.3",
     "ssh-keygen": "^0.4.1",

src/app/BasicPage/login/login.component.css

 
-.loginColumns {
-  max-width: 800px;
-  margin: 0px auto;
-  padding: 100px 20px 20px;
-}
-
-p {
-  font-size: 13px;
-}
-

src/app/BasicPage/login/login.component.html

@@ -18,7 +18,7 @@
     </div>
     <div class="col col-md-6">
       <div class="ibox-content">
-        <div><img src="/assets/imgs/logo.png" width="82" height="82"> <span class="font-bold text-center"
+        <div><img src="/static/imgs/logo.png" width="82" height="82"> <span class="font-bold text-center"
                                                                             style="font-size: 32px; font-family: inherit">登录</span>
         </div>
         <form class="m-t" #f="ngForm" (ngSubmit)="onSubmit(f)">

src/app/BasicPage/nav/nav.component.html

 <div class="nav">
   <ul>
-    <li><a [routerLink]="['Index']"><img src="assets/imgs/logo.png" height="26px"/></a>
+    <li><a [routerLink]="['Index']"><img src="static/imgs/logo.png" height="26px"/></a>
     </li>
     <li *ngFor="let v of DataStore.Nav" [ngClass]="{'dropdown': v.children}">
       <a>{{v.name}}</a>

src/assets/inspinia/imports/_badges_labels.scss

+
+.label {
+  background-color: $light-gray;
+  color: $label-badge-color;
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-weight: 600;
+  padding: 3px 8px;
+  text-shadow: none;
+}
+
+.nav .label, .ibox .label {
+  font-size: 10px;
+}
+
+.badge {
+  background-color: $light-gray;
+  color: $label-badge-color;
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: 11px;
+  font-weight: 600;
+  padding-bottom: 4px;
+  padding-left: 6px;
+  padding-right: 6px;
+  text-shadow: none;
+}
+
+.label-primary, .badge-primary {
+  background-color: $navy;
+  color: #FFFFFF;
+}
+
+.label-success, .badge-success {
+  background-color: $blue;
+  color: #FFFFFF;
+}
+
+.label-warning, .badge-warning {
+  background-color: $yellow;
+  color: #FFFFFF;
+}
+
+.label-warning-light, .badge-warning-light {
+  background-color: $yellow;
+  color: #ffffff;
+}
+
+.label-danger, .badge-danger {
+  background-color: $red;
+  color: #FFFFFF;
+}
+
+.label-info, .badge-info {
+  background-color: $lazur;
+  color: #FFFFFF;
+}
+
+.label-inverse, .badge-inverse {
+  background-color: #262626;
+  color: #FFFFFF;
+}
+
+.label-white, .badge-white {
+  background-color: #FFFFFF;
+  color: #5E5E5E;
+}
+
+.label-white, .badge-disable {
+  background-color: #2A2E36;
+  color: #8B91A0;
+}

src/assets/inspinia/imports/_chat.scss

+#small-chat {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 100;
+}
+
+#small-chat .badge {
+  position: absolute;
+  top: -3px;
+  right: -4px;
+}
+
+.open-small-chat {
+  height: 38px;
+  width: 38px;
+  display: block;
+  background: #1ab394;
+  padding: 9px 8px;
+  text-align: center;
+  color: #fff;
+  border-radius: 50%;
+}
+
+.open-small-chat:hover {
+  color: white;
+  background: #1ab394;
+}
+
+.small-chat-box {
+  display: none;
+  position: fixed;
+  bottom: 20px;
+  right: 75px;
+  background: #fff;
+  border: 1px solid $border-color;
+  width: 230px;
+  height: 320px;
+  border-radius: 4px;
+}
+
+.small-chat-box.ng-small-chat {
+  display: block;
+}
+
+.body-small {
+  .small-chat-box {
+    bottom: 70px;
+    right: 20px;
+  }
+}
+
+.small-chat-box.active {
+  display: block;
+}
+
+.small-chat-box {
+
+  .heading {
+    background: $nav-bg;
+    padding: 8px 15px;
+    font-weight: bold;
+    color: #fff;
+  }
+
+  .chat-date {
+    opacity: 0.6;
+    font-size: 10px;
+    font-weight: normal;
+  }
+
+  .content {
+    padding: 15px 15px;
+
+    .author-name {
+      font-weight: bold;
+      margin-bottom: 3px;
+      font-size: 11px;
+    }
+
+    > div {
+      padding-bottom: 20px;
+    }
+
+    .chat-message {
+      padding: 5px 10px;
+      border-radius: 6px;
+      font-size: 11px;
+      line-height: 14px;
+      max-width: 80%;
+      background: #f3f3f4;
+      margin-bottom: 10px;
+    }
+
+    .chat-message.active {
+      background: #1ab394;
+      color: #fff;
+    }
+
+    .left {
+      text-align: left;
+      clear: both;
+
+      .chat-message {
+        float: left;
+      }
+    }
+
+    .right {
+      text-align: right;
+      clear: both;
+
+      .chat-message {
+        float: right;
+      }
+
+    }
+
+  }
+
+  .form-chat {
+    padding: 10px 10px;
+  }
+
+}
\ No newline at end of file

src/assets/inspinia/imports/_custom.scss

+/* Only demo */
+@media (max-width: 1000px) {
+  .welcome-message {
+    display: none;
+  }
+}
\ No newline at end of file

src/assets/inspinia/imports/_media.scss

+@media (min-width: 768px) {
+  #page-wrapper {
+    position: inherit;
+    margin: 0 0 0 $sidebar-width;
+    min-height: 100vh;
+  }
+
+  .navbar-static-side {
+    z-index: 2001;
+    position: absolute;
+    width: $sidebar-width;
+  }
+
+  .navbar-top-links .dropdown-messages,
+  .navbar-top-links .dropdown-tasks,
+  .navbar-top-links .dropdown-alerts {
+    margin-left: auto;
+  }
+}
+
+@media (max-width: 768px) {
+
+  #page-wrapper {
+    position: inherit;
+    margin: 0 0 0 0;
+    min-height: 100vh;
+  }
+
+  .body-small .navbar-static-side {
+    display: none;
+    z-index: 2001;
+    position: absolute;
+    width: 70px;
+  }
+
+  .body-small.mini-navbar .navbar-static-side {
+    display: block;
+  }
+
+  .lock-word {
+    display: none;
+  }
+
+  .navbar-form-custom {
+    display: none;
+  }
+
+  .navbar-header {
+    display: inline;
+    float: left;
+  }
+
+  .sidebar-panel {
+    z-index: 2;
+    position: relative;
+    width: auto;
+    min-height: 100% !important;
+  }
+
+  .sidebar-content .wrapper {
+    padding-right: 0;
+    z-index: 1;
+  }
+
+  .fixed-sidebar.body-small .navbar-static-side {
+    display: none;
+    z-index: 2001;
+    position: fixed;
+    width: $sidebar-width;
+  }
+
+  .fixed-sidebar.body-small.mini-navbar .navbar-static-side {
+    display: block;
+  }
+
+  .ibox-tools {
+    float: none;
+    text-align: right;
+    display: block;
+  }
+
+  .navbar-static-side { display: none; }
+
+  body:not(.mini-navbar) {
+    -webkit-transition: background-color 500ms linear;
+    -moz-transition: background-color 500ms linear;
+    -o-transition: background-color 500ms linear;
+    -ms-transition: background-color 500ms linear;
+    transition: background-color 500ms linear;
+    background-color: #f3f3f4
+  }
+
+}
+
+@media (max-width: 350px) {
+
+  .timeline-item .date {
+    text-align: left;
+    width: 110px;
+    position: relative;
+    padding-top: 30px;
+  }
+
+  .timeline-item .date i {
+    position: absolute;
+    top: 0;
+    left: 15px;
+    padding: 5px;
+    width: 30px;
+    text-align: center;
+    border: 1px solid $border-color;
+    background: #f8f8f8;
+  }
+
+  .timeline-item .content {
+    border-left: none;
+    border-top: 1px solid $border-color;
+    padding-top: 10px;
+    min-height: 100px;
+  }
+
+  .nav.navbar-top-links li.dropdown {
+    display: none;
+  }
+
+  .ibox-tools {
+    float: none;
+    text-align: left;
+    display: inline-block;
+  }
+
+}

src/assets/inspinia/imports/_metismenu.scss

+/*
+ * metismenu - v2.0.2
+ * A jQuery menu plugin
+ * https://github.com/onokumus/metisMenu
+ *
+ * Made by Osman Nuri Okumus
+ * Under MIT License
+ */
+
+.metismenu .plus-minus, .metismenu .plus-times {
+  float: right
+}
+
+.metismenu .arrow {
+  float: right;
+  line-height: 1.42857
+}
+
+.metismenu .glyphicon.arrow:before {
+  content: "\e079"
+}
+
+.metismenu .active > a > .glyphicon.arrow:before {
+  content: "\e114"
+}
+
+.metismenu .fa.arrow:before {
+  content: "\f104"
+}
+
+.metismenu .active > a > .fa.arrow:before {
+  content: "\f107"
+}
+
+.metismenu .ion.arrow:before {
+  content: "\f3d2"
+}
+
+.metismenu .active > a > .ion.arrow:before {
+  content: "\f3d0"
+}
+
+.metismenu .fa.plus-minus:before, .metismenu .fa.plus-times:before {
+  content: "\f067"
+}
+
+.metismenu .active > a > .fa.plus-times {
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg)
+}
+
+.metismenu .active > a > .fa.plus-minus:before {
+  content: "\f068"
+}
+
+.metismenu .collapse {
+  display: none
+}
+
+.metismenu .collapse.in {
+  display: block
+}
+
+.metismenu .collapsing {
+  position: relative;
+  height: 0;
+  overflow: hidden;
+  -webkit-transition-timing-function: ease;
+  transition-timing-function: ease;
+  -webkit-transition-duration: .35s;
+  transition-duration: .35s;
+  -webkit-transition-property: height, visibility;
+  transition-property: height, visibility
+}
+
+.mini-navbar {
+  .metismenu .collapse { opacity: 0; }
+  .metismenu .collapse.in { opacity: 1; }
+  .metismenu .collapse a { display: none }
+  .metismenu .collapse.in a { display: block }
+}

src/assets/inspinia/imports/_theme-config.scss

+/*
+ *
+ *   This is style for skin config
+ *   Use only in demo theme
+ *
+*/
+
+.theme-config {
+  position: absolute;
+  top: 90px;
+  right: 0;
+  overflow: hidden;
+}
+
+.theme-config-box {
+  margin-right: -220px;
+  position: relative;
+  z-index: 2000;
+  transition-duration: 0.8s;
+}
+
+.theme-config-box.show {
+  margin-right: 0;
+}
+
+.spin-icon {
+  background: $navy;
+  position: absolute;
+  padding: 7px 10px 7px 13px;
+  border-radius: 20px 0 0 20px;
+  font-size: 16px;
+  top: 0;
+  left: 0;
+  width: 40px;
+  color: #fff;
+  cursor: pointer;
+}
+
+.skin-settings {
+  width: 220px;
+  margin-left: 40px;
+  background: $gray;
+}
+
+.skin-settings .title {
+  background: #efefef;
+  text-align: center;
+  text-transform: uppercase;
+  font-weight: 600;
+  display: block;
+  padding: 10px 15px;
+  font-size: 12px;
+}
+
+.setings-item {
+  padding: 10px 30px;
+}
+
+.setings-item.skin {
+  text-align: center;
+}
+
+.setings-item .switch {
+  float: right;
+}
+
+.skin-name a {
+  text-transform: uppercase;
+}
+
+.setings-item a {
+  color: #fff;
+}
+
+.default-skin, .blue-skin, .ultra-skin, .yellow-skin {
+  text-align: center;
+}
+
+.default-skin {
+  font-weight: 600;
+  background: #283A49;
+}
+
+.default-skin:hover {
+  background: #1e2e3d;
+}
+
+.blue-skin {
+  font-weight: 600;
+  background: url("#{$asset-path}/header-profile-skin-1.png") repeat scroll 0 0;
+}
+
+.blue-skin:hover {
+  background: #0d8ddb;
+}
+
+.yellow-skin {
+  font-weight: 600;
+  background: url("#{$asset-path}/header-profile-skin-3.png") repeat scroll 0 100%;
+}
+
+.yellow-skin:hover {
+  background: #ce8735;
+}
+
+.ultra-skin {
+  padding: 20px 10px;
+  font-weight: 600;
+  background: url("#{$asset-path}/3.png") repeat scroll 0 0;
+}
+
+.ultra-skin:hover {
+  background: url("#{$asset-path}/4.png") repeat scroll 0 0;
+}