From 66b06b42f3a2674bccb716dfdcbbcd6ea35cc4d7 Mon Sep 17 00:00:00 2001 From: Suraj Shetty Date: Tue, 28 Jul 2020 17:32:05 +0530 Subject: [PATCH] Merge branch 'rebrand-ui' of https://github.com/frappe/frappe into rebrand-ui --- .../js/frappe/views/calendar/calendar.js | 16 +++-- frappe/public/scss/calendar.scss | 71 ++++++++++++++----- frappe/public/scss/dark.scss | 1 + frappe/public/scss/desktop.scss | 10 ++- frappe/public/scss/frappe-datatable.scss | 36 +++++----- frappe/public/scss/image-view.scss | 2 +- frappe/public/scss/kanban.scss | 2 +- frappe/public/scss/list.scss | 63 +++------------- frappe/public/scss/variables.scss | 1 + 9 files changed, 106 insertions(+), 96 deletions(-) diff --git a/frappe/public/js/frappe/views/calendar/calendar.js b/frappe/public/js/frappe/views/calendar/calendar.js index a72a43268b..19e0058027 100644 --- a/frappe/public/js/frappe/views/calendar/calendar.js +++ b/frappe/public/js/frappe/views/calendar/calendar.js @@ -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('
'); 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, diff --git a/frappe/public/scss/calendar.scss b/frappe/public/scss/calendar.scss index f9d0aa4630..effb23c7d5 100644 --- a/frappe/public/scss/calendar.scss +++ b/frappe/public/scss/calendar.scss @@ -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"}; diff --git a/frappe/public/scss/dark.scss b/frappe/public/scss/dark.scss index fae5d39204..6b98bbd45a 100644 --- a/frappe/public/scss/dark.scss +++ b/frappe/public/scss/dark.scss @@ -33,4 +33,5 @@ --shadow-inset: var(--fg-color); --border-color: var(--gray-600); + --highlight-color: var(--gray-700); } \ No newline at end of file diff --git a/frappe/public/scss/desktop.scss b/frappe/public/scss/desktop.scss index d77522b375..7279c07a87 100644 --- a/frappe/public/scss/desktop.scss +++ b/frappe/public/scss/desktop.scss @@ -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 { diff --git a/frappe/public/scss/frappe-datatable.scss b/frappe/public/scss/frappe-datatable.scss index bb51838c54..57cb82cc2b 100644 --- a/frappe/public/scss/frappe-datatable.scss +++ b/frappe/public/scss/frappe-datatable.scss @@ -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); } } diff --git a/frappe/public/scss/image-view.scss b/frappe/public/scss/image-view.scss index 2ca93ef007..96af2843ee 100644 --- a/frappe/public/scss/image-view.scss +++ b/frappe/public/scss/image-view.scss @@ -57,7 +57,7 @@ .image-view-item:hover { border: none; - background-color: var(--control-bg); + background-color: var(--highlight-color); .list-row-checkbox { &:before { diff --git a/frappe/public/scss/kanban.scss b/frappe/public/scss/kanban.scss index 31cc5f2e27..503b9edd3b 100644 --- a/frappe/public/scss/kanban.scss +++ b/frappe/public/scss/kanban.scss @@ -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; diff --git a/frappe/public/scss/list.scss b/frappe/public/scss/list.scss index 383c14a9f4..7a0972c631 100644 --- a/frappe/public/scss/list.scss +++ b/frappe/public/scss/list.scss @@ -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,"); - -// // 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; -// } -// } diff --git a/frappe/public/scss/variables.scss b/frappe/public/scss/variables.scss index 2e79422a0e..24e3b45339 100644 --- a/frappe/public/scss/variables.scss +++ b/frappe/public/scss/variables.scss @@ -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;