We use cookies to ensure you get the best experience on our website
Domů Procházet Nápověda
Registrovat se Přihlásit se
0ct0pu5
/
pwm
1
0
Rozštěpit 0
Soubory Úkoly 0 Pull Requesty 0 Wiki
Procházet zdrojové kódy

Moved styles from pwm resources/ directory into individual scss for each component. Converted to Sass style sheets.

Joe Hawkins před 8 roky
rodič
062dd4d038
revize
dd5a25f0f5
9 změnil soubory, kde provedl 371 přidání a 5 odebrání
Rozdělené zobrazení Ukázat statistiku rozdílových dat
  1. 2 1
      src/main/angular/index.html
  2. 235 0
      src/main/angular/src/orgchart/orgchart.component.scss
  3. 2 0
      src/main/angular/src/orgchart/orgchart.component.ts
  4. 53 0
      src/main/angular/src/peoplesearch/peoplesearch-cards.component.scss
  5. 2 0
      src/main/angular/src/peoplesearch/peoplesearch-cards.component.ts
  6. 29 0
      src/main/angular/src/peoplesearch/peoplesearch-table.component.scss
  7. 2 0
      src/main/angular/src/peoplesearch/peoplesearch-table.component.ts
  8. 43 1
      src/main/angular/src/peoplesearch/peoplesearch.component.scss
  9. 3 3
      src/main/angular/src/peoplesearch/peoplesearch.component.ts

+ 2 - 1
src/main/angular/index.html
Zobrazit soubor 

@@ -5,7 +5,8 @@
 
     <title>SSPR Development</title>
 
 </head>
 
 <body ng-cloak>
 
-<ui-view>Loading...</ui-view>
 
+<ui-view id="people-search-view">Loading...</ui-view>
 
+
 
 <script src="vendor/angular.js"></script>
 
 <script src="vendor/angular-ui-router.js"></script>
 
 </body>

+ 235 - 0
src/main/angular/src/orgchart/orgchart.component.scss
Zobrazit soubor 

@@ -0,0 +1,235 @@
 
+org-chart {
 
+  bottom: 0;
 
+  left: 0;
 
+  position: absolute;
 
+  right: 0;
 
+  top: 0;
 
+}
 
+
 
+#orgchart-content {
 
+  bottom: 0;
 
+  left: 0;
 
+  overflow: auto;
 
+  position: absolute;
 
+  right: 0;
 
+  top: 42px;
 
+}
 
+
 
+#orgchart-close {
 
+  background: gray no-repeat scroll 0 0 / 20px 20px;
 
+  border: 1px solid transparent;
 
+  height: 20px;
 
+  position: absolute;
 
+  right: 0;
 
+  top: 0;
 
+  width: 20px;
 
+
 
+  &:hover {
 
+    background-color: #f6f9f8;
 
+    border: 1px solid #dae1e1;
 
+    color: #0088ce;
 
+  }
 
+}
 
+
 
+.orgchart-direct-reports {
 
+  border-top: 3px solid #808080;
 
+  margin-right: 25px;
 
+  margin-top: 40px;
 
+  min-width: 700px;
 
+  padding-top: 0;
 
+
 
+  .num-reports {
 
+    position: absolute;
 
+    right: 3px;
 
+    top: 3px;
 
+  }
 
+}
 
+
 
+.orgchart-direct-reports-title {
 
+  top: 315px;
 
+}
 
+
 
+.orgchart-num-reports {
 
+  background-color: #dae1e1;
 
+  border-radius: 2px;
 
+  color: #434c50;
 
+  font-size: 12px;
 
+  height: 18px;
 
+  line-height: 18px;
 
+  margin-bottom: 0;
 
+  padding-bottom: 0;
 
+  position: absolute;
 
+  right: 3px;
 
+  text-align: center;
 
+  top: 3px;
 
+  width: 25px;
 
+}
 
+
 
+.orgchart-primary-person {
 
+  background: #fff none repeat scroll 0 0;
 
+  border: 3px solid #808080;
 
+  border-radius: 3px;
 
+  float: none;
 
+  height: 160px;
 
+  margin: 20px 0 0 120px;
 
+  position: relative;
 
+  width: 340px;
 
+
 
+  .orgchart-picture {
 
+    background: gray repeat scroll 0 0 / 65px 65px;
 
+    height: 65px;
 
+    left: 10px;
 
+    position: absolute;
 
+    top: 10px;
 
+    width: 65px;
 
+  }
 
+
 
+  .orgchart-primary-field {
 
+    color: #808080;
 
+    left: 90px;
 
+    font-size: 13px;
 
+    position: absolute;
 
+  }
 
+
 
+  .orgchart-primary-field,
 
+  .orgchard-field-value {
 
+    &.link {
 
+      color: #0088ce;
 
+    }
 
+  }
 
+
 
+
 
+  .orgchart-field-0 {
 
+    color: black;
 
+    font-size: 14px;
 
+    top: 10px;
 
+  }
 
+
 
+  .orgchart-field-1 {
 
+    top: 28px;
 
+  }
 
+
 
+  .orgchart-field-2 {
 
+    top: 46px;
 
+  }
 
+
 
+  .orgchart-secondary-field {
 
+    position: absolute;
 
+    left: 10px;
 
+
 
+    .orgchart-field-name {
 
+      color: #808080;
 
+      display: inline-block;
 
+      font-size: 13px;
 
+      overflow: hidden;
 
+      width: 100px;
 
+    }
 
+
 
+    .orgchart-field-value {
 
+      display: inline-block;
 
+      font-size: 13px;
 
+      overflow: hidden;
 
+      width: 215px;
 
+    }
 
+  }
 
+
 
+  .orgchart-field-3 {
 
+    border-top: 1px solid #dae1e1;
 
+    padding-top: 8px;
 
+    top: 80px;
 
+  }
 
+
 
+  .orgchart-field-4 {
 
+    top: 111px;
 
+  }
 
+
 
+  .orgchart-field-5 {
 
+    top: 134px;
 
+  }
 
+}
 
+
 
+.orgchart-management {
 
+  margin-left: 90px;
 
+  min-width: 650px;
 
+
 
+  .orgchart-manager {
 
+    display: inline-block;
 
+    padding-top: 75px;
 
+    position: relative;
 
+    width: 130px;
 
+
 
+    .orgchart-separator {
 
+      background-color: #dae1e1;
 
+      height: 3px;
 
+      position: absolute;
 
+      top: 40px;
 
+      width: 100%;
 
+    }
 
+
 
+    .orgchart-separator {
 
+      &.first {
 
+        margin-left: 50%;
 
+        width: 50%;
 
+      }
 
+
 
+      &.last {
 
+        margin-right: 50%;
 
+        width: 50%;
 
+      }
 
+
 
+      &.first.last {
 
+        display: none;
 
+      }
 
+    }
 
+
 
+    .orgchart-field {
 
+      color: #808080;
 
+      font-size: 12px;
 
+      text-align: center;
 
+      overflow: hidden;
 
+      text-overflow: ellipsis;
 
+      white-space: nowrap;
 
+    }
 
+
 
+    .orgchart-picture {
 
+      left: 35px;
 
+      margin: 0 auto;
 
+      position: absolute;
 
+      top: 10px;
 
+      width: 50%;
 
+    }
 
+
 
+    .orgchart-picture img {
 
+      border: 3px solid #dae1e1;
 
+      border-radius: 50%;
 
+      height: 50px;
 
+      margin: 3px;
 
+      width: 50px;
 
+    }
 
+  }
 
+}
 
+
 
+.orgchart-manager-fields {
 
+  background-color: white;
 
+  padding: 4px;
 
+}
 
+
 
+.orgchart-management-title {
 
+  top: 25px;
 
+}
 
+
 
+.orgchart-primary-person-connector {
 
+  background-color: #808080;
 
+  height: 290px;
 
+  left: 155px;
 
+  position: absolute;
 
+  top: 50px;
 
+  width: 5px;
 
+}
 
+
 
+.orgchart-title {
 
+  color: #808080;
 
+  font-size: 14px;
 
+  left: 0;
 
+  position: absolute;
 
+}

+ 2 - 0
src/main/angular/src/orgchart/orgchart.component.ts
Zobrazit soubor 

@@ -3,9 +3,11 @@ import { IQService } from 'angular';
 
 import PeopleService from '../services/people.service';
 
 import Person from '../models/person.model';
 
 
+var stylesheetUrl = require('orgchart/orgchart.component.scss');
 
 var templateUrl = require('orgchart/orgchart.component.html');
 
 
 @Component({
 
+    stylesheetUrl: stylesheetUrl,
 
     templateUrl: templateUrl
 
 })
 
 export default class OrgChartComponent {

+ 53 - 0
src/main/angular/src/peoplesearch/peoplesearch-cards.component.scss
Zobrazit soubor 

@@ -0,0 +1,53 @@
 
+people-search-cards {
 
+    bottom: 0;
 
+    left: 0;
 
+    overflow: auto;
 
+    position: absolute;
 
+    right: 0;
 
+    top: 0;
 
+}
 
+
 
+.person-card-list {
 
+    .person-card {
 
+        background-color: #eef2f2;
 
+        border: 1px solid #eef2f2;
 
+        display: inline-block;
 
+        height: 60px;
 
+        margin-right: 5px;
 
+        margin-top: 5px;
 
+        padding: 10px;
 
+        position: relative;
 
+        vertical-align: top;
 
+        width: 200px;
 
+
 
+        &:hover {
 
+            background: #f6f9f8 none repeat scroll 0 0;
 
+            border: 1px solid #28a9e1 !important;
 
+            cursor: pointer;
 
+        }
 
+
 
+        .person-card-image {
 
+            background: gray no-repeat scroll 0 0 / 50px 50px;
 
+            height: 50px;
 
+            position: absolute;
 
+            top: 10px;
 
+            width: 50px;
 
+        }
 
+
 
+        .person-card-details {
 
+            left: 70px;
 
+            position: absolute;
 
+            top: 10px;
 
+        }
 
+    }
 
+}
 
+
 
+.person-card-row-1 {
 
+    color: black;
 
+    font-size: 14px;
 
+}
 
+
 
+.person-card-row-2, .person-card-row-3, .person-card-row-4 {
 
+    color: #808080;
 
+    font-size: 12px;
 
+}

+ 2 - 0
src/main/angular/src/peoplesearch/peoplesearch-cards.component.ts
Zobrazit soubor 

@@ -3,9 +3,11 @@ import { IScope } from 'angular';
 
 import PeopleSearchService from './peoplesearch.service';
 
 import Person from '../models/person.model';
 
 
+var stylesheetUrl = require('peoplesearch/peoplesearch-cards.component.scss');
 
 var templateUrl = require('peoplesearch/peoplesearch-cards.component.html');
 
 
 @Component({
 
+    stylesheetUrl: stylesheetUrl,
 
     templateUrl: templateUrl
 
 })
 
 export default class PeopleSearchCardsComponent {

+ 29 - 0
src/main/angular/src/peoplesearch/peoplesearch-table.component.scss
Zobrazit soubor 

@@ -0,0 +1,29 @@
 
+people-search-table {
 
+    border: 1px solid #dae1e1;
 
+    bottom: 0;
 
+    left: 0;
 
+    overflow: auto;
 
+    position: absolute;
 
+    right: 0;
 
+    top: 0;
 
+
 
+    > table {
 
+        border: 0 none;
 
+        width: 100%;
 
+
 
+        th, td {
 
+            border-bottom: 1px solid #dae1e1;
 
+            font-weight: normal;
 
+            overflow: hidden;
 
+            padding: 5px;
 
+            text-align: left;
 
+            vertical-align: top;
 
+        }
 
+
 
+        th {
 
+            background-color: #eeeeee;
 
+            color: #697c87;
 
+        }
 
+    }
 
+}
 
+

+ 2 - 0
src/main/angular/src/peoplesearch/peoplesearch-table.component.ts
Zobrazit soubor 

@@ -3,9 +3,11 @@ import { IScope } from 'angular';
 
 import PeopleSearchService from './peoplesearch.service';
 
 import Person from '../models/person.model';
 
 
+var stylesheetUrl = require('peoplesearch/peoplesearch-table.component.scss');
 
 var templateUrl = require('peoplesearch/peoplesearch-table.component.html');
 
 
 @Component({
 
+    stylesheetUrl: stylesheetUrl,
 
     templateUrl: templateUrl
 
 })
 
 export default class PeopleSearchTableComponent {

+ 43 - 1
src/main/angular/src/peoplesearch/peoplesearch.component.scss
Zobrazit soubor 

@@ -1 +1,43 @@
 
-people-search {}
 
+#people-search-component-view {
 
+  bottom: 0;
 
+  left: 0;
 
+  position: absolute;
 
+  right: 0;
 
+  top: 85px;
 
+}
 
+
 
+#people-search-view {
 
+  bottom: 0;
 
+  display: block;
 
+  left: 0;
 
+  margin: 5px;
 
+  position: absolute;
 
+  right: 0;
 
+  top: 0;
 
+}
 
+
 
+#people-search-view-toggle {
 
+  border: 1px solid transparent;
 
+  color: #808080;
 
+  cursor: pointer;
 
+  font-size: 20px;
 
+  height: 24px;
 
+  position: absolute;
 
+  right: 0;
 
+  top: 42px;
 
+  width: 24px;
 
+
 
+  &:hover {
 
+    background-color: #f6f9f8;
 
+    border: 1px solid #dae1e1;
 
+    color: #0088ce;
 
+  }
 
+
 
+  &.fa {
 
+    &::before {
 
+      left: 2px;
 
+      position: absolute;
 
+      top: 2px;
 
+    }
 
+  }
 
+}

+ 3 - 3
src/main/angular/src/peoplesearch/peoplesearch.component.ts
Zobrazit soubor 

@@ -2,12 +2,12 @@ import { Component } from '../component';
 
 import { IScope } from 'angular';
 
 import PeopleSearchService from './peoplesearch.service';
 
 
-var templateUrl = require('peoplesearch/peoplesearch.component.html');
 
 var stylesheetUrl = require('peoplesearch/peoplesearch.component.scss');
 
+var templateUrl = require('peoplesearch/peoplesearch.component.html');
 
 
 @Component({
 
-    templateUrl: templateUrl,
 
-    stylesheetUrl: stylesheetUrl
 
+    stylesheetUrl: stylesheetUrl,
 
+    templateUrl: templateUrl
 
 })
 
 export default class PeopleSearchComponent {
 
     query: string;

Contact | Legal | Takedown | Status
Self-hosted public services - About
NibbleSpot by 0ct0pu5