feat(devtools): migrate devtools and demo app to scss for styling

angular · Mar 29, 2020 · 957034b · 957034b
1 parent 5aebba9
commit 957034b
Show file tree

Hide file tree

Showing 70 changed files with 639 additions and 562 deletions.
diff --git a/angular.json b/angular.json
@@ -5,7 +5,11 @@
   "projects": {
     "shell-dev": {
       "projectType": "application",
-      "schematics": {},
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
       "root": "",
       "sourceRoot": "src",
       "prefix": "app",
@@ -21,7 +25,7 @@
             "aot": true,
             "assets": ["src/favicon.ico", "src/assets"],
             "styles": [
-              "src/styles.css",
+              "src/styles.scss",
               "node_modules/todomvc-common/base.css",
               "node_modules/todomvc-app-css/index.css"
             ],
@@ -83,7 +87,7 @@
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
             "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles.css"],
+            "styles": ["src/styles.scss"],
             "scripts": []
           }
         },
@@ -221,6 +225,11 @@
     },
     "ng-devtools": {
       "projectType": "library",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
       "root": "projects/ng-devtools",
       "sourceRoot": "projects/ng-devtools/src",
       "prefix": "lib",

diff --git a/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.css b/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.css
diff --git a/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.scss b/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.scss
@@ -0,0 +1,90 @@
+:host {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+mat-tab-group {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+#inspect-component {
+  position: absolute;
+  top: 5px;
+  left: 4px;
+  border: 0;
+  outline: none;
+  width: 18px;
+  height: 18px;
+
+  div {
+    width: 18px;
+    height: 18px;
+  }
+
+  svg {
+    path {
+      fill: #6e6e6e;
+    }
+
+    path.active {
+      fill: #2a76e4;
+    }
+  }
+}
+
+#refresh-component-tree {
+  position: absolute;
+  left: 35px;
+  top: 7px;
+  border: 0;
+  outline: none;
+  width: 18px;
+  height: 18px;
+
+  div {
+    width: 18px;
+    height: 18px;
+  }
+
+  svg {
+    path {
+      fill: #6e6e6e;
+    }
+  }
+}
+#app-angular-version {
+  position: absolute;
+  top: 8px;
+  right: 10px;
+  font-size: 11px;
+  font-weight: bold;
+  color: #5128a5;
+}
+
+::ng-deep {
+  .mat-tab-body-wrapper {
+    height: calc(100% - 30px);
+  }
+
+  .mat-tab-header {
+    height: 30px;
+  }
+
+  .mat-tab-label-container {
+    margin-left: 70px;
+  }
+
+  mat-tab-header {
+    .mat-tab-label {
+      min-width: unset;
+      line-height: 30px;
+      height: 30px;
+      font-size: 12px;
+      padding: 0px 10px;
+    }
+  }
+}
diff --git a/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts b/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts
@@ -6,7 +6,7 @@ import { DirectiveExplorerComponent } from './directive-explorer/directive-explo
 @Component({
   selector: 'ng-devtools-tabs',
   templateUrl: './devtools-tabs.component.html',
-  styleUrls: ['./devtools-tabs.component.css'],
+  styleUrls: ['./devtools-tabs.component.scss'],
 })
 export class DevToolsTabsComponent {
   @Input() angularVersion: string | undefined = undefined;

diff --git a/...explorer/directive-explorer.component.css → ...xplorer/directive-explorer.component.scss b/...explorer/directive-explorer.component.css → ...xplorer/directive-explorer.component.scss
@@ -2,18 +2,19 @@
   display: flex;
   height: 100%;
   justify-content: space-between;
-}
 
+  ::ng-deep {
+    as-split-area {
+      overflow-y: hidden;
+    }
+
+    .as-split-gutter-icon {
+      display: none;
+    }
+  }
+}
 .property-tab-wrapper {
   overflow: auto;
   height: 100%;
   width: 100%;
 }
-
-:host /deep/ as-split-area {
-  overflow-y: hidden;
-}
-
-:host /deep/ .as-split-gutter-icon {
-  display: none;
-}
diff --git a/...ects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.ts b/...ects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.ts
@@ -36,7 +36,7 @@ const sameDirectives = (a: IndexedNode, b: IndexedNode) => {
 @Component({
   selector: 'ng-directive-explorer',
   templateUrl: './directive-explorer.component.html',
-  styleUrls: ['./directive-explorer.component.css'],
+  styleUrls: ['./directive-explorer.component.scss'],
   providers: [
     {
       provide: ElementPropertyResolver,

diff --git a/...est/breadcrumbs/breadcrumbs.component.css → ...st/breadcrumbs/breadcrumbs.component.scss b/...est/breadcrumbs/breadcrumbs.component.css → ...st/breadcrumbs/breadcrumbs.component.scss
@@ -1,22 +1,25 @@
 .parent-nodes {
   background-color: #ddd;
   padding: 2px;
-  bottom: 0px;
   position: fixed;
   width: 100%;
   height: 20px;
   overflow-x: auto;
   white-space: nowrap;
   z-index: 2;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 }
 
-.parent-nodes::-webkit-scrollbar {
-  display: none;
+.parent-nodes {
+  bottom: 0;
 }
 
 .btn-node {
   font-size: 11px;
-  margin: 0px;
+  margin: 0;
   padding-left: 5px;
   padding-right: 5px;
   line-height: 20px;

diff --git a/...ib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.component.ts b/...ib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/breadcrumbs.component.ts
@@ -4,7 +4,7 @@ import { FlatNode } from '../component-data-source';
 @Component({
   selector: 'ng-breadcrumbs',
   templateUrl: './breadcrumbs.component.html',
-  styleUrls: ['./breadcrumbs.component.css'],
+  styleUrls: ['./breadcrumbs.component.scss'],
 })
 export class BreadcrumbsComponent {
   @Input() parents: FlatNode[];