Merge branch 'rebrand-ui' of https://github.com/frappe/frappe into rebrand-ui

This commit is contained in:
Suraj Shetty 2020-07-28 17:32:05 +05:30
parent e44c2bfb71
commit 66b06b42f3
9 changed files with 106 additions and 96 deletions

View file

@ -33,6 +33,11 @@ frappe.views.CalendarView = class CalendarView extends frappe.views.ListView {
});
}
setup_page() {
this.hide_page_form = true;
super.setup_page();
}
setup_view() {
}
@ -180,7 +185,9 @@ frappe.views.Calendar = Class.extend({
.removeClass("fc-state-default")
.addClass("btn btn-default");
this.$wrapper.find(".fc-right").addClass("btn-group");
this.$wrapper
.find('.fc-month-button, .fc-agendaWeek-button, .fc-agendaDay-button')
.wrapAll('<div class="btn-group" />');
this.$wrapper.find('.fc-prev-button span')
.attr('class', '').html(frappe.utils.icon('left'));
@ -198,7 +205,7 @@ frappe.views.Calendar = Class.extend({
btn_group.find(".btn").on("click", function() {
btn_group.find(".btn").removeClass("active");
$(this).addClass("active");
});
})
},
field_map: {
"id": "name",
@ -222,9 +229,8 @@ frappe.views.Calendar = Class.extend({
this.cal_options = {
locale: frappe.boot.user.language || "en",
header: {
left: 'today',
center: 'prev, title, next',
right: 'month, agendaWeek, agendaDay'
left: 'prev, title, next',
right: 'today, month, agendaWeek, agendaDay'
},
editable: true,
selectable: true,

View file

@ -1,9 +1,10 @@
.fc-unthemed {
padding: 0 10px 0 30px;
padding: 20px;
color: var(--text-light);
}
.fc-toolbar {
padding-top: 30px;
// padding-top: 30px;
padding-bottom: 15px;
margin-bottom: 0px !important;
}
@ -38,11 +39,11 @@ th.fc-widget-header {
}
.fc-unthemed td.fc-sun {
background: var(--gray-50);
background: var(--highlight-color);
}
.fc-unthemed .fc-today {
background-color: $white !important;
background-color: var(--fg-color) !important;
.fc-day-number {
background-color: var(--blue-500);
@ -108,7 +109,7 @@ th.fc-day-header {
}
}
.fc-center h2 {
.fc-left h2 {
font-size: $font-size-lg;
font-weight: 500;
line-height: 28px;
@ -126,28 +127,22 @@ th.fc-day-header {
}
.fc-right button {
width: 64px;
min-width: 64px;
}
.fc-left button {
width: 80px;
svg {
margin-right: 5px;
}
// svg {
// margin-right: 5px;
// }
}
.fc-prev-button, .fc-next-button {
width: 28px;
display: flex;
justify-content: center;
align-items: center;
}
.fc-state-active {
box-shadow: none !important;
background: var(--gray-500) !important;
color: white !important;
color: var(--fg-color) !important;
z-index: 0 !important;
}
@ -157,16 +152,54 @@ th.fc-day-header {
padding: 1px 5px !important;
}
.result .footnote-area {
padding: 15px 10px 0 30px;
// .result .footnote-area {
// padding: 15px 10px 0 30px;
// }
.fc-time-grid .fc-slats .fc-minor td {
border-top-style: none !important;
}
.fc-highlight {
background: var(--blue-100) !important;
}
.fc-left {
.fc-prev-button, .fc-next-button {
width: 28px;
display: flex;
justify-content: center;
align-items: center;
background: var(--gray-100);
box-shadow: none;
border: none;
// TODO: Fix color palette
use {
stroke-width: 0.9;
}
}
}
.fc-time-grid .fc-slats td {
height: 2.5em !important;
}
.fc-day-grid {
border-bottom: 1px solid var(--gray-300);
// height: 2em !important;
}
.fc-divider {
display: none;
}
.fc .fc-axis {
color: var(--gray-600) !important;
text-align: center;
width: 60px !important;
}
// REDESIGN-TODO: Fix color palette
// @mixin fc-bg-color($color){
// $light: #{"${color}-light"};
// $extra-light: #{"${color}-extra-light"};

View file

@ -33,4 +33,5 @@
--shadow-inset: var(--fg-color);
--border-color: var(--gray-600);
--highlight-color: var(--gray-700);
}

View file

@ -441,7 +441,7 @@ html, body {
.widget-content {
@include flex(flex, space-between, null, null);
padding-top: 25px;
padding-top: var(--padding-xl);
.number {
font-weight: 600;
@ -487,10 +487,18 @@ html, body {
.green-stat {
color: var(--dark-green-500);
use {
stroke: var(--dark-green-500);
}
}
.red-stat {
color: var(--red-500);
use {
stroke: var(--red-500);
}
}
.grey-stat {

View file

@ -1,8 +1,22 @@
.datatable {
--dt-border-color: var(--gray-100);
--dt-primary-color: $primary;
--dt-light-bg: var(--highlight-color);
--dt-light-red: var(--red-50);
--dt-light-yellow: var(--yellow-50);
--dt-orange: var(--orange-500);
--dt-text-color: var(--text-light);
--dt-text-light: var(--bg-color);
--dt-spacer-1: 0.25rem;
--dt-spacer-2: 0.5rem;
--dt-spacer-3: 1rem;
--dt-border-radius: var(--border-radius);
background-color: $white;
--dt-cell-bg: var(--fg-color);
--dt-border-color: var(--border-color);
--dt-border-radius: var(--border-radius);
--dt-header-cell-bg: var(--fg-color);
--dt-selection-highlight-color: var(--highlight-color);
background-color: var(--fg-color);
margin-left: -5px;
margin-top: 0px;
font-size: var(--text-md);
@ -15,9 +29,6 @@
}
.dt-header {
// --dt-header-cell-bg: white;
// --dt-cell-bg: white;
--dt-text-color: $text-muted;
.dt-row[data-is-filter] {
display: flex !important;
@ -58,9 +69,6 @@
min-height: 100px;
scrollbar-width: thin;
.dt-cell {
--dt-text-color: $text-muted;
}
}
.dt-cell__edit {
@ -82,9 +90,9 @@
}
.dt-filter.dt-input {
border-radius: $border-radius;
border-radius: var(--border-radius);
height: 100%;
background-color: $gray-100;
background-color: var(--control);
}
.dt-scrollable {
@ -102,13 +110,7 @@
.dt-scrollable--highlight-all {
.dt-cell__content {
background: var(--gray-50)!important;
}
}
.dt-scrollable .dt-row--highlight {
.dt-cell__content {
background: var(--gray-50)!important;
background: var(--dt-selection-highlight-color);
}
}

View file

@ -57,7 +57,7 @@
.image-view-item:hover {
border: none;
background-color: var(--control-bg);
background-color: var(--highlight-color);
.list-row-checkbox {
&:before {

View file

@ -98,7 +98,7 @@
justify-content: center;
display: flex;
align-items: center;
color: var(--gray-700);
color: var(--text-light);
background-color: var(--fg-color);
box-shadow: none;
height: 27px;

View file

@ -89,7 +89,7 @@
font-size: var(--text-md);
&:hover {
background-color: var(--control-bg);
background-color: var(--highlight-color);
}
&:last-child {
border-bottom: 0px;
@ -163,12 +163,20 @@
.list-row-col {
flex: 1;
margin-right: 15px;
a {
color: var(--text-light);
}
}
.list-subject {
flex: 2;
justify-content: start;
a {
color: var(--text-color);
}
.level-item {
margin-right: 8px;
}
@ -244,7 +252,7 @@ input.list-check-all, input.list-row-checkbox {
font-size: var(--text-md);
&:hover {
background-color: var(--control-bg);
background-color: var(--highlight-color);
}
// @media (max-width: $screen-xs) {
@ -256,7 +264,7 @@ input.list-check-all, input.list-row-checkbox {
// }
&--head {
background-color: var(--control-bg);
background-color: var(--highlight-color);
border-bottom: 1px solid $border-color;
cursor: auto;
}
@ -493,52 +501,3 @@ input.list-check-all, input.list-row-checkbox {
// margin-top: 5px;
// }
// input[type="checkbox"] {
// position: relative;
// visibility: hidden;
// // dispxlay: none;
// &:before {
// position: absolute;
// font-family: 'FontAwesome';
// // width: 4px;
// // height: 4px;
// content: '\f096';
// // content: ' ';
// // background-image: url('../icons/frapicon-checkbox.svg');
// // visibility: visible;
// // font-style: normal;
// // font-weight: normal;
// // font-variant: normal;
// // text-transform: none;
// // line-height: 14px;
// // display: inline-block;
// // font-size: 14px;
// // color: @text-extra-muted;
// // .transition(150ms color);
// // left: 0px;
// // display: inline-block;
// // vertical-align: middle;
// // width: 45px;
// // height: 45px;
// // background-size: 50%;
// // content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='lightgrey' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-image'><rect x='3' y='3' width='18' height='18' rx='2' ry='2'/><circle cx='8.5' cy='8.5' r='1.5'/><polyline points='21 15 16 10 5 21'/></svg>");
// // background: url('../icons/frapicon-checkbox.svg') 0px center no-repeat;
// }
// &:focus:before {
// color: $text-muted;
// }
// &:checked:before {
// content: '\f14a';
// font-size: 13px;
// color: $checkbox-color;
// }
// &:focus {
// outline: none;
// }
// }

View file

@ -173,6 +173,7 @@ $card-box-shadow: 0px 0px 1px rgba(17, 43, 66, 0.16), 0px 1px 3px rgba(17, 43, 6
--shadow-inset: var(--gray-100);
--border-color: var(--gray-100);
--highlight-color: var(--gray-50);
// Border Sizes
--border-radius-sm: 4px;