feat: side nav icon swithing with background position

Change-Id: I3f135beeb26cce1b1527fa373c705f8c8dae9a9b
martyr-deepin · Aug 13, 2018 · 9ac05a2 · 9ac05a2
1 parent 6582463
commit 9ac05a2
Show file tree

Hide file tree

Showing 10 changed files with 73 additions and 68 deletions.
diff --git a/src/web/Makefile b/src/web/Makefile
@@ -8,7 +8,10 @@ app: web create-docker release-docker
 web: prepare-node-image
 	sudo docker run --rm -v $(CURDIR):/src -w /src node:8 \
 		./node_modules/.bin/ng build --configuration=production \
-		--output-path=./deploy/dist
+		--output-path=./deploy/dist/china --base-href /china/ --deploy-url /china/
+	sudo docker run --rm -v $(CURDIR):/src -w /src node:8 \
+		./node_modules/.bin/ng build --configuration=international \
+		--output-path=./deploy/dist/international --base-href /international/ --deploy-url /international/
 
 prepare-node-image:
 	sudo docker pull node:8

diff --git a/src/web/angular.json b/src/web/angular.json
@@ -39,13 +39,23 @@
               ],
               "outputPath": "../web_dist/appstore/"
             },
-            "myml": {
+            "international": {
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": false,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": false,
               "fileReplacements": [
                 {
                   "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.myml.ts"
+                  "with": "src/environments/environment.prod.international.ts"
                 }
-              ]
+              ],
+              "outputPath": "../web_dist/appstore/"
             }
           }
         },
@@ -57,9 +67,6 @@
           "configurations": {
             "production": {
               "browserTarget": "deepin-appstore-web:build:production"
-            },
-            "myml": {
-              "browserTarget": "deepin-appstore-web:build:myml"
             }
           }
         },

diff --git a/src/web/deploy/default.conf b/src/web/deploy/default.conf
@@ -4,11 +4,22 @@ server {
 
     #charset koi8-r;
     #access_log  /var/log/nginx/host.access.log  main;
-
     location / {
+        if ($http_accept_language ~* ^zh) {
+            rewrite .* /china redirect;
+        }
+        rewrite .* /international redirect;
+    }
+
+    location /china {
+        root   /usr/share/nginx/html;
+        index  index.html index.htm;
+        try_files $uri $uri/ /china/index.html;
+    }
+    location /international {
         root   /usr/share/nginx/html;
         index  index.html index.htm;
-        try_files $uri $uri/ /index.html;
+        try_files $uri $uri/ /international/index.html;
     }
 
     #error_page  404              /404.html;

diff --git a/src/web/src/app/components/screenshot/screenshot.component.ts b/src/web/src/app/components/screenshot/screenshot.component.ts
@@ -13,7 +13,8 @@ import { DstoreObject } from '../../dstore-client.module/utils/dstore-objects';
 export class ScreenshotComponent implements OnInit {
   constructor() {}
   metadataServer = BaseService.serverHosts.metadataServer;
-  @Input() screenshotList: string[];
+  @Input()
+  screenshotList: string[];
   select = 0;
   loading = false;
 
@@ -32,13 +33,5 @@ export class ScreenshotComponent implements OnInit {
   }
   previewImage(index: number) {
     DstoreObject.imagesPreview(this.screenshotList.map(s => this.metadataServer + '/' + s), index);
-    // const img = new Image();
-    // img.onload = () => {
-    //   this.loading = false;
-    //   this.goto(index);
-    //   window['dstore'].channel.objects.imageViewer.openBase64(CanvasUtil.getBase64Image(img));
-    // };
-    // this.loading = true;
-    // img.src = this.metadataServer + '/' + this.screenshotList[index];
   }
 }
diff --git a/src/web/src/app/components/side-nav/side-nav.component.html b/src/web/src/app/components/side-nav/side-nav.component.html
@@ -4,16 +4,14 @@
   <div class="navItem"
        routerLinkActive="active"
        [routerLink]="['index']">
-    <div class="categoryIcon"
-         [attr.style]="getStyleByID('homepage')"></div>
+    <div class="categoryIcon homepage"></div>
     <div class="title"
          i18n>Home</div>
   </div>
   <div class="navItem"
        routerLinkActive="active"
        [routerLink]="['ranking']">
-    <div class="categoryIcon"
-         [attr.style]="getStyleByID('ranking')"></div>
+    <div class="categoryIcon ranking"></div>
     <div class="title"
          i18n>Rankings</div>
   </div>
@@ -24,7 +22,7 @@
            *ngFor="let c of $cs"
            [routerLink]="['category',c.id]">
         <div class="categoryIcon"
-             [attr.style]="getStyle(c.icon)">
+             [style.background-image]="getStyle(c.icon)">
         </div>
         {{c.title}}
       </div>
@@ -36,98 +34,87 @@
          routerLinkActive="active"
          tabIndex="0"
          [routerLink]="['category','internet']">
-      <div class="categoryIcon"
-           [attr.style]="getStyleByID('internet')"></div>
+      <div class="categoryIcon internet"></div>
       <div class="title"
            i18n>Internet</div>
     </div>
     <div class="navItem"
          routerLinkActive="active"
          tabIndex="0"
          [routerLink]="['category','chat']">
-      <div class="categoryIcon"
-           [attr.style]="getStyleByID('chat')"></div>
+      <div class="categoryIcon chat"></div>
       <div class="title"
            i18n>Chat</div>
     </div>
     <div class="navItem"
          routerLinkActive="active"
          tabIndex="0"
          [routerLink]="['category','music']">
-      <div class="categoryIcon"
-           [attr.style]="getStyleByID('music')"></div>
+      <div class="categoryIcon music"></div>
       <div class="title"
            i18n>Music</div>
     </div>
     <div class="navItem"
          routerLinkActive="active"
          tabIndex="0"
          [routerLink]="['category','video']">
-      <div class="categoryIcon"
-           [attr.style]="getStyleByID('video')"></div>
+      <div class="categoryIcon video"></div>
       <div class="title"
            i18n>Video</div>
     </div>
     <div class="navItem"
          routerLinkActive="active"
          tabIndex="0"
          [routerLink]="['category','graphics']">
-      <div class="categoryIcon"
-           [attr.style]="getStyleByID('graphics')"></div>
+      <div class="categoryIcon graphics"></div>
       <div class="title"
            i18n>Graphics</div>
     </div>
     <div class="navItem"
          routerLinkActive="active"
          tabIndex="0"
          [routerLink]="['category','game']">
-      <div class="categoryIcon"
-           [attr.style]="getStyleByID('game')"></div>
+      <div class="categoryIcon game"></div>
       <div class="title"
            i18n>Game</div>
     </div>
     <div class="navItem"
          routerLinkActive="active"
          tabIndex="0"
          [routerLink]="['category','office']">
-      <div class="categoryIcon"
-           [attr.style]="getStyleByID('office')"></div>
+      <div class="categoryIcon office"></div>
       <div class="title"
            i18n>Office</div>
     </div>
     <div class="navItem"
          routerLinkActive="active"
          tabIndex="0"
          [routerLink]="['category','reading']">
-      <div class="categoryIcon"
-           [attr.style]="getStyleByID('reading')"></div>
+      <div class="categoryIcon reading"></div>
       <div class="title"
            i18n>Reading</div>
     </div>
     <div class="navItem"
          routerLinkActive="active"
          tabIndex="0"
          [routerLink]="['category','development']">
-      <div class="categoryIcon"
-           [attr.style]="getStyleByID('development')"></div>
+      <div class="categoryIcon development"></div>
       <div class="title"
            i18n>Development</div>
     </div>
     <div class="navItem"
          routerLinkActive="active"
          tabIndex="0"
          [routerLink]="['category','system']">
-      <div class="categoryIcon"
-           [attr.style]="getStyleByID('system')"></div>
+      <div class="categoryIcon system"></div>
       <div class="title"
            i18n>System</div>
     </div>
     <div class="navItem"
          routerLinkActive="active"
          tabIndex="0"
          [routerLink]="['category','others']">
-      <div class="categoryIcon"
-           [attr.style]="getStyleByID('others')"></div>
+      <div class="categoryIcon others"></div>
       <div class="title"
            i18n>Others</div>
     </div>
@@ -138,8 +125,7 @@
     <div class="navItem"
          routerLinkActive="active"
          [routerLink]="['download']">
-      <div class="categoryIcon"
-           [attr.style]="getStyleByID('downloads')"></div>
+      <div class="categoryIcon downloads"></div>
       <div class="title"
            i18n>Download</div>
       <div class="downloadCount"
@@ -150,8 +136,7 @@
     <div class="navItem"
          routerLinkActive="active"
          [routerLink]="['uninstall']">
-      <div class="categoryIcon"
-           [attr.style]="getStyleByID('uninstall')"></div>
+      <div class="categoryIcon uninstall"></div>
       <div class="title"
            i18n="uninstall-app|Uninstall applications">Uninstall</div>
     </div>

diff --git a/src/web/src/app/components/side-nav/side-nav.component.scss b/src/web/src/app/components/side-nav/side-nav.component.scss
@@ -25,14 +25,21 @@
       height: 16px;
       background-size: 100%;
       background-repeat: no-repeat;
-      background-image: var(--normal);
+      background-position-x: 0, 16px;
+      $list: homepage ranking internet chat music video graphics game office reading development
+        system others downloads uninstall;
+      @each $v in $list {
+        &.#{$v} {
+          background-image: url('/assets/icons/#{$v}.svg'), url('/assets/icons/#{$v}_active.svg');
+        }
+      }
     }
     &.active {
       border-right: 3px solid #2ca7f8;
       background-color: #d6eefe;
       color: #2ca7f8;
       .categoryIcon {
-        background-image: var(--active);
+        background-position-x: 16px, 0px;
       }
     }
     &:not(.active):hover {

diff --git a/src/web/src/app/components/side-nav/side-nav.component.ts b/src/web/src/app/components/side-nav/side-nav.component.ts
@@ -32,26 +32,13 @@ export class SideNavComponent implements OnInit {
     private appService: AppService,
   ) {}
   native = BaseService.isNative;
-  @ViewChild('nav') nav: ElementRef<HTMLDivElement>;
+  @ViewChild('nav')
+  nav: ElementRef<HTMLDivElement>;
   // category list
   cs$: Observable<Category[]>;
   // download count
   dc$: Observable<number>;
 
-  getStyle = memoize((icon: string[]) => {
-    return this.sanitizer.bypassSecurityTrustStyle(
-      `--normal: url(${icon[0]});
-       --active: url(${icon[1]})`,
-    );
-  });
-
-  getStyleByID = memoize((id: string) => {
-    return this.sanitizer.bypassSecurityTrustStyle(
-      `--normal: url("/assets/icons/${id}.svg");
-       --active: url("/assets/icons/${id}_active.svg")`,
-    );
-  });
-
   ngOnInit() {
     this.cs$ = this.categoryService.list();
     this.dc$ = merge(
@@ -83,4 +70,8 @@ export class SideNavComponent implements OnInit {
       }
     }
   }
+
+  getStyle(icons: string[]) {
+    return this.sanitizer.bypassSecurityTrustStyle(icons.map(url => `url(${url})`).join(','));
+  }
 }
diff --git a/src/web/src/environments/environment.prod.international.ts b/src/web/src/environments/environment.prod.international.ts
@@ -0,0 +1,7 @@
+export const environment = {
+  production: true,
+
+  // Server address only used in browser mode.
+  metadataServer: 'https://dstore-metadata.deepin.cn',
+  operationServer: 'https://dstore-operation-international.deepin.cn',
+};
diff --git a/src/web/src/environments/environment.ts b/src/web/src/environments/environment.ts
@@ -7,6 +7,6 @@ export const environment = {
   production: false,
 
   // Server address only used in browser mode.
-  metadataServer: 'https://dstore-metadata.deepin.cn',
-  operationServer: 'https://dstore-operation-china.deepin.cn',
+  metadataServer: 'http://server-13:8000',
+  operationServer: 'http://server-13:8100',
 };
diff --git a/src/web/src/main.ts b/src/web/src/main.ts
@@ -12,6 +12,7 @@ import { Locale } from './app/dstore/utils/locale';
 
 if (environment.production) {
   enableProdMode();
+  console.log = (...args: any[]) => {};
 }
 
 declare const require;