Address Livio comments

smartdevicelink · Aug 7, 2021 · 3550773 · 3550773
1 parent cda7adf
commit 3550773
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 27 deletions.
diff --git a/app/model/sdl/MediaModel.js b/app/model/sdl/MediaModel.js
@@ -158,10 +158,10 @@ SDL.SDLMediaModel = SDL.ABSAppModel.extend({
         case SDL.SDLModel.data.imageModeList[0]:this.set('mode','day-mode');break;
         case SDL.SDLModel.data.imageModeList[1]:this.set('mode','night-mode');break;
         case SDL.SDLModel.data.imageModeList[2]:this.set('mode','high-lighted-mode');break;
-        default:this.set('mode','');
+        default:this.set('mode','day-mode');
         }
     }else this.set('mode','');
-  }.observes('SDL.SDLModel.data.imageMode'),
+  }.observes('SDL.SDLModel.data.imageMode', 'this.isTemplate'),
 
   onDeleteApplication: function(appID) {
 

diff --git a/app/model/sdl/NonMediaModel.js b/app/model/sdl/NonMediaModel.js
@@ -97,6 +97,8 @@ SDL.SDLNonMediaModel = SDL.ABSAppModel.extend({
     this.resetGlobalProperties();
   },
 
+  isTemplate:false,
+
   /**
    * Method hides sdl activation button and sdl application
    *
@@ -245,6 +247,8 @@ SDL.SDLNonMediaModel = SDL.ABSAppModel.extend({
       } else {
         this.appInfo.set('mainImage', 'images/sdl/audio_icon.jpg');
       }
+
+      this.set('isTemplate', 'DYNAMIC' == params.graphic.imageType && params.graphic.isTemplate === true);
     }
 
     // Magic number is a count of Preset Buttons on HMI = 8
@@ -272,27 +276,20 @@ SDL.SDLNonMediaModel = SDL.ABSAppModel.extend({
     return;
   },
 
-  classNameBindings: [
-    'dayMode',
-    'nightMode',
-    'highLightedMode'
-  ],
-
-  dayMode:false,
-  nightMode:false,
-  highLightedMode:false,
-
-    /**
-     * @description Method applies image mode view for model.
-     * @param {Number}
-     */
-  setMode:function(mode){
+  /**
+   * @description Callback for display image mode change.
+   */
+   imageModeChanged: function() { 
+    const mode = SDL.SDLModel.data.imageMode;
     if(this.isTemplate){
-      mode = SDL.SDLModel.data.imageModeList.includes(mode) ? mode : SDL.SDLModel.data.imageModeList[0];
-      this.set('dayMode', mode == SDL.SDLModel.data.imageModeList[0]);
-      this.set('nightMode', mode == SDL.SDLModel.data.imageModeList[1]);
-      this.set('highLightedMode', mode == SDL.SDLModel.data.imageModeList[2]);
-    }
-  },
+      switch(mode){
+        case SDL.SDLModel.data.imageModeList[0]:this.set('mode','day-mode');break;
+        case SDL.SDLModel.data.imageModeList[1]:this.set('mode','night-mode');break;
+        case SDL.SDLModel.data.imageModeList[2]:this.set('mode','high-lighted-mode');break;
+        default:this.set('mode','day-mode');
+        }
+    }else this.set('mode','');
+  }.observes('SDL.SDLModel.data.imageMode', 'this.isTemplate'),
+
 }
 );
diff --git a/app/view/info/nonMediaView.js b/app/view/info/nonMediaView.js
@@ -95,7 +95,8 @@ SDL.InfoNonMedia = Em.ContainerView.create(
             ],
 
             template: Ember.Handlebars.compile(
-              '<img width="150px" onerror="this.style.display=\'none\'" {{bindAttr src="SDL.SDLController.model.appInfo.mainImage"}}>'
+              '<img {{bindAttr class="SDL.SDLController.model.isTemplate:ico-overlay"}} {{bindAttr class="SDL.SDLController.model.mode"}} {{bindAttr class="SDL.SDLController.model.isTemplate"}} />'+
+              '<img onerror="this.style.display=\'none\'" {{bindAttr src="SDL.SDLController.model.appInfo.mainImage"}}>'
             )
           }
         ),

diff --git a/css/sdl.css b/css/sdl.css
@@ -221,6 +221,28 @@
 
 #info_nonMedia .app_image img {
     border: 1px solid #393939;
+    width: 150px;
+    height: 150px;
+    position: absolute;
+}
+
+#info_nonMedia .app_image img.ico-overlay.is-template {
+    background-repeat: no-repeat;
+    background-size: cover;
+    opacity: 0.4;
+    z-index: 1001;
+}
+
+#info_nonMedia .app_image img.ico-overlay.is-template.day-mode {
+    background-image: url(../images/template/imagetype-pattern-day.png) !important;
+}
+
+#info_nonMedia .app_image img.ico-overlay.is-template.night-mode {
+    background-image: url(../images/template/imagetype-pattern-night.png) !important;
+}
+
+#info_nonMedia .app_image img.ico-overlay.is-template.high-lighted-mode {
+    background-image: url(../images/template/imagetype-pattern-highlighted.png) !important;
 }
 
 #sdl_options .list {
@@ -671,7 +693,7 @@
     -webkit-border-radius: 2px;
     width: 109px;
     height: 109px;    
-    background:url(../images/template/imagetype-pattern-day.png);
+    background-image:url(../images/template/imagetype-pattern-day.png) !important;
     background-repeat: no-repeat;
     background-size: cover;
     opacity: 0.4;
@@ -685,7 +707,7 @@
     -webkit-border-radius: 2px;
     width: 109px;
     height: 109px;
-    background:url(../images/template/imagetype-pattern-night.png);
+    background-image:url(../images/template/imagetype-pattern-night.png) !important;
     background-repeat: no-repeat;
     background-size: cover;
     opacity: 0.4;
@@ -699,7 +721,7 @@
     -webkit-border-radius: 2px;
     width: 109px;
     height: 109px;
-    background:url(../images/template/imagetype-pattern-highlighted.png);
+    background-image:url(../images/template/imagetype-pattern-highlighted.png) !important;
     background-repeat: no-repeat;
     background-size: cover;
     opacity: 0.4;