Merge branch 'mailbox' into staging

This commit is contained in:
yflory
2019-05-23 15:49:18 +02:00
17 changed files with 1135 additions and 294 deletions

View File

@@ -0,0 +1,43 @@
@import (reference) "./colortheme-all.less";
.notifications_main() {
--LessLoader_require: LessLoader_currentFile();
}
& {
@notif-height: 50px;
.cp-notifications-container {
max-width: 300px;
display: flex;
flex-flow: column;
.cp-notification {
height: @notif-height;
display: flex;
.cp-notification-content {
flex: 1;
min-width: 0;
p {
word-break: break-all;
}
&.cp-clickable {
cursor: pointer;
&:hover {
background-color: rgba(0,0,0,0.1);
}
}
}
.cp-notification-dismiss {
color: black;
width: 25px;
height: 100%;
display: none;
align-items: center;
justify-content: center;
span {
cursor: pointer;
}
}
}
}
}

View File

@@ -9,6 +9,7 @@
@import (reference) "./icons.less";
@import (reference) "./modal.less";
@import (reference) "./help.less";
@import (reference) "./notifications.less";
.toolbar_vars (
@color: @colortheme_default-color, // Color of the text for the toolbar
@@ -66,6 +67,7 @@
}
.help_main(@color, @bg-color);
.notifications_main();
.dropdown_main();
.history_main();
.iconColors_main();
@@ -567,6 +569,22 @@
}
.cp-toolbar-user {
height: @toolbar_line-height;
.cp-toolbar-notifications {
height: @toolbar_line-height;
width: @toolbar_line-height;
margin-left: 0;
button {
height: @toolbar_line-height;
width: @toolbar_line-height;
font-size: 15px;
margin-top: -1px;
.cp-dropdown-button-title {
transform: scale(0.5);
bottom: -5px;
right: -5px;
}
}
}
.cp-toolbar-new {
height: @toolbar_line-height;
width: @toolbar_line-height;
@@ -834,7 +852,7 @@
line-height: 28px; // padding + border
}
}
.cp-toolbar-link, .cp-toolbar-new {
.cp-toolbar-link, .cp-toolbar-new, .cp-toolbar-notifications {
font-size: 48px;
line-height: 64px;
width: @toolbar_top-height;
@@ -849,14 +867,13 @@
}
transition: all 0.15s;
}
.cp-toolbar-new {
.cp-toolbar-notifications, .cp-toolbar-new {
background-color: rgba(0,0,0,0.2);
&:hover {
background-color: rgba(0,0,0,0.3);
}
text-align: center;
font-size: 32px;
margin-left: 10px;
&> button {
display: flex;
align-items: center;
@@ -884,6 +901,34 @@
}
}
}
.cp-toolbar-notifications {
margin-left: 10px;
.cp-notifications-empty {
color: black;
padding: 5px;
}
button {
position: relative;
&.fa-bell-o {
cursor: default;
}
.cp-dropdown-button-title {
position: absolute;
bottom: 0;
right: 0;
font-size: 14px;
border: 1px solid;
border-radius: 50%;
width: 20px;
height: 20px;
line-height: 16px;
&.cp-notifications-small {
font-size: 10px;
line-height: 17px;
}
}
}
}
.cp-toolbar-link {
display: inline-flex;
align-items: center;
@@ -917,6 +962,7 @@
order: 6;
line-height: @toolbar_top-height;
color: white;
.cp-toolbar-notifications { order: 1; }
.cp-toolbar-new { order: 2; }
.cp-toolbar-user-dropdown { order: 3; }
.cp-toolbar-backup { order: 4; } // TODO drive migration to secure iframe