[udpate] angular version to 8

b310-digital · Jun 2, 2019 · bf3ea72 · bf3ea72
1 parent 132fbf3
commit bf3ea72
Show file tree

Hide file tree

Showing 15 changed files with 1,681 additions and 1,945 deletions.
diff --git a/browserslist b/browserslist
@@ -0,0 +1,12 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+not IE 9-11 # For IE 9-11 support, remove 'not'.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,77 +1,75 @@
 {
-    "name": "mindmapp",
-    "version": "0.7.16",
-    "description": "Desktop application to draw mind maps.",
-    "homepage": "https://mindmapp.cedoor.org",
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/Mindmapp/mindmapp.git"
-    },
-    "author": {
-        "name": "Omar Desogus",
-        "email": "[email protected]"
-    },
-    "license": "MIT",
-    "keywords": [
-        "electron",
-        "mmp",
-        "mindmap",
-        "node",
-        "branch",
-        "map",
-        "mind",
-        "infovis"
-    ],
-    "main": "app.js",
-    "scripts": {
-        "start": "electron . --dev",
-        "ng:build": "ng build --watch",
-        "pack": "ng build --prod && electron-builder --dir",
-        "release": "ng build --prod && electron-builder"
-    },
-    "dependencies": {
-        "electron-log": "^3.0.5",
-        "electron-updater": "^4.0.6"
-    },
-    "devDependencies": {
-        "@angular-devkit/build-angular": "~0.13.9",
-        "@angular-devkit/schematics": "^7.3.9",
-        "@angular/animations": "^7.2.15",
-        "@angular/cdk": "^7.3.7",
-        "@angular/cli": "~7.3.9",
-        "@angular/common": "^7.2.15",
-        "@angular/compiler": "^7.2.15",
-        "@angular/compiler-cli": "^7.2.15",
-        "@angular/core": "^7.2.15",
-        "@angular/forms": "^7.2.15",
-        "@angular/http": "^7.2.15",
-        "@angular/language-service": "^7.2.15",
-        "@angular/material": "^7.2.2",
-        "@angular/platform-browser": "^7.2.15",
-        "@angular/platform-browser-dynamic": "^7.2.15",
-        "@angular/router": "^7.2.15",
-        "@ngx-translate/core": "^11.0.1",
-        "@ngx-translate/http-loader": "^4.0.0",
-        "@types/mousetrap": "^1.6.2",
-        "@types/node": "^12.0.0",
-        "codelyzer": "^5.0.1",
-        "core-js": "^2.5.4",
-        "electron": "^5.0.1",
-        "electron-builder": "^20.40.2",
-        "electron-reload": "^1.4.0",
-        "hammerjs": "^2.0.8",
-        "jspdf": "^1.5.3",
-        "material-design-icons": "^3.0.1",
-        "minimist": "^1.2.0",
-        "mmp": "0.2.15",
-        "mousetrap": "^1.6.3",
-        "ngx-color-picker": "^7.5.0",
-        "rxjs": "~6.3.3",
-        "tar": "4.4.8",
-        "ts-node": "~7.0.0",
-        "tslib": "^1.9.0",
-        "tslint": "~5.16.0",
-        "typescript": "~3.2.2",
-        "zone.js": "~0.8.26"
-    }
+  "name": "mindmapp",
+  "version": "0.7.16",
+  "description": "Desktop application to draw mind maps.",
+  "homepage": "https://mindmapp.cedoor.org",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Mindmapp/mindmapp.git"
+  },
+  "author": {
+    "name": "Omar Desogus",
+    "email": "[email protected]"
+  },
+  "license": "MIT",
+  "keywords": [
+    "electron",
+    "mmp",
+    "mindmap",
+    "node",
+    "branch",
+    "map",
+    "mind",
+    "infovis"
+  ],
+  "main": "app.js",
+  "scripts": {
+    "start": "electron . --dev",
+    "ng:build": "ng build --watch",
+    "pack": "ng build --prod && electron-builder --dir",
+    "release": "ng build --prod && electron-builder"
+  },
+  "dependencies": {
+    "electron-log": "^3.0.5",
+    "electron-updater": "^4.0.6"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "~0.800.0",
+    "@angular-devkit/schematics": "^7.3.9",
+    "@angular/animations": "^8.0.0",
+    "@angular/cdk": "^7.3.7",
+    "@angular/cli": "~8.0.1",
+    "@angular/common": "^8.0.0",
+    "@angular/compiler": "^8.0.0",
+    "@angular/compiler-cli": "^8.0.0",
+    "@angular/core": "^8.0.0",
+    "@angular/forms": "^8.0.0",
+    "@angular/language-service": "^8.0.0",
+    "@angular/material": "^7.2.2",
+    "@angular/platform-browser": "^8.0.0",
+    "@angular/platform-browser-dynamic": "^8.0.0",
+    "@angular/router": "^8.0.0",
+    "@ngx-translate/core": "^11.0.1",
+    "@ngx-translate/http-loader": "^4.0.0",
+    "@types/mousetrap": "^1.6.2",
+    "@types/node": "^12.0.0",
+    "codelyzer": "^5.0.1",
+    "core-js": "^2.5.4",
+    "electron": "^5.0.1",
+    "electron-builder": "^20.40.2",
+    "electron-reload": "^1.4.0",
+    "hammerjs": "^2.0.8",
+    "jspdf": "^1.5.3",
+    "material-design-icons": "^3.0.1",
+    "minimist": "^1.2.0",
+    "mmp": "0.2.15",
+    "mousetrap": "^1.6.3",
+    "ngx-color-picker": "^7.5.0",
+    "rxjs": "~6.5.2",
+    "ts-node": "~7.0.0",
+    "tslib": "^1.9.0",
+    "tslint": "~5.17.0",
+    "typescript": "~3.4.5",
+    "zone.js": "~0.9.1"
+  }
 }
diff --git a/src/app/modules/application/application.component.html b/src/app/modules/application/application.component.html
@@ -4,7 +4,7 @@
     </mat-sidenav>
     <mat-sidenav-content>
         <div [@fadeInOut]>
-            <mindmapp-toolbar [sidenav]="sidenav" [node]="node"></mindmapp-toolbar>
+            <mindmapp-toolbar [node]="node" [sidenav]="sidenav"></mindmapp-toolbar>
 
             <mindmapp-colors-panel [node]="node"></mindmapp-colors-panel>
             <mindmapp-sliders-panel [node]="node"></mindmapp-sliders-panel>

diff --git a/src/app/modules/application/components/colors-panel/colors-panel.component.html b/src/app/modules/application/components/colors-panel/colors-panel.component.html
@@ -2,38 +2,38 @@
     <div #background class="background"></div>
 
     <div class="panel">
-        <input class="background-color"
+        <input (colorPickerChange)="colorPickerChange('backgroundColor', $event)"
                (cpToggleChange)="colorPickerToggleChange($event, 'backgroundColor', node.colors.background)"
-               (colorPickerChange)="colorPickerChange('backgroundColor', $event)"
                [(colorPicker)]="node.colors.background"
-               [cpPresetLabel]="''"
                [cpPositionOffset]="'-500%'"
                [cpPresetColors]="options.presetColors"
+               [cpPresetLabel]="''"
                [cpWidth]="options.width"
                [style.background]="node.colors.background"
                [title]="'TOOLTIPS.NODE_COLOR' | translate"
+               class="background-color"
                cpPosition="left"/>
-        <input class="text-color"
+        <input (colorPickerChange)="colorPickerChange('nameColor', $event)"
                (cpToggleChange)="colorPickerToggleChange($event, 'nameColor', node.colors.name)"
-               (colorPickerChange)="colorPickerChange('nameColor', $event)"
                [(colorPicker)]="node.colors.name"
-               [cpPresetLabel]="''"
                [cpPositionOffset]="'-500%'"
                [cpPresetColors]="options.presetColors"
+               [cpPresetLabel]="''"
                [cpWidth]="options.width"
                [style.background]="node.colors.name"
                [title]="'TOOLTIPS.TEXT_COLOR' | translate"
+               class="text-color"
                cpPosition="left"/>
-        <input *ngIf="node.colors.branch" class="branch-color"
-               (cpToggleChange)="colorPickerToggleChange($event, 'branchColor', node.colors.branch)"
-               (colorPickerChange)="colorPickerChange('branchColor', $event)"
+        <input (colorPickerChange)="colorPickerChange('branchColor', $event)" (cpToggleChange)="colorPickerToggleChange($event, 'branchColor', node.colors.branch)"
+               *ngIf="node.colors.branch"
                [(colorPicker)]="node.colors.branch"
-               [cpPresetLabel]="''"
                [cpPositionOffset]="'-500%'"
                [cpPresetColors]="options.presetColors"
+               [cpPresetLabel]="''"
                [cpWidth]="options.width"
                [style.background]="node.colors.branch"
                [title]="'TOOLTIPS.BRANCH_COLOR' | translate"
+               class="branch-color"
                cpPosition="left"/>
     </div>
 </div>
diff --git a/src/app/modules/application/components/colors-panel/colors-panel.component.ts b/src/app/modules/application/components/colors-panel/colors-panel.component.ts
@@ -10,7 +10,7 @@ export class ColorsPanelComponent implements OnInit {
 
     @Input() public node: any
 
-    @ViewChild('background') public background: ElementRef
+    @ViewChild('background', {static: false}) public background: ElementRef
 
     public options: any
 

diff --git a/src/app/modules/application/components/floating-buttons/floating-buttons.component.html b/src/app/modules/application/components/floating-buttons/floating-buttons.component.html
@@ -1,40 +1,40 @@
 <div class="floating-buttons">
-    <button (click)="mmpService.addNode()" class="add-node"
-            [title]="'TOOLTIPS.ADD_NODE' | translate"
+    <button (click)="mmpService.addNode()" [title]="'TOOLTIPS.ADD_NODE' | translate"
+            class="add-node"
             mat-mini-fab>
-        <mat-icon color="primary" aria-label="Example icon-button with a heart icon">add</mat-icon>
+        <mat-icon aria-label="Example icon-button with a heart icon" color="primary">add</mat-icon>
     </button>
-    <button (click)="mmpService.removeNode()" class="remove-node"
-            [title]="'TOOLTIPS.REMOVE_NODE' | translate"
+    <button (click)="mmpService.removeNode()" [title]="'TOOLTIPS.REMOVE_NODE' | translate"
+            class="remove-node"
             mat-mini-fab>
-        <mat-icon color="primary" aria-label="Example icon-button with a heart icon">remove</mat-icon>
+        <mat-icon aria-label="Example icon-button with a heart icon" color="primary">remove</mat-icon>
     </button>
 
-    <button (click)="mmpService.zoomIn()" class="zoom-in"
-            [title]="'TOOLTIPS.ZOOM_IN_MAP' | translate"
+    <button (click)="mmpService.zoomIn()" [title]="'TOOLTIPS.ZOOM_IN_MAP' | translate"
+            class="zoom-in"
             mat-mini-fab>
-        <mat-icon color="primary" aria-label="Example icon-button with a heart icon">zoom_in</mat-icon>
+        <mat-icon aria-label="Example icon-button with a heart icon" color="primary">zoom_in</mat-icon>
     </button>
-    <button (click)="mmpService.zoomOut()" class="zoom-out"
-            [title]="'TOOLTIPS.ZOOM_OUT_MAP' | translate"
+    <button (click)="mmpService.zoomOut()" [title]="'TOOLTIPS.ZOOM_OUT_MAP' | translate"
+            class="zoom-out"
             mat-mini-fab>
-        <mat-icon color="primary" aria-label="Example icon-button with a heart icon">zoom_out</mat-icon>
+        <mat-icon aria-label="Example icon-button with a heart icon" color="primary">zoom_out</mat-icon>
     </button>
 
-    <button (click)="mmpService.center()" class="center"
-            [title]="'TOOLTIPS.CENTER_MAP' | translate"
+    <button (click)="mmpService.center()" [title]="'TOOLTIPS.CENTER_MAP' | translate"
+            class="center"
             mat-mini-fab>
-        <mat-icon color="primary" aria-label="Example icon-button with a heart icon">center_focus_weak</mat-icon>
+        <mat-icon aria-label="Example icon-button with a heart icon" color="primary">center_focus_weak</mat-icon>
     </button>
 
-    <button (click)="mmpService.undo()" class="undo"
-            [title]="'TOOLTIPS.UNDO_MAP' | translate"
+    <button (click)="mmpService.undo()" [title]="'TOOLTIPS.UNDO_MAP' | translate"
+            class="undo"
             mat-mini-fab>
-        <mat-icon color="primary" aria-label="Example icon-button with a heart icon">undo</mat-icon>
+        <mat-icon aria-label="Example icon-button with a heart icon" color="primary">undo</mat-icon>
     </button>
-    <button (click)="mmpService.redo()" class="redo"
-            [title]="'TOOLTIPS.REDO_MAP' | translate"
+    <button (click)="mmpService.redo()" [title]="'TOOLTIPS.REDO_MAP' | translate"
+            class="redo"
             mat-mini-fab>
-        <mat-icon color="primary" aria-label="Example icon-button with a heart icon">redo</mat-icon>
+        <mat-icon aria-label="Example icon-button with a heart icon" color="primary">redo</mat-icon>
     </button>
 </div>
diff --git a/src/app/modules/application/components/sidenav/sidenav.component.html b/src/app/modules/application/components/sidenav/sidenav.component.html
@@ -1,7 +1,7 @@
 <div class="sidenav">
     <mat-toolbar>
-        <button (click)="sidenav.close()" class="close-menu"
-                color="primary" [title]="'TOOLTIPS.CLOSE_MENU' | translate"
+        <button (click)="sidenav.close()" [title]="'TOOLTIPS.CLOSE_MENU' | translate"
+                class="close-menu" color="primary"
                 mat-icon-button>
             <mat-icon>arrow_forward</mat-icon>
         </button>
@@ -21,15 +21,15 @@
                 </button>
 
                 <mat-menu #export="matMenu">
-                    <button mat-menu-item (click)="dialogService.exportImage('png')">
+                    <button (click)="dialogService.exportImage('png')" mat-menu-item>
                         <mat-icon>image</mat-icon>
                         <span>{{ "PNG" | translate }}</span>
                     </button>
-                    <button mat-menu-item (click)="dialogService.exportImage('jpeg')">
+                    <button (click)="dialogService.exportImage('jpeg')" mat-menu-item>
                         <mat-icon>image</mat-icon>
                         <span>{{ "JPG" | translate }}</span>
                     </button>
-                    <button mat-menu-item (click)="dialogService.exportPDF()">
+                    <button (click)="dialogService.exportPDF()" mat-menu-item>
                         <mat-icon>picture_as_pdf</mat-icon>
                         <span>{{ "PDF" | translate }}</span>
                     </button>
@@ -38,8 +38,8 @@
 
             <mat-divider></mat-divider>
 
-            <mat-list-item *ngIf="platform !== 'darwin'"
-                           (click)="dialogService.openMatDialog('shortcuts')" class="open-shortcuts">
+            <mat-list-item (click)="dialogService.openMatDialog('shortcuts')"
+                           *ngIf="platform !== 'darwin'" class="open-shortcuts">
                 <span matLine>{{ "SHORTCUTS_TITLE" | translate }}</span>
                 <button color="primary" mat-icon-button>
                     <mat-icon>timeline</mat-icon>

diff --git a/src/app/modules/application/components/sliders-panel/sliders-panel.component.html b/src/app/modules/application/components/sliders-panel/sliders-panel.component.html
@@ -1,20 +1,20 @@
 <div class="sliders-panel">
-    <mat-slider *ngIf="node.font" class="font-size"
-                min="15" max="70"
+    <mat-slider (change)="updateNodeFontSize($event)" (input)="updateNodeFontSize($event, true)"
+                *ngIf="node.font" [title]="'TOOLTIPS.TEXT_SIZE' | translate"
                 [value]="node.font.size"
-                (change)="updateNodeFontSize($event)"
-                (input)="updateNodeFontSize($event, true)"
-                [title]="'TOOLTIPS.TEXT_SIZE' | translate"
+                class="font-size"
                 color="primary"
+                max="70"
+                min="15"
                 vertical>
     </mat-slider>
-    <mat-slider *ngIf="node.image && node.image.src" class="image-size"
-                min="50" max="150"
+    <mat-slider (change)="updateNodeImageSize($event)" (input)="updateNodeImageSize($event, true)"
+                *ngIf="node.image && node.image.src" [title]="'TOOLTIPS.IMAGE_SIZE' | translate"
                 [value]="node.image.size"
-                (change)="updateNodeImageSize($event)"
-                (input)="updateNodeImageSize($event, true)"
-                [title]="'TOOLTIPS.IMAGE_SIZE' | translate"
+                class="image-size"
                 color="primary"
+                max="150"
+                min="50"
                 vertical>
     </mat-slider>
 </div>