jinql
/
blur-admin
mirror of https://github.com/akveo/blur-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

refactor(mail) apply new blur design

pull/3/head
alex 2016-02-11 20:00:26 +03:00
parent 507c220bb6
commit a61ff3bf20
11 changed files with 448 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/pages/components/mail/MailTabCtrl.js
View File

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

6
src/app/pages/components/mail/composeBox/compose.html
View File

@ -8,9 +8,9 @@
<i ng-click="$dismiss()" class="ion-close-round"></i>
</span>
</div>
<div >
<input type="text" class="form-control compose-input" placeholder="To" ng-model="boxCtrl.to">
<input type="text" class="form-control compose-input" placeholder="Subject" ng-model="boxCtrl.subject">
<div>
<input type="text" class="form-control compose-input default-color" placeholder="To" ng-model="boxCtrl.to">
<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>

2
src/app/pages/components/mail/composeBox/composeModal.js
View File

@ -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;

6
src/app/pages/components/mail/detail/mailDetail.html
View File

@ -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>

20
src/app/pages/components/mail/list/mailList.html
View File

@ -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>
<div class="btn-group margin-left" uib-dropdown>
<button type="button" class="btn btn-icon refresh-button"><i class="ion-refresh"></i></button>
<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><span class="name">{{m.name.split(' ')[0] + ' ' + m.name.split(' ')[1][0]}}.</span></div>
<div class="name-container">
<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>

26
src/app/pages/components/mail/mail.html
View File

@ -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">
<span class="tag label work">Work</span>
</div>
<div class="label-item">
<span class="tag label family">Family</span>
</div>
<div class="label-item">
<span class="tag label friend">Friend</span>
</div>
<div class="label-item">
<span class="tag label study">Study</span>
<div class="labels-container">
<div class="label-item">
<span class="tag label work">Work</span>
</div>
<div class="label-item">
<span class="tag label family">Family</span>
</div>
<div class="label-item">
<span class="tag label friend">Friend</span>
</div>
<div class="label-item">
<span class="tag label study">Study</span>
</div>
</div>
</div>
<div class="add-label-container">

4
src/app/theme/components/sidebar/SidebarCtrl.js
View File

@ -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();
}

6
src/app/theme/components/sidebar/sidebar.html
View File

@ -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"

428
src/sass/app/_email.scss
View File

@ -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) {
.little-human .little-human-picture {
display: none;
}
@media screen and (max-width: 560px) {
.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 {
width: calc(100% - 155px);
div.toggle-navigation-container {
display: inline-block;
}
.mail-navigation-container .compose-button .btn {
width: 110px;
}
.mail-navigation-container .mail-navigation {
font-size: 14px;
}
.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;
.little-human {
.name {
white-space: inherit;
}
.little-human-picture {
display: none;
}
}
.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;
}
}
}

19
src/sass/theme/components/_sidebar.scss
View File

@ -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{
.fa{
.subitem-submenu-link {
.fa {
top: 7px;
}
}
@ -128,15 +128,14 @@ a.al-sidebar-list-link {
color: $success;
}
}
> &.selected:not(.with-sub-menu) {
a {
border: none;
background-color: $success;
&:hover {
color: $default;
}
&.selected:not(.with-sub-menu) > a {
border: none;
background-color: $success;
&:hover {
color: $default;
}
}
}
}

2
src/sass/theme/skins/_02_transparent.scss
View File

@ -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;