Rounded calendar UI

master
David Benqué 3 years ago
parent b7d43eb9f4
commit bc43ec49e8

@ -2,6 +2,7 @@
@import (reference) '../../customize/src/less2/include/sidebar-layout.less'; @import (reference) '../../customize/src/less2/include/sidebar-layout.less';
@import (reference) '../../customize/src/less2/include/tools.less'; @import (reference) '../../customize/src/less2/include/tools.less';
@import (reference) '../../customize/src/less2/include/avatar.less'; @import (reference) '../../customize/src/less2/include/avatar.less';
@import (reference) '../../customize/src/less2/include/variables.less';
&.cp-app-calendar { &.cp-app-calendar {
@ -117,6 +118,7 @@
.tui-full-calendar-popup-container { .tui-full-calendar-popup-container {
background: @cp_flatpickr-bg; background: @cp_flatpickr-bg;
color: @cryptpad_text_col; color: @cryptpad_text_col;
border-radius: @variables_radius;
.tui-full-calendar-icon:not(.tui-full-calendar-calendar-dot):not(.tui-full-calendar-dropdown-arrow):not(.tui-full-calendar-ic-checkbox) { .tui-full-calendar-icon:not(.tui-full-calendar-calendar-dot):not(.tui-full-calendar-dropdown-arrow):not(.tui-full-calendar-ic-checkbox) {
display: none; display: none;
} }
@ -182,6 +184,11 @@
.tui-full-calendar-section-allday { .tui-full-calendar-section-allday {
width: 100%; width: 100%;
height: 32px; height: 32px;
border-radius: @variables_radius;
.tui-full-calendar-ic-checkbox {
margin-left: 5px;
border-radius: 2px;
}
} }
} }
} }
@ -255,7 +262,8 @@
align-items: center; align-items: center;
margin-bottom: 20px; margin-bottom: 20px;
input { input {
width: 100px; width: 80px;
margin-right: 5px;
} }
} }
} }
@ -273,6 +281,26 @@
#cp-toolbar .cp-calendar-browse { #cp-toolbar .cp-calendar-browse {
display: flex; display: flex;
align-items: center; align-items: center;
button {
color: @cp_toolbar-fg;
border-color: @cp_toolbar-fg;
&:hover {
background-color: fade(@cp_toolbar-fg, 50%); //XXX check light theme
cursor: pointer;
}
}
}
.cp-calendar-newevent {
&:hover {
cursor: pointer;
}
}
.cp-toolbar-bottom-right button, .cp-toolbar-user button {
&:hover {
cursor: pointer;
}
} }
#cp-sidebarlayout-leftside { #cp-sidebarlayout-leftside {
@ -300,7 +328,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: 5px 0; margin: 5px 0 10px 0;
&:not(:first-child) { &:not(:first-child) {
margin-top: 30px; margin-top: 30px;
} }
@ -310,12 +338,20 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 5px; padding: 5px;
border-radius: @variables_radius;
background-color: @cp_sidebar-left-bg;
&:not(.cp-unclickable) { &:not(.cp-unclickable) {
cursor: pointer; cursor: pointer;
} }
.cp-dropdown-container { .cp-dropdown-container {
position: initial; position: initial;
} }
button.cp-calendar-actions {
background-color: transparent;
&:hover {
background-color: @cp_sidebar-left-bg;
}
}
&.cp-ghost { &.cp-ghost {
padding: 0; padding: 0;
button { button {
@ -326,12 +362,19 @@
justify-content: space-between; justify-content: space-between;
background: transparent; background: transparent;
border: 1px solid @cryptpad_text_col; border: 1px solid @cryptpad_text_col;
border-radius: @variables_radius;
padding: 5px;
height: 36px; height: 36px;
font: @colortheme_app-font; font: @colortheme_app-font;
align-items: center; align-items: center;
color: @cryptpad_text_col; color: @cryptpad_text_col;
&:hover { &:hover {
background: @cp_sidebar-left-active; background-color: @cp_sidebar-left-active;
color: @cp_sidebar-left-active-fg;
border: 0px;
}
i {
margin-left: 5px;
} }
} }
} }
@ -339,21 +382,21 @@
margin-bottom: 10px; margin-bottom: 10px;
} }
&:hover { &:hover {
background: fade(@cryptpad_text_col, 10%); background: @cp_sidebar-left-item-bg;
} }
&.cp-restricted { &.cp-restricted {
color: @cp_drive-header-fg; color: @cp_drive-header-fg;
} }
.cp-calendar-icon { .cp-calendar-icon {
width: 36px; width: 30px;
display: inline-flex; display: inline-flex;
height: 36px; height: 30px;
margin: -5px;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: @variables_radius;
} }
&.cp-active { &.cp-active {
background: @cp_sidebar-left-active; background-color: @cp_sidebar-left-item-bg;
.cp-calendar-inactive { .cp-calendar-inactive {
display: none; display: none;
} }

@ -599,7 +599,7 @@ define([
text: '', text: '',
options: options, // Entries displayed in the menu options: options, // Entries displayed in the menu
common: common, common: common,
buttonCls: 'btn btn-cancel fa fa-ellipsis-h small' buttonCls: 'btn btn-default fa fa-gear small cp-calendar-actions'
}; };
return UIElements.createDropdown(dropdownConfig)[0]; return UIElements.createDropdown(dropdownConfig)[0];
}; };

@ -135,6 +135,7 @@ define(function() {
whiteboard: 'cptools-whiteboard', whiteboard: 'cptools-whiteboard',
todo: 'cptools-todo', todo: 'cptools-todo',
contacts: 'fa-address-book', contacts: 'fa-address-book',
calendar: 'fa-calendar',
kanban: 'cptools-kanban', kanban: 'cptools-kanban',
doc: 'fa-file-word-o', doc: 'fa-file-word-o',
presentation: 'fa-file-powerpoint-o', presentation: 'fa-file-powerpoint-o',

Loading…
Cancel
Save