Fix manipulation example bug, improve styles

jannicz · Aug 25, 2020 · 3781c22 · 3781c22
1 parent 594e5e9
commit 3781c22
Show file tree

Hide file tree

Showing 9 changed files with 20 additions and 11 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -6,8 +6,8 @@
   <base href="/ng-svg-icon-sprite/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
-<link rel="stylesheet" href="/ng-svg-icon-sprite/styles.6a5dee466abccf74ab01.css"></head>
+<link rel="stylesheet" href="/ng-svg-icon-sprite/styles.9d57022c59f26ab256b5.css"></head>
 <body>
   <app-root></app-root>
-<script src="/ng-svg-icon-sprite/runtime.4295061d37396e5c587c.js" defer></script><script src="/ng-svg-icon-sprite/polyfills-es5.0f2b216af852c626206d.js" nomodule defer></script><script src="/ng-svg-icon-sprite/polyfills.ecf2065bce18bc1bcbd6.js" defer></script><script src="/ng-svg-icon-sprite/main.818efd15c5c821fa80ad.js" defer></script></body>
+<script src="/ng-svg-icon-sprite/runtime.4295061d37396e5c587c.js" defer></script><script src="/ng-svg-icon-sprite/polyfills-es5.0f2b216af852c626206d.js" nomodule defer></script><script src="/ng-svg-icon-sprite/polyfills.ecf2065bce18bc1bcbd6.js" defer></script><script src="/ng-svg-icon-sprite/main.b4ccd746f2283d751be2.js" defer></script></body>
 </html>
diff --git a/docs/main.818efd15c5c821fa80ad.js → docs/main.b4ccd746f2283d751be2.js b/docs/main.818efd15c5c821fa80ad.js → docs/main.b4ccd746f2283d751be2.js
diff --git a/docs/styles.6a5dee466abccf74ab01.css b/docs/styles.6a5dee466abccf74ab01.css
diff --git a/docs/styles.9d57022c59f26ab256b5.css b/docs/styles.9d57022c59f26ab256b5.css
diff --git a/src/app/manipulator/manipulator.component.html b/src/app/manipulator/manipulator.component.html
@@ -10,7 +10,8 @@ <h2>Manipulation <small>(scaling and attributes)</small></h2>
               [(ngModel)]="model.name" name="power">
         <option *ngFor="let icon of icons" [value]="icon.name">{{icon.name}}</option>
       </select>
-      <span class="small">Icon: {{model.source}}</span>
+      <br />
+      <span class="small">{{model.source}}</span>
     </div>
 
     <div class="controls">

diff --git a/src/app/manipulator/manipulator.component.scss b/src/app/manipulator/manipulator.component.scss
@@ -60,6 +60,10 @@
     margin-top: -3px;
   }
 
+  input {
+    margin-right: 10px;
+  }
+
   select {
     padding: 3px;
   }
@@ -69,7 +73,6 @@
   }
 
   .small {
-    margin-left: 8px;
     color: #555555;
     font-size: 90%;
   }
@@ -105,6 +108,7 @@
   font-size: 90%;
   margin-left: 3px;
   pointer-events: none;
+  transition: opacity 0.1s ease-in-out;
 }
 
 i {
@@ -115,7 +119,7 @@ i {
   border-radius: 50%;
   border: 1px solid rgb(118, 118, 118);
   margin-left: 5px;
-  cursor: pointer;
+  cursor: help;
   text-align: center;
   font-weight: bolder;
   font-style: normal;

diff --git a/src/app/manipulator/manipulator.component.ts b/src/app/manipulator/manipulator.component.ts
@@ -9,9 +9,9 @@ import { IconForm } from './IconForm.model';
 export class ManipulatorComponent implements OnInit {
 
   public icons = [
-    { src: 'star_100x100_viewbox', name: 'Star (100 x 100px)'},
-    { src: 'delete_70x70', name: 'Trash (70 x 70px)'},
-    { src: 'circle_24x24-viewbox', name: 'Circle (24 x 24px)'},
+    { src: 'assets/sprites/sprite.svg#star_100x100_viewbox', name: 'Star (100 x 100px)'},
+    { src: 'assets/sprites/sprite.svg#delete_70x70', name: 'Trash (70 x 70px)'},
+    { src: 'assets/sprites/sprite.svg#circle_24x24-viewbox', name: 'Circle (24 x 24px)'},
     { src: 'assets/sprites/image-sprite.svg#multicolor-image', name: 'Multicolor Image'}
   ];
 
@@ -46,6 +46,7 @@ export class ManipulatorComponent implements OnInit {
 
   reset(): void {
     this.initialize();
+    this.calculateViewBox();
   }
 
   applyChange(): void {

diff --git a/src/assets/.gitkeep b/src/assets/.gitkeep
diff --git a/src/styles.scss b/src/styles.scss
@@ -39,6 +39,10 @@ p {
 a {
   color: steelblue;
   text-decoration: none;
+
+  &:hover, &:focus {
+    text-decoration: underline;
+  }
 }
 button, input, select {
   font-size: 14px;
@@ -63,7 +67,6 @@ pre {
 }
 code {
   line-height: 1.45;
-  background-color: lavender;
   font-family: Courier, monospace;
 }
 small {