feat(skin): skin change buttons

src/app/components/contentTop/contentTop.html

@@ -6,8 +6,4 @@
       <a href="#/dashboard">Home</a></li>
     <li>{{ activePageTitle }}</li>
   </ul>
-  <div class="dropdown al-look">
-    <a href class="dropdown-toggle ion-settings" data-toggle="dropdown"></a>
-    <div class="dropdown-menu dropdown-menu-right" tpl-skin-panel></div>
-  </div>
 </div>

src/app/components/pageTop/_pageTop.scss

@@ -30,7 +30,7 @@ a.al-logo {
 
 .user-profile {
   float: right;
-  min-width: 190px;
+  min-width: 230px;
   margin-top: 10px;
 }
 
@@ -85,6 +85,26 @@ a.collapse-menu-link {
   }
 }
 
+.al-skin-dropdown {
+  float: right;
+  margin-top: 14px;
+  margin-right: 26px;
+
+  .tpl-skin-panel {
+    max-height: 300px;
+    overflow-y: scroll;
+    overflow-x: hidden;
+  }
+}
+
+.icon-palette {
+  display: inline-block;
+  width: 14px;
+  height: 13px;
+  background: url(../img/palette.png);
+  background-size: cover;
+}
+
 .search {
   text-shadow: none;
   color: #fff;
@@ -141,4 +161,8 @@ a.collapse-menu-link {
   a.collapse-menu-link {
     margin-left: 10px;
   }
+
+  .al-skin-dropdown {
+    display: none;
+  }
 }

src/app/components/pageTop/pageTop.html

@@ -21,5 +21,10 @@
     </div>
     <msg-center></msg-center>
     <a href class="refresh-data"><i class="fa fa-refresh"></i></a>
+
+    <div class="dropdown al-skin-dropdown">
+      <a href class="dropdown-toggle icon-palette" data-toggle="dropdown"></a>
+      <div class="dropdown-menu dropdown-menu-right" tpl-skin-panel></div>
+    </div>
   </div>
 </div>