refactor(mail) apply new blur design

src/app/pages/components/mail/MailTabCtrl.js

@@ -12,7 +12,7 @@
   function MailTabCtrl(composeModal, mailMessages) {
 
     var vm = this;
-
+    vm.navigationCollapsed = true;
     vm.showCompose = function(subject, to , text){
       composeModal.open({
         subject : subject,

src/app/pages/components/mail/composeBox/compose.html

@@ -8,9 +8,9 @@
     <i ng-click="$dismiss()" class="ion-close-round"></i>
   </span>
 </div>
-<div >
+<div>
-  <input type="text" class="form-control compose-input"  placeholder="To" ng-model="boxCtrl.to">
+  <input type="text" class="form-control compose-input default-color"  placeholder="To" ng-model="boxCtrl.to">
-  <input type="text" class="form-control compose-input"  placeholder="Subject" ng-model="boxCtrl.subject">
+  <input type="text" class="form-control compose-input default-color"  placeholder="Subject" ng-model="boxCtrl.subject">
   <div class="compose-container">
     <text-angular-toolbar ta-toolbar-class="toolbarMain" name="toolbarMain" ta-toolbar="[['h1','h2','h3','bold','italics', 'underline', 'justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull']]"></text-angular-toolbar>
     <text-angular name="htmlcontent" ta-target-toolbars='toolbarMain,toolbarFooter' ng-model="boxCtrl.text"></text-angular>

src/app/pages/components/mail/composeBox/composeModal.js

@@ -16,7 +16,7 @@
           templateUrl: 'app/pages/components/mail/composeBox/compose.html',
           controller: 'composeBoxCtrl',
           controllerAs: 'boxCtrl',
-          size: 'slim',
+          size: 'compose',
           resolve: {
             subject: function () {
               return options.subject;

src/app/pages/components/mail/detail/mailDetail.html

@@ -1,6 +1,10 @@
-<div class="message-container">
+<div class="message-container" ng-class="{'expanded': tabCtrl.navigationCollapsed}">
   <div class="message">
     <div class="row">
+      <div class="toggle-navigation-container detail-page">
+        <a href class="collapse-navigation-link ion-navicon"
+           ng-click="tabCtrl.navigationCollapsed=!tabCtrl.navigationCollapsed"></a>
+      </div>
       <button ui-sref="components.mail.label({label : detailCtrl.label})"  type="button" class="back-button btn btn-default btn-with-icon"><i
           class="ion-chevron-left"></i>Back
       </button>

src/app/pages/components/mail/list/mailList.html

@@ -1,11 +1,15 @@
-<div class="side-message-navigation">
+<div class="side-message-navigation" ng-class="{'expanded': tabCtrl.navigationCollapsed}">
   <div class="mail-messages-control side-message-navigation-item">
-    <label class="checkbox-inline custom-checkbox nowrap margin-left">
+    <div class="toggle-navigation-container">
+      <a href class="collapse-navigation-link ion-navicon"
+         ng-click="tabCtrl.navigationCollapsed=!tabCtrl.navigationCollapsed"></a>
+    </div>
+    <label class="checkbox-inline custom-checkbox nowrap">
       <input type="checkbox" id="inlineCheckbox01" value="option1">
       <span class="select-all-label">Select All</span>
     </label>
-    <button type="button" class="btn  btn-icon margin-left"><i class="ion-refresh"></i></button>
+    <button type="button" class="btn  btn-icon refresh-button"><i class="ion-refresh"></i></button>
-    <div class="btn-group margin-left" uib-dropdown>
+    <div class="btn-group" uib-dropdown>
       <button type="button" class="btn more-button" uib-dropdown-toggle>
         More <span class="caret"></span>
       </button>
@@ -24,7 +28,7 @@
           class="side-message-navigation-item little-human shineHover {{m.tag}}">
         <td>
           <div class="mail-checkbox">
-            <label class="checkbox-inline custom-checkbox nowrap margin-left">
+            <label class="checkbox-inline custom-checkbox nowrap">
               <input type="checkbox">
               <span></span>
             </label>
@@ -32,13 +36,13 @@
         </td>
         <td  ui-sref="components.mail.detail({id: m.id, label: listCtrl.label})"><img ng-src="{{m.name.split(' ')[0] | profilePicture}}" class="little-human-picture"></td>
         <td  ui-sref="components.mail.detail({id: m.id, label: listCtrl.label})">
-          <div class="margin-left">
+          <div class="name-container">
-            <div><span class="name">{{m.name.split(' ')[0] + ' ' + m.name.split(' ')[1][0]}}.</span></div>
+            <div><span class="name">{{m.name}}</span></div>
             <div><span class="tag label label-primary {{m.tag}}">{{m.tag}}</span></div>
           </div>
         </td>
         <td  ui-sref="components.mail.detail({id: m.id, label: listCtrl.label})">
-          <div class="margin-left additional-info">
+          <div class="additional-info">
             <span class="subject"> {{m.subject}}</span>
           </div>
         </td>

src/app/pages/components/mail/mail.html

@@ -3,7 +3,7 @@
     <div ba-panel ba-panel-class="xmedium-panel mail-panel">
       <div class="mail-container">
         <div class="letter-layout">
-          <div class="mail-navigation-container">
+          <div class="mail-navigation-container" ng-class="{'expanded' : !tabCtrl.navigationCollapsed}">
             <div class="compose-button">
               <button type="button" class="btn compose-button" ng-click="tabCtrl.showCompose('','','')">
                 Compose
@@ -19,17 +19,19 @@
                   Labels
                 </h5>
               </div>
-              <div class="label-item">
+              <div class="labels-container">
-                <span class="tag label work">Work</span>
+                <div class="label-item">
-              </div>
+                  <span class="tag label work">Work</span>
-              <div class="label-item">
+                </div>
-                <span class="tag label family">Family</span>
+                <div class="label-item">
-              </div>
+                  <span class="tag label family">Family</span>
-              <div class="label-item">
+                </div>
-                <span class="tag label friend">Friend</span>
+                <div class="label-item">
-              </div>
+                  <span class="tag label friend">Friend</span>
-              <div class="label-item">
+                </div>
-                <span class="tag label study">Study</span>
+                <div class="label-item">
+                  <span class="tag label study">Study</span>
+                </div>
               </div>
             </div>
             <div class="add-label-container">

src/app/theme/components/sidebar/SidebarCtrl.js

@@ -82,13 +82,13 @@
         $scope.menuExpand();
         if (!item.selected) {
           $timeout(function () {
-            item.selected = !item.selected;
+            item.expanded = !item.expanded;
             changeSelectElemTopValue();
             submenu.slideToggle();
           });
         }
       } else {
-        item.selected = !item.selected;
+        item.expanded = !item.expanded;
         changeSelectElemTopValue();
         submenu.slideToggle();
       }

src/app/theme/components/sidebar/sidebar.html

@@ -12,16 +12,16 @@
       <a ng-if="item.subMenu" href ng-click="toggleSubMenu($event, item)"
          class="al-sidebar-list-link">
         <i class="{{ item.icon }}"></i><span>{{ item.title }}</span>
-        <b class="fa" ng-class="{'fa-angle-up': item.selected, 'fa-angle-down': !item.selected}"
+        <b class="fa" ng-class="{'fa-angle-up': item.expanded, 'fa-angle-down': !item.expanded}"
            ng-if="item.subMenu"></b>
       </a>
 
       <ul ng-if="item.subMenu" class="al-sidebar-sublist"
           ng-class="{expanded: item.selected, 'slide-right': item.slideRight}">
-        <li ng-repeat="subitem in item.subMenu" ng-class="{'selected': subitem.selected, 'with-sub-menu': item.subMenu}">
+        <li ng-repeat="subitem in item.subMenu" ng-class="{'selected': subitem.selected, 'with-sub-menu': subitem.subMenu}">
           <a ng-if="subitem.subMenu" href ng-click="toggleSubMenu($event, subitem);"
              class="al-sidebar-list-link subitem-submenu-link"><span>{{ subitem.title }}</span>
-            <b class="fa" ng-class="{'fa-angle-up': subitem.selected, 'fa-angle-down': !subitem.selected}"
+            <b class="fa" ng-class="{'fa-angle-up': subitem.expanded, 'fa-angle-down': !subitem.expanded}"
                ng-if="subitem.subMenu"></b>
           </a>
           <ul ng-if="subitem.subMenu" class="al-sidebar-sublist subitem-submenu-list"

src/sass/app/_email.scss

@@ -4,6 +4,9 @@
 }
 
 .mail-panel {
+  .panel-body{
+    padding-left: 0;
+  }
   .panel-content {
     padding: 15px 22px 0 0;
   }
@@ -47,7 +50,7 @@
   .compose-button {
     margin: 7px 0;
     .btn {
-      width: 150px;
+      width: 140px;
       color: white;
       font-weight: $font-light;
       background-color: $dribble-color;
@@ -118,6 +121,7 @@
   position: relative;
   height: 550px;
   overflow: scroll;
+  transition: width 0.5s;
 }
 
 .side-message-navigation {
@@ -215,9 +219,16 @@
   }
 }
 
+.name-container{
+  margin-left: 10px;
+}
+
 .mail-checkbox {
   margin-top: 5px;
   margin-left: 6px;
+  .custom-checkbox{
+    margin-left: 5px;
+  }
 }
 
 .mail-panel .tag {
@@ -233,15 +244,15 @@
     line-height: 1.1;
   }
   &.work {
-    background-color: $primary-light;
+    background-color: $primary;
   }
 
   &.study {
-    background-color: $google-color;
+    background-color: $warning-btn;
   }
 
   &.family {
-    background-color: $warning;
+    background-color: $success;
   }
 
   &.friend {
@@ -353,6 +364,7 @@
   }
   .date {
     white-space: nowrap;
+    font-size: 12px;
   }
 }
 
@@ -519,7 +531,7 @@
 
 }
 
-@media screen and (max-width: 650px) {
+@media screen and (max-width: 760px) {
 
   .mail-navigation-container {
     width: 175px
@@ -545,39 +557,57 @@
   }
 }
 
-@media screen and (max-width: 470px) {
+@media screen and (max-width: 560px) {
-  .little-human .little-human-picture {
-    display: none;
-  }
-
   .mail-navigation-container {
-    width: 155px
+    padding: 0;
+    width: 0;
+    &.expanded {
+      width: 155px;
+    }
+    .mail-navigation {
+      font-size: 14px;
+      .new-mails {
+        left: 82%;
+        padding: 0px 5px;
+        margin-top: 0px;
+        font-size: 12px;
+      }
+      .labels {
+        margin-left: 10px;
+      }
+    }
+    .compose-button .btn {
+      width: 110px;
+    }
   }
 
-  .side-message-navigation {
+  .mail-messages-control{
+    .custom-checkbox{
+      margin-left: 5px;
+      margin-top: -2px;
+    }
+  }
+
+  .side-message-navigation, .message-container {
+    &.expanded {
+      width: 100%;
+      border: none;
+      box-shadow: none;
+    }
     width: calc(100% - 155px);
   }
 
-  .message-container {
+  div.toggle-navigation-container {
-    width: calc(100% - 155px);
+    display: inline-block;
   }
 
-  .mail-navigation-container .compose-button .btn {
+  .little-human {
-    width: 110px;
+    .name {
-  }
+      white-space: inherit;
-
+    }
-  .mail-navigation-container .mail-navigation {
+    .little-human-picture {
-    font-size: 14px;
+      display: none;
-  }
+    }
-
-  .mail-navigation-container .mail-navigation .new-mails {
-    padding: 0px 5px;
-    margin-top: 0px;
-    font-size: 12px;
-  }
-
-  .mail-navigation-container .mail-navigation, .labels {
-    margin-left: 10px;
   }
 
   .add-label-container {
@@ -666,13 +696,349 @@
   padding-right: 9px;
 }
 
-.modal .modal-dialog.modal-slim {
+.toggle-navigation-container {
+  display: none;
+  vertical-align: middle;
+  margin-left: -1px;
+  &.detail-page{
+    margin-left: 10px;
+  }
+}
+
+.collapse-navigation-link {
+  font-size: 32px;
+  color: $default;
+  &:hover{
+    color: $default;
+    opacity: .8;
+  }
+  &:visited{
+    color: $default;
+  }
+
+}
+
+.collapsed {
+  width: 0;
+}
+
+.modal .modal-dialog.modal-compose {
   width: 398px;
   position: fixed;
   bottom: 0;
   right: 0;
   max-height: 474px;
+
+  .form-control, .bootstrap-tagsinput input {
+    @include placeholderStyle($default-text, 1);
+    color: $default-text;
+  }
+  .ta-toolbar {
+    .btn {
+      border-width: 1px;
+      border-radius: 0;
+      color: $default-text;
+      border-color: transparent;
+      &.active {
+        box-shadow: none;
+        background-color: rgba(0, 0, 0, .12);
+      }
+    }
+  }
+  @include overrideColors($default-text)
+}
+
+body.badmin-transparent {
+  .mail-navigation-container {
+    overflow: hidden;
+    width: 250px;
+    padding: 0;
+    .mail-navigation {
+      margin-left: 0;
+      text-align: center;
+      .new-mails {
+        position: absolute;
+        left: 85%;
+        padding: 1px 6px;
+        border: 1px solid;
+        background-color: transparent;
+      }
+      &.active {
+        background: rgba(255, 255, 255, 0.2);
+        color: white;
+        transition: background-color .5s ease;
+        .new-mails {
+          background-color: transparent;
+          color: $default;
+        }
+        &:hover {
+          background-color: rgba(255, 255, 255, 0.3);
+        }
+      }
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.1);
+      }
+    }
+  }
+
+  .message-container, .side-message-navigation{
+    width: calc(100% - 250px);
+    border-bottom-right-radius: 5px;
+    border-top-right-radius: 5px;
+    border-left: 1px solid rgba(0, 0, 0, 0.12);
+    box-shadow: -1px 0px 0px 0px rgba(255, 255, 255, 0.12);
+  }
+
+  .side-message-navigation {
+    overflow: hidden;
+    padding: 0;
+  }
+
+  .labels-container {
+    text-align: center;
+    padding-right: 8px;
+    .label-item {
+      display: inline-block;
+    }
+  }
+
+  .labels, .add-label-container {
+    margin-left: 0;
+  }
+
+  .add-label-container {
+    margin-top: 10px;
+    text-align: center;
+  }
+
+  .labels-title {
+    text-align: center;
+    .label-header {
+      width: 100%;
+      margin-bottom: 5px;
+    }
+    padding-left: 0;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+    box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
+  }
+
+  .compose-button {
+    text-align: center;
+    .btn {
+      border: $default 2px solid;
+      background-color: transparent;
+    }
+  }
+
+  .side-message-navigation .side-message-navigation-item {
+    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+    &.work, &.study, &.family, &.friend {
+      border-left: none;
+    }
+  }
+
+  .mail-messages-control {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+    box-shadow: 0px 0px 1px 0px rgba(255, 255, 255, 0.12);
+    padding-right: 0;
+    .btn {
+      border: none;
+      width: auto;
+      &:focus, &:hover {
+        color:$default;
+        opacity: 0.8;
+        box-shadow: none;
+      }
+    }
+    .refresh-button{
+      margin-left: 10px;
+    }
+  }
+
+  .little-human {
+    font-weight: $font-light;
+    &:hover {
+      color: $default;
+      background-color: rgba(255, 255, 255, 0.12);
+    }
+    .subject {
+      font-weight: $font-light;
+      margin: 0 30px;
+      font-size: 16px;
+    }
+    .date {
+      margin-right: 10px;
+    }
+  }
+
+  .mail-body-part {
+    width: calc(100% - 50px);
+    opacity: 0.8;
+  }
+
+  .name-h {
+    font-weight: $font-light;
+    &.second-name {
+      margin: 5px 0;
+    }
+  }
+
+  .person-info .human-picture {
+    margin-top: -65px;
+  }
+
+  .mail-tag.tag.label {
+    margin-top: 0;
+  }
+
+  .back-button {
+    margin-left: 45px;
+  }
+
+  .phone-email i {
+    color: $default;
+  }
+
+  .message-details {
+    padding: 5px 0 5px 30px;
+  }
+
+  .message-body, .attachment {
+    padding-left: 30px;
+  }
+
+  .person-info {
+    padding-left: 45px;
+  }
+
+  @media screen and (max-width: 1199px) {
+    .person-info {
+      .human-picture {
+        margin-top: -35px;
+      }
+      .name {
+        margin-top: 20px;
+      }
+    }
+    .mail-tag.tag.label {
+      margin-top: 10px;
+    }
+  }
+
+  @media screen and (max-width: 990px) {
+    .person-info {
+      .human-picture {
+        margin-top: 5px;
+      }
+    }
+
+    .mail-navigation-container {
+      width: 200px
+    }
+
+    .side-message-navigation {
+      width: calc(100% - 200px);
+    }
+
+    .message-container {
+      width: calc(100% - 200px);
+    }
+    .back-button {
+      margin-left: 10px;
+    }
+
+    .message-details {
+      padding: 5px 0 5px 0;
+    }
+
+    .message-body, .attachment {
+      padding-left: 0;
+    }
+
+    .person-info {
+      padding-left: 0;
+    }
+
+  }
+
+  @media screen and (max-width: 760px) {
+
+    .mail-navigation-container {
+      width: 175px
+    }
+
+    .side-message-navigation {
+      width: calc(100% - 175px);
+    }
+
+    .message-container {
+      width: calc(100% - 175px);
+    }
+  }
+
+  @media screen and (max-width: 560px) {
+    .mail-navigation-container {
+      width: 0;
+      &.expanded {
+        width: 155px;
+      }
+      .mail-navigation {
+        font-size: 14px;
+        .new-mails {
+          left: 82%;
+          padding: 0px 5px;
+          margin-top: 0px;
+          font-size: 12px;
+        }
+        .labels {
+          margin-left: 10px;
+        }
+      }
+      .compose-button .btn {
+        width: 110px;
+      }
+    }
+
+    .mail-messages-control{
+      .custom-checkbox{
+        margin-left: 5px;
+        margin-top: -2px;
+      }
+    }
+
+    .side-message-navigation, .message-container {
+      &.expanded {
+        width: 100%;
+        border: none;
+        box-shadow: none;
+      }
+      width: calc(100% - 155px);
+    }
+
+    .toggle-navigation-container {
+      display: inline-block;
+    }
+
+    .little-human {
+      .name {
+        white-space: inherit;
+      }
+      .little-human-picture {
+        display: none;
+      }
+    }
+
+    .add-label-container {
+      padding-left: 0;
+      font-size: 13px;
+      font-weight: $font-light;
+    }
+
+  }
+
 }
 
 
 
+
+

src/sass/theme/components/_sidebar.scss

@@ -20,12 +20,12 @@ $angle-right: "\f101";
   list-style: none;
 }
 
-.al-sidebar-sublist .subitem-submenu-list{
+.al-sidebar-sublist .subitem-submenu-list {
   padding-left: 15px;
 }
 
-.subitem-submenu-link{
+.subitem-submenu-link {
-  .fa{
+  .fa {
     top: 7px;
   }
 }
@@ -128,15 +128,14 @@ a.al-sidebar-list-link {
         color: $success;
       }
     }
-    > &.selected:not(.with-sub-menu)  {
+    &.selected:not(.with-sub-menu) > a {
-      a {
+      border: none;
-        border: none;
+      background-color: $success;
-        background-color: $success;
+      &:hover {
-        &:hover {
+        color: $default;
-          color: $default;
-        }
       }
     }
+
   }
 }
 

src/sass/theme/skins/_02_transparent.scss

@@ -2,7 +2,7 @@ body.badmin-transparent {
   @include overrideColors(#fff);
   @include overridePanelBg(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.9));
   .default-color{
-    color: $default-text;
+    color: $default-text!important;;
   }
   .panel.panel-blur{
     border-radius: 5px;