diff --git a/client/web/admin/public/index.html b/client/web/admin/public/index.html index 9a9d87ea8..67d63ea1d 100644 --- a/client/web/admin/public/index.html +++ b/client/web/admin/public/index.html @@ -11,6 +11,7 @@ + <%= FLAVOUR %> @@ -26,9 +27,6 @@
- diff --git a/client/web/admin/src/components/Apigw/CFiltersStepper.vue b/client/web/admin/src/components/Apigw/CFiltersStepper.vue index a8a642f59..a89c3fd82 100644 --- a/client/web/admin/src/components/Apigw/CFiltersStepper.vue +++ b/client/web/admin/src/components/Apigw/CFiltersStepper.vue @@ -211,14 +211,14 @@ export default { .apigw { .nav-link { - color: $primary; + color: var(--primary); border-width: 0 0 3px 0 !important; border-color: transparent !important; } .active-tab { - color: $primary !important; - border-color: $primary !important; + color: var(--primary) !important; + border-color: var(--primary) !important; } } diff --git a/client/web/admin/src/components/CRolePicker.vue b/client/web/admin/src/components/CRolePicker.vue index 9af71f36b..c01e4eb92 100644 --- a/client/web/admin/src/components/CRolePicker.vue +++ b/client/web/admin/src/components/CRolePicker.vue @@ -158,7 +158,7 @@ export default { .filtered-role { cursor: pointer; &:hover { - background-color: $light; + background-color: var(--light); } } } diff --git a/client/web/admin/src/components/ConfirmationToggle.vue b/client/web/admin/src/components/ConfirmationToggle.vue index f673c52a5..002c45a3a 100644 --- a/client/web/admin/src/components/ConfirmationToggle.vue +++ b/client/web/admin/src/components/ConfirmationToggle.vue @@ -75,11 +75,11 @@ export default { } .btn-url { - color: $danger; + color: var(--danger); text-decoration: none; &:hover { - color: $danger; + color: var(--danger); .icon-trash { font-weight: 900; diff --git a/client/web/admin/src/components/Permissions/CPermissionList.vue b/client/web/admin/src/components/Permissions/CPermissionList.vue index d274790c9..69860b182 100644 --- a/client/web/admin/src/components/Permissions/CPermissionList.vue +++ b/client/web/admin/src/components/Permissions/CPermissionList.vue @@ -503,14 +503,14 @@ export default { cursor: not-allowed; } .active-cell:hover { - background-color: $gray-200; + background-color: var(--gray-200); } .rotate { transform: rotate(45deg); } .hide-role:hover { .rotate { - color: $dark !important; + color: var(--dark) !important; } } @@ -518,7 +518,7 @@ export default { diff --git a/client/web/compose/src/components/Admin/Import.vue b/client/web/compose/src/components/Admin/Import.vue index 9cef7f646..4744abcf7 100644 --- a/client/web/compose/src/components/Admin/Import.vue +++ b/client/web/compose/src/components/Admin/Import.vue @@ -210,16 +210,16 @@ $line-height: 30px; .custom-file-label { height: $input-height; - font-family: $font-regular; + font-family: var(--font-regular); &::after { height: 100%; - font-family: $btn-font-family; + font-family: var(--btn-font-family); line-height: $line-height; - background-color: $light; - color: $dark; + background-color: var(--light); + color: var(--dark); font-weight: 400; - padding: $btn-padding-y $btn-padding-x; + padding: var(btn-padding-y) var(--btn-padding-x); } } diff --git a/client/web/compose/src/components/Admin/Page/Tree.vue b/client/web/compose/src/components/Admin/Page/Tree.vue index d43870714..58c2aabc9 100644 --- a/client/web/compose/src/components/Admin/Page/Tree.vue +++ b/client/web/compose/src/components/Admin/Page/Tree.vue @@ -269,9 +269,9 @@ $input-height: 42px; $content-height: 48px; $blank-li-height: 10px; $left-padding: 5px; -$border-color: $light; -$hover-color: $gray-200; -$dropping-color: $secondary; +$border-color: var(--light); +$hover-color: var(--gray-200); +$dropping-color: var(--secondary); .page-name-input { height: $input-height; @@ -296,7 +296,7 @@ $dropping-color: $secondary; li { white-space: nowrap; - background: $white; + background: var(--white); &.blank-li { height: $blank-li-height !important; @@ -306,25 +306,25 @@ $dropping-color: $secondary; } &:nth-last-of-type(1)::before { - border-left-color: $white !important; + border-left-color: var(--white) !important; height: 0; } } &::before { - top: $content-height / -2 !important; - border-left-color: $white !important; + top: calc($content-height / -2) !important; + border-left-color: var(--white) !important; } &::after { height: $content-height !important; - top: $content-height / 2 !important; - border-color: $white !important; + top: calc($content-height / 2) !important; + border-color: var(--white) !important; } &.parent-li:nth-last-child(2)::before { height: $content-height !important; - top: $content-height / -2 !important; + top: calc($content-height / -2) !important; } } @@ -352,7 +352,7 @@ $dropping-color: $secondary; &.exist-li { &::before { - border-color: $white !important; + border-color: var(--white) !important; } .parent-li { @@ -372,9 +372,9 @@ $dropping-color: $secondary; .pages-list-header { min-height: $content-height; - background-color: $gray-200; + background-color: var(--gray-200); margin-bottom: -1.8rem !important; - border-bottom: 2px solid $light; + border-bottom: 2px solid var(--light); z-index: 1; } diff --git a/client/web/compose/src/components/Chart/Report/ReportEdit.vue b/client/web/compose/src/components/Chart/Report/ReportEdit.vue index aa637054c..a9dde6abd 100644 --- a/client/web/compose/src/components/Chart/Report/ReportEdit.vue +++ b/client/web/compose/src/components/Chart/Report/ReportEdit.vue @@ -694,7 +694,7 @@ export default { diff --git a/client/web/compose/src/components/Common/Grid.vue b/client/web/compose/src/components/Common/Grid.vue index 3739eb2b6..5c8ab7f6d 100644 --- a/client/web/compose/src/components/Common/Grid.vue +++ b/client/web/compose/src/components/Common/Grid.vue @@ -170,7 +170,7 @@ export default { diff --git a/client/web/compose/src/components/PageBlocks/RecordBase.vue b/client/web/compose/src/components/PageBlocks/RecordBase.vue index 612991205..5172eef16 100644 --- a/client/web/compose/src/components/PageBlocks/RecordBase.vue +++ b/client/web/compose/src/components/PageBlocks/RecordBase.vue @@ -360,7 +360,7 @@ export default { opacity: 1; button:hover { - color: $primary !important; + color: var(--primary) !important; } } diff --git a/client/web/compose/src/components/PageBlocks/RecordListBase.vue b/client/web/compose/src/components/PageBlocks/RecordListBase.vue index 33635be47..2d10f0383 100644 --- a/client/web/compose/src/components/PageBlocks/RecordListBase.vue +++ b/client/web/compose/src/components/PageBlocks/RecordListBase.vue @@ -2037,7 +2037,7 @@ export default { th .required::after { content: "*"; display: inline-block; - color: $primary; + color: var(--primary); vertical-align: sub; margin-left: 2px; width: 10px; @@ -2047,7 +2047,7 @@ th .required::after { tr:hover td.actions { opacity: 1; - background-color: $gray-200; + background-color: var(--gray-200); z-index: 1; } @@ -2060,10 +2060,10 @@ tr:hover td.actions { td:hover .inline-actions { opacity: 1; - background-color: $gray-200; + background-color: var(--gray-200); button:hover { - color: $primary !important; + color: var(--primary) !important; } } @@ -2078,7 +2078,7 @@ td:hover .inline-actions { width: 1%; .regular-font { - font-family: $font-regular !important; + font-family: var(--font-regular) !important; } } diff --git a/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue b/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue index f72eda14a..4c5a917c5 100644 --- a/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue +++ b/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue @@ -1000,6 +1000,6 @@ export default { diff --git a/client/web/compose/src/components/PageBlocks/TabsBase.vue b/client/web/compose/src/components/PageBlocks/TabsBase.vue index 720e0cd9b..f56261b1e 100644 --- a/client/web/compose/src/components/PageBlocks/TabsBase.vue +++ b/client/web/compose/src/components/PageBlocks/TabsBase.vue @@ -201,7 +201,7 @@ export default { diff --git a/client/web/compose/src/components/Public/Page/Attachment/ListLoader.vue b/client/web/compose/src/components/Public/Page/Attachment/ListLoader.vue index d509cde3b..b240b3bbb 100644 --- a/client/web/compose/src/components/Public/Page/Attachment/ListLoader.vue +++ b/client/web/compose/src/components/Public/Page/Attachment/ListLoader.vue @@ -366,6 +366,6 @@ export default { } .item:hover { - background-color: $gray-200; + background-color: var(--gray-200); } diff --git a/client/web/compose/src/components/Translator/Editable.vue b/client/web/compose/src/components/Translator/Editable.vue index 0387b9547..3f2c9cba8 100644 --- a/client/web/compose/src/components/Translator/Editable.vue +++ b/client/web/compose/src/components/Translator/Editable.vue @@ -44,7 +44,7 @@ div { div:empty::before { content: attr(placeholder); - color: $secondary; + color: var(--secondary); pointer-events: none; display: block; /* For Firefox */ } diff --git a/client/web/compose/src/themes/corteza-base/custom.scss b/client/web/compose/src/themes/corteza-base/custom.scss index c674cd508..38b61ab48 100644 --- a/client/web/compose/src/themes/corteza-base/custom.scss +++ b/client/web/compose/src/themes/corteza-base/custom.scss @@ -1,6 +1,6 @@ /* stylelint-disable no-descending-specificity */ .bg-gray { - background-color: $gray-200; + background-color: var(--gray-200); } html { @@ -14,7 +14,7 @@ body { } :focus { - outline-color: $primary; + outline-color: var(--primary); } button:disabled { @@ -63,13 +63,13 @@ thead th, legend, label, .btn { - font-family: $font-medium; + font-family: var(--font-medium); } strong, b, .font-weight-bold { - font-family: $font-semibold; + font-family: var(--font-semibold); } th { @@ -124,7 +124,7 @@ th { padding: 0.375rem; padding-top: 0; border-width: 2px; - border-color: $light; + border-color: var(--light); .vs__selected { margin-top: 0.375rem; @@ -137,7 +137,7 @@ th { .vs__clear, .vs__open-indicator { - fill: $gray-900; + fill: var(--gray-900); display: inline-flex; } } @@ -147,7 +147,7 @@ th { } .loader { - height: calc(100vh - 2 * #{$topbar-height}); + height: calc(100vh - 2 * #{var(--opbar-height)}); display: flex; align-items: center; justify-content: space-around; @@ -179,7 +179,7 @@ th { .rt-content { &.editor { border-radius: 4px; - border: 2px solid $light; + border: 2px solid var(--light); } .editor__content { @@ -197,7 +197,7 @@ th { // blockquote blockquote { - border-left: 3px solid rgba($black, 0.1); + border-left: 3px solid rgba(var(--black), 0.1); padding-left: 0.8rem; font-style: italic; } @@ -221,7 +221,7 @@ th { } .todo-checkbox { - border: 2px solid $black; + border: 2px solid var(--black); height: 0.9em; width: 0.9em; box-sizing: border-box; @@ -254,7 +254,7 @@ th { } > .todo-checkbox { - background-color: $black; + background-color: var(--black); } } @@ -266,14 +266,14 @@ th { fieldset.required { &.error { legend::before { - color: $danger; + color: var(--danger); } } label::after { content: "*"; display: inline-block; - color: $primary; + color: var(--primary); width: 10px; height: 18px; overflow: hidden; @@ -287,7 +287,7 @@ fieldset.required { .alert { z-index: 1040; - box-shadow: 0 0 2px 0 rgba($secondary, 0.75); + box-shadow: 0 0 2px 0 rgba(var(--secondary), 0.75); } } @@ -319,7 +319,7 @@ fieldset.required { .modal-content { &.card { - background-color: $white; + background-color: var(--white); background-clip: border-box; border: 0 solid rgba(0, 0, 0, 0.125); border-radius: 1rem; @@ -345,7 +345,7 @@ fieldset.required { .geosearch-results { margin: 1px; border-radius: 2px; - background-color: $white; + background-color: var(--white); max-height: 50%; overflow: auto; } @@ -359,7 +359,7 @@ fieldset.required { } .geosearch-result:hover { - background-color: $gray-200; + background-color: var(--gray-200); cursor: pointer; } diff --git a/client/web/compose/src/themes/corteza-base/index.scss b/client/web/compose/src/themes/corteza-base/index.scss index a224c5b2f..6f3102919 100644 --- a/client/web/compose/src/themes/corteza-base/index.scss +++ b/client/web/compose/src/themes/corteza-base/index.scss @@ -1,6 +1,4 @@ @import "./rtl.scss"; @import "~vue-select/dist/vue-select.css"; -@import "~bootstrap/scss/bootstrap"; -@import '~bootstrap-vue/src/index.scss'; @import "./custom"; @import "./poppins.scss"; diff --git a/client/web/compose/src/themes/corteza-base/poppins.scss b/client/web/compose/src/themes/corteza-base/poppins.scss index 9667c1f7e..80d24a908 100644 --- a/client/web/compose/src/themes/corteza-base/poppins.scss +++ b/client/web/compose/src/themes/corteza-base/poppins.scss @@ -1,3 +1,6 @@ +// Fonts Path +$fonts_dir : './fonts/' !default; + @font-face { font-family: 'Poppins-Bold'; src: url($fonts_dir + 'poppins/Poppins-Bold.ttf') format('truetype'); diff --git a/client/web/compose/src/themes/corteza-base/rtl.scss b/client/web/compose/src/themes/corteza-base/rtl.scss index 3858cf2d6..ee6968dc9 100644 --- a/client/web/compose/src/themes/corteza-base/rtl.scss +++ b/client/web/compose/src/themes/corteza-base/rtl.scss @@ -1,6 +1,6 @@ [dir] { margin: 0; - background-color: $body-bg; + background-color: var(--body-bg); } [dir="rtl"] { diff --git a/client/web/compose/src/themes/corteza-base/variables.scss b/client/web/compose/src/themes/corteza-base/variables.scss deleted file mode 100644 index d24ad9757..000000000 --- a/client/web/compose/src/themes/corteza-base/variables.scss +++ /dev/null @@ -1,124 +0,0 @@ -$wideminwidth:767px !default; -$confortableminwidth:1020px !default; - -// Paths -$fonts_dir : './fonts/' !default; - -// Typography -$font-light: 'Poppins-Light' !default; -$font-regular: 'Poppins-Regular' !default; -$font-medium: 'Poppins-Medium' !default; -$font-semibold: 'Poppins-Semibold' !default; -$font-bold: 'Poppins-Bold' !default; -$font-size-base: 0.9rem !default; - -$font-family-base: $font-regular !default; -$headings-font-family: $font-semibold !default; - -// Color system -$white: #FFFFFF !default; -$black: #162425 !default; -$primary: #0B344E !default; -$secondary: #758D9B !default; -$success: #43AA8B !default; -$warning: #E2A046 !default; -$danger: #E54122 !default; -$light: #E4E9EF !default; -$dark: #162425 !default; -$tertiary: #5E727E !default; - -$gray-200: #F9FAFB !default; - -$theme-colors: () !default; -$theme-colors: map-merge( - ( - "white": $white, - "tertiary": $tertiary, - ), - $theme-colors -); - -// Grid - maybe not the smartest idea to change this but let's see -$grid-breakpoints: ( - xs: 0, - sm: 576px, - md: 768px, - lg: 992px, - xl: 1500px -) !default; - -// Options -$enable-rounded: true !default; -$enable-gradients: false !default; -$enable-responsive-font-sizes: true !default; - -// Body -$body-bg: $gray-200 !default; - -// Card -$card-border-radius: 1rem !default; -$card-border-width: 0 !default; -$card-cap-bg: $gray-200 !default; - -// Tables -$table-cell-padding-sm: 0.25rem !default; -$table-hover-bg: $gray-200 !default; - -// Buttons -$btn-font-size: $font-size-base !default; -$btn-padding-y: 0.25em !default; -$btn-padding-x: 1em !default; - -$btn-focus-width: 0.2rem !default; -$btn-focus-box-shadow: none !default; -$btn-active-box-shadow: none !default; - -$btn-font-size-lg: 16px !default; -$btn-font-family: $font-semibold !default; - -$topbar-height: 64px !default; - -// Navbar -$navbar-bg: $white !default; -$navbar-color: $black !default; -$navbar-border: $primary !default; -$navbar-active-bg: $white !default; -$navbar-active-color: $primary !default; -$navbar-active-border: $primary !default; -$navbar-hover-bg: $white !default; -$navbar-hover-color: $primary !default; -$navbar-hover-border: $primary !default; -$navbar-height: 50px !default; -$navbar-padding-y: 0 !default; -$navbar-padding-x: 0 !default; - -$navbar-toggler-font-size: 24px !default; -$sidebar-width: 320px !default; -$sidebar-bg: #F4F7FA; - -// Pagination -$pagination-color: $primary !default; -$pagination-disabled-bg: transparent !default; -$pagination-bg: transparent !default; -$pagination-active-bg: $primary !default; -$pagination-border-width: 0 !default; - -// Forms -$input-font-size: $font-size-base !default; - -$input-border-color: $light !default; -$input-border-width: 2px !default; - -$input-btn-focus-width: 0 !default; -$input-focus-box-shadow: none !default; -$input-focus-border-color: $primary !default; - -/* stylelint-disable */ -// This is used within corteza-webapp-compose/src/lib/block/Calendar/feedLoader/ -// to determine default event colors -:export { - primary: $primary; - danger: $danger; - secondary: $secondary; -} -/* stylelint-enable */ diff --git a/client/web/compose/src/views/Admin/Pages/Builder.vue b/client/web/compose/src/views/Admin/Pages/Builder.vue index 26697a81d..342b4878d 100644 --- a/client/web/compose/src/views/Admin/Pages/Builder.vue +++ b/client/web/compose/src/views/Admin/Pages/Builder.vue @@ -1094,7 +1094,7 @@ export default { \ No newline at end of file diff --git a/client/web/discovery/src/components/DiscoveryMap.vue b/client/web/discovery/src/components/DiscoveryMap.vue index 092105bcd..75b10e14c 100644 --- a/client/web/discovery/src/components/DiscoveryMap.vue +++ b/client/web/discovery/src/components/DiscoveryMap.vue @@ -92,6 +92,6 @@ export default { diff --git a/client/web/discovery/src/themes/corteza-base/custom.scss b/client/web/discovery/src/themes/corteza-base/custom.scss index 6d9df0bac..00305029a 100644 --- a/client/web/discovery/src/themes/corteza-base/custom.scss +++ b/client/web/discovery/src/themes/corteza-base/custom.scss @@ -10,7 +10,7 @@ body { } :focus { - outline-color: $primary; + outline-color: var(--primary); } button:disabled { @@ -36,13 +36,13 @@ thead th, legend, label, .btn { - font-family: $font-medium; + font-family: var(--font-medium); } strong, b, .font-weight-bold { - font-family: $font-semibold; + font-family: var(--font-semibold); } th { @@ -70,7 +70,7 @@ th { .vs__dropdown-toggle { padding: 0.375rem; border-width: 2px; - border-color: $light; + border-color: var(--light); .vs__selected { margin: 0; @@ -79,7 +79,7 @@ th { .vs__clear, .vs__open-indicator { - fill: $gray-900; + fill: var(--gray-900); display: inline-flex; } @@ -98,7 +98,7 @@ th { .rt-content { &.editor { border-radius: 4px; - border: 2px solid $light; + border: 2px solid var(--light); } .editor__content { @@ -116,7 +116,7 @@ th { // blockquote blockquote { - border-left: 3px solid rgba($black, 0.1); + border-left: 3px solid rgba(var(--black), 0.1); padding-left: 0.8rem; font-style: italic; } @@ -140,7 +140,7 @@ th { } .todo-checkbox { - border: 2px solid $black; + border: 2px solid var(--black); height: 0.9em; width: 0.9em; box-sizing: border-box; @@ -173,7 +173,7 @@ th { } > .todo-checkbox { - background-color: $black; + background-color: var(--black); } } @@ -185,14 +185,14 @@ th { fieldset.required { &.error { legend::before { - color: $danger; + color: var(--danger); } } label::after { content: "*"; display: inline-block; - color: $danger; + color: var(--danger); width: 10px; height: 18px; overflow: hidden; @@ -206,7 +206,7 @@ fieldset.required { .alert { z-index: 1040; - box-shadow: 0 0 2px 0 rgba($secondary, 0.75); + box-shadow: 0 0 2px 0 rgba(var(--secondary), 0.75); } } diff --git a/client/web/discovery/src/themes/corteza-base/index.scss b/client/web/discovery/src/themes/corteza-base/index.scss index f25e095ce..e756cf481 100644 --- a/client/web/discovery/src/themes/corteza-base/index.scss +++ b/client/web/discovery/src/themes/corteza-base/index.scss @@ -1,6 +1,3 @@ -@import "./variables"; -@import "~bootstrap/scss/bootstrap"; -@import '~bootstrap-vue/src/index.scss'; @import "./custom"; @import "./poppins.scss"; @import "~vuelayers/lib/style.css"; diff --git a/client/web/discovery/src/themes/corteza-base/poppins.scss b/client/web/discovery/src/themes/corteza-base/poppins.scss index 9667c1f7e..80d24a908 100644 --- a/client/web/discovery/src/themes/corteza-base/poppins.scss +++ b/client/web/discovery/src/themes/corteza-base/poppins.scss @@ -1,3 +1,6 @@ +// Fonts Path +$fonts_dir : './fonts/' !default; + @font-face { font-family: 'Poppins-Bold'; src: url($fonts_dir + 'poppins/Poppins-Bold.ttf') format('truetype'); diff --git a/client/web/discovery/src/themes/corteza-base/variables.scss b/client/web/discovery/src/themes/corteza-base/variables.scss deleted file mode 100644 index 2e10e7934..000000000 --- a/client/web/discovery/src/themes/corteza-base/variables.scss +++ /dev/null @@ -1,124 +0,0 @@ -$wideminwidth:767px !default; -$confortableminwidth:1020px !default; - -// Paths -$fonts_dir : './fonts/' !default; - -// Typography -$font-light: 'Poppins-Light' !default; -$font-regular: 'Poppins-Regular' !default; -$font-medium: 'Poppins-Medium' !default; -$font-semibold: 'Poppins-Semibold' !default; -$font-bold: 'Poppins-Bold' !default; -$font-size-base: 0.9rem !default; - -$font-family-base: $font-regular !default; -$headings-font-family: $font-semibold !default; - -// Color system -$white: #FFFFFF !default; -$black: #162425 !default; -$primary: #0B344E !default; -$secondary: #758D9B !default; -$success: #43AA8B !default; -$warning: #E2A046 !default; -$danger: #E54122 !default; -$light: #F3F5F7 !default; -$dark: #162425 !default; -$tertiary: #5E727E !default; - -$gray-200: #F9FAFB !default; - -$theme-colors: () !default; -$theme-colors: map-merge( - ( - "white": $white, - "tertiary": $tertiary, - ), - $theme-colors -); - -// Grid - maybe not the smartest idea to change this but let's see -$grid-breakpoints: ( - xs: 0, - sm: 576px, - md: 768px, - lg: 992px, - xl: 1500px -) !default; - -// Options -$enable-rounded: true !default; -$enable-gradients: false !default; -$enable-responsive-font-sizes: true !default; - -// Body -$body-bg: $gray-200 !default; - -// Card -$card-border-radius: 1rem !default; -$card-border-width: 0 !default; -$card-cap-bg: $gray-200 !default; - -// Tables -$table-cell-padding-sm: 0.25rem !default; -$table-hover-bg: $gray-200 !default; - -// Buttons -$btn-font-size: $font-size-base !default; -$btn-padding-y: 0.25em !default; -$btn-padding-x: 1em !default; - -$btn-focus-width: 0.2rem !default; -$btn-focus-box-shadow: none !default; -$btn-active-box-shadow: none !default; - -$btn-font-size-lg: 16px !default; -$btn-font-family: $font-semibold !default; - -$topbar-height: 64px !default; - -// Navbar -$navbar-bg: $white !default; -$navbar-color: $black !default; -$navbar-border: $primary !default; -$navbar-active-bg: $white !default; -$navbar-active-color: $primary !default; -$navbar-active-border: $primary !default; -$navbar-hover-bg: $white !default; -$navbar-hover-color: $primary !default; -$navbar-hover-border: $primary !default; -$navbar-height: 50px !default; -$navbar-padding-y: 0 !default; -$navbar-padding-x: 0 !default; - -$navbar-toggler-font-size: 24px !default; -$sidebar-width: 320px !default; -$sidebar-bg: #F4F7FA; - -// Pagination -$pagination-color: $primary !default; -$pagination-disabled-bg: transparent !default; -$pagination-bg: transparent !default; -$pagination-active-bg: $primary !default; -$pagination-border-width: 0 !default; - -// Forms -$input-font-size: $font-size-base !default; - -$input-border-color: $light !default; -$input-border-width: 2px !default; - -$input-btn-focus-width: 0 !default; -$input-focus-box-shadow: none !default; -$input-focus-border-color: $primary !default; - -/* stylelint-disable */ -// This is used within corteza-webapp-compose/src/lib/block/Calendar/feedLoader/ -// to determine default event colors -:export { - primary: $primary; - danger: $danger; - secondary: $secondary; -} -/* stylelint-enable */ diff --git a/client/web/discovery/src/views/Layout.vue b/client/web/discovery/src/views/Layout.vue index 22f476e8a..c01bfc3ac 100644 --- a/client/web/discovery/src/views/Layout.vue +++ b/client/web/discovery/src/views/Layout.vue @@ -134,7 +134,7 @@ export default { transition: min-width 0.2s ease-in-out; &.expanded { - min-width: $sidebar-width; + min-width: var(--sidebar-width); -webkit-transition: min-width 0.2s ease-in-out; -moz-transition: min-width 0.2s ease-in-out; -o-transition: min-width 0.2s ease-in-out; diff --git a/client/web/discovery/vue.config-builder.js b/client/web/discovery/vue.config-builder.js index be5de67de..46ff13123 100644 --- a/client/web/discovery/vue.config-builder.js +++ b/client/web/discovery/vue.config-builder.js @@ -1,23 +1,20 @@ -const webpack = require('webpack') -const exec = require('child_process').execSync -const path = require('path') +var webpack = require('webpack') +var exec = require('child_process').execSync +var path = require('path') +var Vue = require('vue') module.exports = ({ appFlavour, appLabel, version = process.env.BUILD_VERSION, theme, packageAlias, root = path.resolve('.'), env = process.env.NODE_ENV }) => { const isDevelopment = (env === 'development') const isTest = (env === 'test') - if (isTest || isDevelopment) { - const Vue = require('vue') + if (isTest) { + Vue.config.devtools = false + Vue.config.productionTip = false + } - if (isTest) { - Vue.config.devtools = false - Vue.config.productionTip = false - } - - if (isDevelopment) { - Vue.config.devtools = true - Vue.config.performance = true - } + if (isDevelopment) { + Vue.config.devtools = true + Vue.config.performance = true } const optimization = isTest ? {} : { @@ -36,14 +33,14 @@ module.exports = ({ appFlavour, appLabel, version = process.env.BUILD_VERSION, t return { publicPath: './', - lintOnSave: true, - runtimeCompiler: true, configureWebpack: { // other webpack options to merge in ... + // Make sure webpack is not too nosy + // and tries to tinker around linked packages resolve: { symlinks: false }, plugins: [ @@ -59,9 +56,28 @@ module.exports = ({ appFlavour, appLabel, version = process.env.BUILD_VERSION, t }, chainWebpack: config => { + // https://cli.vuejs.org/guide/troubleshooting.html#symbolic-links-in-node-modules + config.resolve.symlinks(false) + + // Remove css extraction issues + // https://github.com/vuejs/vue-cli/issues/3771#issuecomment-526228100 + config.plugin('friendly-errors').tap(args => { + const vueCli3Transformer = args[0].additionalTransformers[0] + args[0].additionalTransformers = [ + vueCli3Transformer, + error => { + const regexp = /\[mini-css-extract-plugin\]/ + if (regexp.test(error.message)) return {} + return error + }, + ] + return args + }) + // Do not copy config files (deployment procedure will do that) - config.plugin('copy').tap(options => { + config.plugins.has('copy') && config.plugin('copy').tap(options => { options[0][0].ignore.push('config*js') + options[0][0].ignore.push('*gitignore') return options }) @@ -93,6 +109,7 @@ module.exports = ({ appFlavour, appLabel, version = process.env.BUILD_VERSION, t scssNormal.use('resolve-url-loader') .loader('resolve-url-loader').options({ keepQuery: true, + removeCR: true, root: path.join(root, 'src/themes', theme), }) .before('sass-loader') @@ -103,6 +120,12 @@ module.exports = ({ appFlavour, appLabel, version = process.env.BUILD_VERSION, t hot: true, disableHostCheck: true, + proxy: { + '^/custom.css': { + target: fetchBaseUrl(), + }, + }, + watchOptions: { ignored: [ // Do not watch for changes under node_modules @@ -117,11 +140,30 @@ module.exports = ({ appFlavour, appLabel, version = process.env.BUILD_VERSION, t css: { sourceMap: isDevelopment, loaderOptions: { - sass: { - // @todo cleanup all components and remove this global import - additionalData: `@import "./src/themes/${theme}/variables.scss";`, - }, + sass: {}, }, }, } } + +function fetchBaseUrl () { + var fs = require('fs') + var window = {} + + const fileContents = + fs.existsSync('public/config.js') + ? fs.readFileSync('public/config.js', 'utf-8') + : '' + + try { + // eslint-disable-next-line no-eval + eval(fileContents) + + const u = window.CortezaAPI || '' + const ur = new URL(u.startsWith('//') ? `http:${u}` : u) + + return `${ur.protocol}//${ur.host}/` + } catch (e) { + return '/' + } +} diff --git a/client/web/one/public/index.html b/client/web/one/public/index.html index aec50e0b3..9c06ecc30 100644 --- a/client/web/one/public/index.html +++ b/client/web/one/public/index.html @@ -11,6 +11,7 @@ + <%= FLAVOUR %> @@ -26,9 +27,6 @@
- diff --git a/client/web/one/src/components/CAppSelector.vue b/client/web/one/src/components/CAppSelector.vue index 13e177141..a4e05faa7 100644 --- a/client/web/one/src/components/CAppSelector.vue +++ b/client/web/one/src/components/CAppSelector.vue @@ -330,7 +330,7 @@ export default { background-color: transparent; border: none; .star-icon { - fill: $warning; + fill: var(--warning); width: 1.2rem; height: 1.2rem; } diff --git a/client/web/one/src/themes/corteza-base/custom.scss b/client/web/one/src/themes/corteza-base/custom.scss index b4939bba3..f7f02e13a 100644 --- a/client/web/one/src/themes/corteza-base/custom.scss +++ b/client/web/one/src/themes/corteza-base/custom.scss @@ -13,7 +13,7 @@ body { } :focus { - outline-color: $primary; + outline-color: var(--primary); } button:disabled { @@ -43,13 +43,13 @@ thead th, legend, label, .btn { - font-family: $font-medium; + font-family: var(--font-medium); } strong, b, .font-weight-bold { - font-family: $font-semibold; + font-family: var(--font-semibold); } .v-select { @@ -66,7 +66,7 @@ b, .vs__dropdown-toggle { padding: 0.375rem; border-width: 2px; - border-color: $light; + border-color: var(--light); .vs__selected { margin: 0; @@ -75,7 +75,7 @@ b, .vs__clear, .vs__open-indicator { - fill: $gray-900; + fill: var(--gray-900); display: inline-flex; } } diff --git a/client/web/one/src/themes/corteza-base/index.scss b/client/web/one/src/themes/corteza-base/index.scss index 6ca1d128a..03f3766fd 100644 --- a/client/web/one/src/themes/corteza-base/index.scss +++ b/client/web/one/src/themes/corteza-base/index.scss @@ -1,6 +1,4 @@ @import "./rtl.scss"; -@import "~bootstrap/scss/bootstrap"; -@import '~bootstrap-vue/src/index.scss'; @import '~vue-select/src/scss/vue-select.scss'; @import "./custom"; @import "./poppins.scss"; diff --git a/client/web/one/src/themes/corteza-base/poppins.scss b/client/web/one/src/themes/corteza-base/poppins.scss index 9667c1f7e..80d24a908 100644 --- a/client/web/one/src/themes/corteza-base/poppins.scss +++ b/client/web/one/src/themes/corteza-base/poppins.scss @@ -1,3 +1,6 @@ +// Fonts Path +$fonts_dir : './fonts/' !default; + @font-face { font-family: 'Poppins-Bold'; src: url($fonts_dir + 'poppins/Poppins-Bold.ttf') format('truetype'); diff --git a/client/web/one/src/themes/corteza-base/rtl.scss b/client/web/one/src/themes/corteza-base/rtl.scss index abd3cc1d2..c057c8a11 100644 --- a/client/web/one/src/themes/corteza-base/rtl.scss +++ b/client/web/one/src/themes/corteza-base/rtl.scss @@ -1,6 +1,6 @@ [dir] { margin: 0; - background-color: $body-bg; + background-color: var(--body-bg); } [dir="rtl"] { diff --git a/client/web/one/src/themes/corteza-base/variables.scss b/client/web/one/src/themes/corteza-base/variables.scss deleted file mode 100644 index 771713578..000000000 --- a/client/web/one/src/themes/corteza-base/variables.scss +++ /dev/null @@ -1,78 +0,0 @@ -$wideminwidth: 768px !default; - -// Paths -$fonts_dir : '/fonts/' !default; -$icomoon-font-path: $fonts_dir + 'icomoon' !default; -$icomoon-font-family: "icomoon" !default; - -// Typography -$font-light: 'Poppins-Light' !default; -$font-regular: 'Poppins-Regular' !default; -$font-medium: 'Poppins-Medium' !default; -$font-semibold: 'Poppins-Semibold' !default; -$font-bold: 'Poppins-Bold' !default; -$font-size-base: 0.9rem !default; - -$font-family-base: $font-regular !default; -$headings-font-family: $font-semibold !default; - -// Color system -$white: #FFFFFF !default; -$black: #162425 !default; -$primary: #0B344E !default; -$secondary: #758D9B !default; -$success: #43AA8B !default; -$warning: #E2A046 !default; -$danger: #E54122 !default; -$light: #F3F5F7 !default; -$dark: #162425 !default; -$tertiary: #5E727E !default; - -$gray-200: #F9FAFB !default; - -$theme-colors: () !default; -$theme-colors: map-merge( - ( - "white": $white, - "tertiary": $tertiary, - ), - $theme-colors -); - -// Options -$enable-rounded: true !default; -$enable-gradients: false !default; -$enable-responsive-font-sizes: true !default; - -// Body -$body-bg: $gray-200 !default; - -// Card -$card-border-radius: 1rem !default; -$card-border-width: 0 !default; -$card-cap-bg: $gray-200 !default; - -// Buttons -$btn-font-size: $font-size-base !default; -$btn-padding-y: 0.25em !default; -$btn-padding-x: 1em !default; - -$btn-focus-width: 0.2rem !default; -$btn-focus-box-shadow: none !default; -$btn-active-box-shadow: none !default; - -$btn-font-size-lg: 16px !default; -$btn-font-family: $font-semibold !default; - -$topbar-height: 64px !default; - - -// Forms -$input-font-size: $font-size-base !default; - -$input-border-color: $light !default; -$input-border-width: 2px !default; - -$input-btn-focus-width: 0 !default; -$input-focus-box-shadow: none !default; -$input-focus-border-color: $primary !default; diff --git a/client/web/one/src/views/Bridge/Jitsi.vue b/client/web/one/src/views/Bridge/Jitsi.vue index cc4a57b28..efae0319f 100644 --- a/client/web/one/src/views/Bridge/Jitsi.vue +++ b/client/web/one/src/views/Bridge/Jitsi.vue @@ -195,13 +195,13 @@ main { max-width: 400px; margin: 50px auto; padding: 50px; - background: $white; + background: var(--white); } input { height: 30px; width: 100%; - border: 1px solid $secondary; + border: 1px solid var(--secondary); padding-left: 10px; font-size: 14px; display: block; @@ -224,12 +224,12 @@ main { -webkit-appearance:none; -moz-appearance:none; appearance:none; - border: 1px solid $secondary; + border: 1px solid var(--secondary); } #roomdropdown::after { border: 4px dashed transparent; - border-top: 4px solid $secondary; + border-top: 4px solid var(--secondary); content: ""; display: inline-block; float: right; @@ -245,7 +245,7 @@ main { button { cursor: pointer; background: transparent; - color: $primary; + color: var(--primary); font-size: 14px; line-height: 38px; text-decoration: none; @@ -256,16 +256,16 @@ main { margin: 20px auto 0; -webkit-transition: color .2s,background-color .2s; transition: color .2s,background-color .2s; - border: 1px solid $primary; + border: 1px solid var(--primary); &:hover { - border: 1px solid $primary; - background: $primary; - color: $white; + border: 1px solid var(--primary); + background: var(--primary); + color: var(--white); } &:disabled { cursor: not-allowed; - color: $secondary; - border-color: $secondary; + color: var(--secondary); + border-color: var(--secondary); &:hover { background: transparent; } @@ -279,11 +279,11 @@ main { align-items: center; text-align: center; margin: 30px 0; - color: $secondary; + color: var(--secondary); &:before, &:after { content: ''; - border-top: 1px solid $secondary; + border-top: 1px solid var(--secondary); margin: 0 20px 0 0; flex: 1 0 20px; } diff --git a/client/web/one/vue.config-builder.js b/client/web/one/vue.config-builder.js index 98278217b..46ff13123 100644 --- a/client/web/one/vue.config-builder.js +++ b/client/web/one/vue.config-builder.js @@ -1,17 +1,22 @@ var webpack = require('webpack') var exec = require('child_process').execSync var path = require('path') +var Vue = require('vue') -module.exports = ({ appFlavour, appLabel, version, theme, packageAlias, root = path.resolve('.'), env = process.env.NODE_ENV }) => { +module.exports = ({ appFlavour, appLabel, version = process.env.BUILD_VERSION, theme, packageAlias, root = path.resolve('.'), env = process.env.NODE_ENV }) => { const isDevelopment = (env === 'development') const isTest = (env === 'test') if (isTest) { - var Vue = require('vue') Vue.config.devtools = false Vue.config.productionTip = false } + if (isDevelopment) { + Vue.config.devtools = true + Vue.config.performance = true + } + const optimization = isTest ? {} : { usedExports: true, runtimeChunk: 'single', @@ -33,6 +38,11 @@ module.exports = ({ appFlavour, appLabel, version, theme, packageAlias, root = p configureWebpack: { // other webpack options to merge in ... + + // Make sure webpack is not too nosy + // and tries to tinker around linked packages + resolve: { symlinks: false }, + plugins: [ new webpack.DefinePlugin({ FLAVOUR: JSON.stringify(appFlavour), @@ -49,13 +59,29 @@ module.exports = ({ appFlavour, appLabel, version, theme, packageAlias, root = p // https://cli.vuejs.org/guide/troubleshooting.html#symbolic-links-in-node-modules config.resolve.symlinks(false) + // Remove css extraction issues + // https://github.com/vuejs/vue-cli/issues/3771#issuecomment-526228100 + config.plugin('friendly-errors').tap(args => { + const vueCli3Transformer = args[0].additionalTransformers[0] + args[0].additionalTransformers = [ + vueCli3Transformer, + error => { + const regexp = /\[mini-css-extract-plugin\]/ + if (regexp.test(error.message)) return {} + return error + }, + ] + return args + }) + // Do not copy config files (deployment procedure will do that) - config.plugin('copy').tap(options => { + config.plugins.has('copy') && config.plugin('copy').tap(options => { options[0][0].ignore.push('config*js') + options[0][0].ignore.push('*gitignore') return options }) - // Aliasing 'corteza-webapp-compose' instead of '@' so we do + // Aliasing full package name instead of '@' so we do // not break imports on apps that import this code config.resolve.alias.delete('@') if (packageAlias) { @@ -83,6 +109,7 @@ module.exports = ({ appFlavour, appLabel, version, theme, packageAlias, root = p scssNormal.use('resolve-url-loader') .loader('resolve-url-loader').options({ keepQuery: true, + removeCR: true, root: path.join(root, 'src/themes', theme), }) .before('sass-loader') @@ -93,6 +120,12 @@ module.exports = ({ appFlavour, appLabel, version, theme, packageAlias, root = p hot: true, disableHostCheck: true, + proxy: { + '^/custom.css': { + target: fetchBaseUrl(), + }, + }, + watchOptions: { ignored: [ // Do not watch for changes under node_modules @@ -107,11 +140,30 @@ module.exports = ({ appFlavour, appLabel, version, theme, packageAlias, root = p css: { sourceMap: isDevelopment, loaderOptions: { - sass: { - // @todo cleanup all components and remove this global import - additionalData: `@import "./src/themes/${theme}/variables.scss";`, - }, + sass: {}, }, }, } } + +function fetchBaseUrl () { + var fs = require('fs') + var window = {} + + const fileContents = + fs.existsSync('public/config.js') + ? fs.readFileSync('public/config.js', 'utf-8') + : '' + + try { + // eslint-disable-next-line no-eval + eval(fileContents) + + const u = window.CortezaAPI || '' + const ur = new URL(u.startsWith('//') ? `http:${u}` : u) + + return `${ur.protocol}//${ur.host}/` + } catch (e) { + return '/' + } +} diff --git a/client/web/privacy/public/index.html b/client/web/privacy/public/index.html index 5e648e1c4..0640cd72f 100644 --- a/client/web/privacy/public/index.html +++ b/client/web/privacy/public/index.html @@ -10,6 +10,7 @@ + <%= FLAVOUR %> @@ -25,9 +26,6 @@
- \ No newline at end of file diff --git a/client/web/privacy/src/components/ConnectionMap.vue b/client/web/privacy/src/components/ConnectionMap.vue index 5dff94cbe..81e91c6c7 100644 --- a/client/web/privacy/src/components/ConnectionMap.vue +++ b/client/web/privacy/src/components/ConnectionMap.vue @@ -110,6 +110,6 @@ export default { diff --git a/client/web/privacy/src/plugins/index.js b/client/web/privacy/src/plugins/index.js index 980107796..a893bd441 100644 --- a/client/web/privacy/src/plugins/index.js +++ b/client/web/privacy/src/plugins/index.js @@ -2,9 +2,6 @@ import Vue from 'vue' import Router from 'vue-router' import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue' -import 'bootstrap/dist/css/bootstrap.css' -import 'bootstrap-vue/dist/bootstrap-vue.css' - import { plugins } from '@cortezaproject/corteza-vue' Vue.use(Router) diff --git a/client/web/privacy/src/themes/corteza-base/custom.scss b/client/web/privacy/src/themes/corteza-base/custom.scss index afd20e277..5dbf0f004 100644 --- a/client/web/privacy/src/themes/corteza-base/custom.scss +++ b/client/web/privacy/src/themes/corteza-base/custom.scss @@ -10,7 +10,7 @@ body { } :focus { - outline-color: $primary; + outline-color: var(--primary); } button:disabled { @@ -36,13 +36,13 @@ thead th, legend, label, .btn { - font-family: $font-medium; + font-family: var(--font-medium); } strong, b, .font-weight-bold { - font-family: $font-semibold; + font-family: var(--font-semibold); } th { @@ -74,7 +74,7 @@ th { .vs__dropdown-toggle { padding: 0.375rem; border-width: 2px; - border-color: $light; + border-color: var(--light); .vs__selected { margin: 0; @@ -83,7 +83,7 @@ th { .vs__clear, .vs__open-indicator { - fill: $gray-900; + fill: var(--gray-900); display: inline-flex; } @@ -102,7 +102,7 @@ th { .rt-content { &.editor { border-radius: 4px; - border: 2px solid $light; + border: 2px solid var(--light); } .editor__content { @@ -120,7 +120,7 @@ th { // blockquote blockquote { - border-left: 3px solid rgba($black, 0.1); + border-left: 3px solid rgba(var(--black), 0.1); padding-left: 0.8rem; font-style: italic; } @@ -144,7 +144,7 @@ th { } .todo-checkbox { - border: 2px solid $black; + border: 2px solid var(--black); height: 0.9em; width: 0.9em; box-sizing: border-box; @@ -177,7 +177,7 @@ th { } > .todo-checkbox { - background-color: $black; + background-color: var(--black); } } @@ -189,14 +189,14 @@ th { fieldset.required { &.error { legend::before { - color: $danger; + color: var(--danger); } } label::after { content: "*"; display: inline-block; - color: $danger; + color: var(--danger); width: 10px; height: 18px; overflow: hidden; @@ -210,7 +210,7 @@ fieldset.required { .alert { z-index: 1040; - box-shadow: 0 0 2px 0 rgba($secondary, 0.75); + box-shadow: 0 0 2px 0 rgba(var(--secondary), 0.75); } } diff --git a/client/web/privacy/src/themes/corteza-base/index.scss b/client/web/privacy/src/themes/corteza-base/index.scss index 38023d606..06e679b04 100644 --- a/client/web/privacy/src/themes/corteza-base/index.scss +++ b/client/web/privacy/src/themes/corteza-base/index.scss @@ -1,6 +1,3 @@ -@import "./variables"; -@import "~bootstrap/scss/bootstrap"; -@import '~bootstrap-vue/src/index.scss'; @import '~vue-select/src/scss/vue-select.scss'; @import "./custom"; @import "./poppins.scss"; diff --git a/client/web/privacy/src/themes/corteza-base/poppins.scss b/client/web/privacy/src/themes/corteza-base/poppins.scss index 9667c1f7e..80d24a908 100644 --- a/client/web/privacy/src/themes/corteza-base/poppins.scss +++ b/client/web/privacy/src/themes/corteza-base/poppins.scss @@ -1,3 +1,6 @@ +// Fonts Path +$fonts_dir : './fonts/' !default; + @font-face { font-family: 'Poppins-Bold'; src: url($fonts_dir + 'poppins/Poppins-Bold.ttf') format('truetype'); diff --git a/client/web/privacy/src/themes/corteza-base/variables.scss b/client/web/privacy/src/themes/corteza-base/variables.scss deleted file mode 100644 index d24ad9757..000000000 --- a/client/web/privacy/src/themes/corteza-base/variables.scss +++ /dev/null @@ -1,124 +0,0 @@ -$wideminwidth:767px !default; -$confortableminwidth:1020px !default; - -// Paths -$fonts_dir : './fonts/' !default; - -// Typography -$font-light: 'Poppins-Light' !default; -$font-regular: 'Poppins-Regular' !default; -$font-medium: 'Poppins-Medium' !default; -$font-semibold: 'Poppins-Semibold' !default; -$font-bold: 'Poppins-Bold' !default; -$font-size-base: 0.9rem !default; - -$font-family-base: $font-regular !default; -$headings-font-family: $font-semibold !default; - -// Color system -$white: #FFFFFF !default; -$black: #162425 !default; -$primary: #0B344E !default; -$secondary: #758D9B !default; -$success: #43AA8B !default; -$warning: #E2A046 !default; -$danger: #E54122 !default; -$light: #E4E9EF !default; -$dark: #162425 !default; -$tertiary: #5E727E !default; - -$gray-200: #F9FAFB !default; - -$theme-colors: () !default; -$theme-colors: map-merge( - ( - "white": $white, - "tertiary": $tertiary, - ), - $theme-colors -); - -// Grid - maybe not the smartest idea to change this but let's see -$grid-breakpoints: ( - xs: 0, - sm: 576px, - md: 768px, - lg: 992px, - xl: 1500px -) !default; - -// Options -$enable-rounded: true !default; -$enable-gradients: false !default; -$enable-responsive-font-sizes: true !default; - -// Body -$body-bg: $gray-200 !default; - -// Card -$card-border-radius: 1rem !default; -$card-border-width: 0 !default; -$card-cap-bg: $gray-200 !default; - -// Tables -$table-cell-padding-sm: 0.25rem !default; -$table-hover-bg: $gray-200 !default; - -// Buttons -$btn-font-size: $font-size-base !default; -$btn-padding-y: 0.25em !default; -$btn-padding-x: 1em !default; - -$btn-focus-width: 0.2rem !default; -$btn-focus-box-shadow: none !default; -$btn-active-box-shadow: none !default; - -$btn-font-size-lg: 16px !default; -$btn-font-family: $font-semibold !default; - -$topbar-height: 64px !default; - -// Navbar -$navbar-bg: $white !default; -$navbar-color: $black !default; -$navbar-border: $primary !default; -$navbar-active-bg: $white !default; -$navbar-active-color: $primary !default; -$navbar-active-border: $primary !default; -$navbar-hover-bg: $white !default; -$navbar-hover-color: $primary !default; -$navbar-hover-border: $primary !default; -$navbar-height: 50px !default; -$navbar-padding-y: 0 !default; -$navbar-padding-x: 0 !default; - -$navbar-toggler-font-size: 24px !default; -$sidebar-width: 320px !default; -$sidebar-bg: #F4F7FA; - -// Pagination -$pagination-color: $primary !default; -$pagination-disabled-bg: transparent !default; -$pagination-bg: transparent !default; -$pagination-active-bg: $primary !default; -$pagination-border-width: 0 !default; - -// Forms -$input-font-size: $font-size-base !default; - -$input-border-color: $light !default; -$input-border-width: 2px !default; - -$input-btn-focus-width: 0 !default; -$input-focus-box-shadow: none !default; -$input-focus-border-color: $primary !default; - -/* stylelint-disable */ -// This is used within corteza-webapp-compose/src/lib/block/Calendar/feedLoader/ -// to determine default event colors -:export { - primary: $primary; - danger: $danger; - secondary: $secondary; -} -/* stylelint-enable */ diff --git a/client/web/privacy/src/views/Layout.vue b/client/web/privacy/src/views/Layout.vue index 7d4df173e..509885dfd 100644 --- a/client/web/privacy/src/views/Layout.vue +++ b/client/web/privacy/src/views/Layout.vue @@ -137,7 +137,7 @@ export default { transition: min-width 0.2s ease-in-out; &.expanded { - min-width: $sidebar-width; + min-width: var(--sidebar-width); -webkit-transition: min-width 0.2s ease-in-out; -moz-transition: min-width 0.2s ease-in-out; -o-transition: min-width 0.2s ease-in-out; diff --git a/client/web/privacy/vue.config-builder.js b/client/web/privacy/vue.config-builder.js index b59b04fa1..46ff13123 100644 --- a/client/web/privacy/vue.config-builder.js +++ b/client/web/privacy/vue.config-builder.js @@ -1,23 +1,20 @@ -const webpack = require('webpack') -const exec = require('child_process').execSync -const path = require('path') +var webpack = require('webpack') +var exec = require('child_process').execSync +var path = require('path') +var Vue = require('vue') -module.exports = ({ appFlavour, appLabel, version, theme, packageAlias, root = path.resolve('.'), env = process.env.NODE_ENV }) => { +module.exports = ({ appFlavour, appLabel, version = process.env.BUILD_VERSION, theme, packageAlias, root = path.resolve('.'), env = process.env.NODE_ENV }) => { const isDevelopment = (env === 'development') const isTest = (env === 'test') - if (isTest || isDevelopment) { - const Vue = require('vue') + if (isTest) { + Vue.config.devtools = false + Vue.config.productionTip = false + } - if (isTest) { - Vue.config.devtools = false - Vue.config.productionTip = false - } - - if (isDevelopment) { - Vue.config.devtools = true - Vue.config.performance = true - } + if (isDevelopment) { + Vue.config.devtools = true + Vue.config.performance = true } const optimization = isTest ? {} : { @@ -36,14 +33,14 @@ module.exports = ({ appFlavour, appLabel, version, theme, packageAlias, root = p return { publicPath: './', - lintOnSave: true, - runtimeCompiler: true, configureWebpack: { // other webpack options to merge in ... + // Make sure webpack is not too nosy + // and tries to tinker around linked packages resolve: { symlinks: false }, plugins: [ @@ -59,8 +56,26 @@ module.exports = ({ appFlavour, appLabel, version, theme, packageAlias, root = p }, chainWebpack: config => { + // https://cli.vuejs.org/guide/troubleshooting.html#symbolic-links-in-node-modules + config.resolve.symlinks(false) + + // Remove css extraction issues + // https://github.com/vuejs/vue-cli/issues/3771#issuecomment-526228100 + config.plugin('friendly-errors').tap(args => { + const vueCli3Transformer = args[0].additionalTransformers[0] + args[0].additionalTransformers = [ + vueCli3Transformer, + error => { + const regexp = /\[mini-css-extract-plugin\]/ + if (regexp.test(error.message)) return {} + return error + }, + ] + return args + }) + // Do not copy config files (deployment procedure will do that) - config.plugin('copy').tap(options => { + config.plugins.has('copy') && config.plugin('copy').tap(options => { options[0][0].ignore.push('config*js') options[0][0].ignore.push('*gitignore') return options @@ -94,6 +109,7 @@ module.exports = ({ appFlavour, appLabel, version, theme, packageAlias, root = p scssNormal.use('resolve-url-loader') .loader('resolve-url-loader').options({ keepQuery: true, + removeCR: true, root: path.join(root, 'src/themes', theme), }) .before('sass-loader') @@ -104,6 +120,12 @@ module.exports = ({ appFlavour, appLabel, version, theme, packageAlias, root = p hot: true, disableHostCheck: true, + proxy: { + '^/custom.css': { + target: fetchBaseUrl(), + }, + }, + watchOptions: { ignored: [ // Do not watch for changes under node_modules @@ -118,11 +140,30 @@ module.exports = ({ appFlavour, appLabel, version, theme, packageAlias, root = p css: { sourceMap: isDevelopment, loaderOptions: { - sass: { - // @todo cleanup all components and remove this global import - additionalData: `@import "./src/themes/${theme}/variables.scss";`, - }, + sass: {}, }, }, } } + +function fetchBaseUrl () { + var fs = require('fs') + var window = {} + + const fileContents = + fs.existsSync('public/config.js') + ? fs.readFileSync('public/config.js', 'utf-8') + : '' + + try { + // eslint-disable-next-line no-eval + eval(fileContents) + + const u = window.CortezaAPI || '' + const ur = new URL(u.startsWith('//') ? `http:${u}` : u) + + return `${ur.protocol}//${ur.host}/` + } catch (e) { + return '/' + } +} diff --git a/client/web/reporter/public/index.html b/client/web/reporter/public/index.html index d3922e1b0..7729bf78f 100644 --- a/client/web/reporter/public/index.html +++ b/client/web/reporter/public/index.html @@ -10,6 +10,7 @@ + <%= FLAVOUR %> @@ -25,9 +26,6 @@
- \ No newline at end of file diff --git a/client/web/reporter/src/components/Common/Prefilter.vue b/client/web/reporter/src/components/Common/Prefilter.vue index 7880c90d1..8708b8d5b 100644 --- a/client/web/reporter/src/components/Common/Prefilter.vue +++ b/client/web/reporter/src/components/Common/Prefilter.vue @@ -427,8 +427,8 @@ export default { .btn-add-group { &:hover, &:active { - background-color: $primary !important; - color: $white !important; + background-color: var(--primary) !important; + color: var(--white) !important; } } diff --git a/client/web/reporter/src/components/Report/Datasources/Aggregate/GroupBy.vue b/client/web/reporter/src/components/Report/Datasources/Aggregate/GroupBy.vue index b962c3cee..a6e643e70 100644 --- a/client/web/reporter/src/components/Report/Datasources/Aggregate/GroupBy.vue +++ b/client/web/reporter/src/components/Report/Datasources/Aggregate/GroupBy.vue @@ -133,8 +133,8 @@ export default { .btn-add-group { &:hover, &:active { - background-color: $primary !important; - color: $white !important; + background-color: var(--primary) !important; + color: var(--white)!important; } } diff --git a/client/web/reporter/src/components/Report/Grid.vue b/client/web/reporter/src/components/Report/Grid.vue index dadfb1ee3..383ba9b72 100644 --- a/client/web/reporter/src/components/Report/Grid.vue +++ b/client/web/reporter/src/components/Report/Grid.vue @@ -119,14 +119,14 @@ export default { diff --git a/client/web/reporter/src/components/ReportSidebar.vue b/client/web/reporter/src/components/ReportSidebar.vue index 13686c2de..30d6f469d 100644 --- a/client/web/reporter/src/components/ReportSidebar.vue +++ b/client/web/reporter/src/components/ReportSidebar.vue @@ -98,7 +98,7 @@ export default { // Using font-weight-bold moves the sidebar nav content; text-stroke keeps in nicely in place .nav-active { - color: $primary; - -webkit-text-stroke: 0.4px $primary; + color: var(--primary); + -webkit-text-stroke: 0.4px var(--primary); } diff --git a/client/web/reporter/src/plugins/index.js b/client/web/reporter/src/plugins/index.js index d5ca38400..1bd169533 100644 --- a/client/web/reporter/src/plugins/index.js +++ b/client/web/reporter/src/plugins/index.js @@ -2,9 +2,6 @@ import Vue from 'vue' import Router from 'vue-router' import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue' -import 'bootstrap/dist/css/bootstrap.css' -import 'bootstrap-vue/dist/bootstrap-vue.css' - import { plugins } from '@cortezaproject/corteza-vue' Vue.use(Router) diff --git a/client/web/reporter/src/themes/corteza-base/custom.scss b/client/web/reporter/src/themes/corteza-base/custom.scss index 11d938e99..676808aef 100644 --- a/client/web/reporter/src/themes/corteza-base/custom.scss +++ b/client/web/reporter/src/themes/corteza-base/custom.scss @@ -10,7 +10,7 @@ body { } :focus { - outline-color: $primary; + outline-color: var(--primary); } button:disabled { @@ -36,13 +36,13 @@ thead th, legend, label, .btn { - font-family: $font-medium; + font-family: var(--font-medium); } strong, b, .font-weight-bold { - font-family: $font-semibold; + font-family: var(--font-semibold); } th { @@ -72,7 +72,7 @@ th { .vs__dropdown-toggle { height: 100%; - border-color: $light; + border-color: var(--light); border-width: 2px; } @@ -83,7 +83,7 @@ th { .vs__clear, .vs__open-indicator { - fill: $gray-900; + fill: var(--gray-900); } .vs__selected-options { @@ -119,7 +119,7 @@ th { .rt-content { &.editor { border-radius: 4px; - border: 2px solid $light; + border: 2px solid var(--light); } .editor__content { @@ -137,7 +137,7 @@ th { // blockquote blockquote { - border-left: 3px solid rgba($black, 0.1); + border-left: 3px solid rgba(var(--black), 0.1); padding-left: 0.8rem; font-style: italic; } @@ -161,7 +161,7 @@ th { } .todo-checkbox { - border: 2px solid $black; + border: 2px solid var(--black); height: 0.9em; width: 0.9em; box-sizing: border-box; @@ -194,7 +194,7 @@ th { } > .todo-checkbox { - background-color: $black; + background-color: var(--black); } } @@ -206,14 +206,14 @@ th { fieldset.required { &.error { legend::before { - color: $danger; + color: var(--danger); } } label::after { content: "*"; display: inline-block; - color: $danger; + color: var(--danger); width: 10px; height: 18px; overflow: hidden; @@ -227,7 +227,7 @@ fieldset.required { .alert { z-index: 1040; - box-shadow: 0 0 2px 0 rgba($secondary, 0.75); + box-shadow: 0 0 2px 0 rgba(var(--secondary), 0.75); } } diff --git a/client/web/reporter/src/themes/corteza-base/index.scss b/client/web/reporter/src/themes/corteza-base/index.scss index 50a9db926..2b5dea2cf 100644 --- a/client/web/reporter/src/themes/corteza-base/index.scss +++ b/client/web/reporter/src/themes/corteza-base/index.scss @@ -1,6 +1,3 @@ -@import "./variables"; -@import "~bootstrap/scss/bootstrap"; -@import '~bootstrap-vue/src/index.scss'; @import "./custom"; @import "./poppins.scss"; @import '~vue-select/src/scss/vue-select.scss'; diff --git a/client/web/reporter/src/themes/corteza-base/poppins.scss b/client/web/reporter/src/themes/corteza-base/poppins.scss index 9667c1f7e..80d24a908 100644 --- a/client/web/reporter/src/themes/corteza-base/poppins.scss +++ b/client/web/reporter/src/themes/corteza-base/poppins.scss @@ -1,3 +1,6 @@ +// Fonts Path +$fonts_dir : './fonts/' !default; + @font-face { font-family: 'Poppins-Bold'; src: url($fonts_dir + 'poppins/Poppins-Bold.ttf') format('truetype'); diff --git a/client/web/reporter/src/views/Layout.vue b/client/web/reporter/src/views/Layout.vue index 2f6077ba8..3ee782ce0 100644 --- a/client/web/reporter/src/views/Layout.vue +++ b/client/web/reporter/src/views/Layout.vue @@ -190,7 +190,7 @@ export default { transition: min-width 0.2s ease-in-out; &.expanded { - min-width: $sidebar-width; + min-width: var(--sidebar-width); -webkit-transition: min-width 0.2s ease-in-out; -moz-transition: min-width 0.2s ease-in-out; -o-transition: min-width 0.2s ease-in-out; diff --git a/client/web/reporter/src/views/Report/Builder.vue b/client/web/reporter/src/views/Report/Builder.vue index d48586cef..5c630f9d8 100644 --- a/client/web/reporter/src/views/Report/Builder.vue +++ b/client/web/reporter/src/views/Report/Builder.vue @@ -991,7 +991,7 @@ export default { diff --git a/client/web/workflow/src/components/ExpressionEditor.vue b/client/web/workflow/src/components/ExpressionEditor.vue index 6f8cca48e..59fa6f5d0 100644 --- a/client/web/workflow/src/components/ExpressionEditor.vue +++ b/client/web/workflow/src/components/ExpressionEditor.vue @@ -107,8 +107,8 @@ export default { diff --git a/client/web/workflow/src/components/WorkflowEditor.vue b/client/web/workflow/src/components/WorkflowEditor.vue index d03122177..7ad09e365 100644 --- a/client/web/workflow/src/components/WorkflowEditor.vue +++ b/client/web/workflow/src/components/WorkflowEditor.vue @@ -2548,7 +2548,7 @@ export default { } .toolbar { - background-color: $gray-200 !important; + background-color: var(--gray-200) !important; width: 66px; } diff --git a/client/web/workflow/src/plugins/index.js b/client/web/workflow/src/plugins/index.js index 3c2e12a9b..3d9ad2802 100644 --- a/client/web/workflow/src/plugins/index.js +++ b/client/web/workflow/src/plugins/index.js @@ -2,9 +2,6 @@ import Vue from 'vue' import Router from 'vue-router' import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue' -import 'bootstrap/dist/css/bootstrap.css' -import 'bootstrap-vue/dist/bootstrap-vue.css' - import { plugins } from '@cortezaproject/corteza-vue' Vue.use(BootstrapVue, { diff --git a/client/web/workflow/src/themes/corteza-base/custom.scss b/client/web/workflow/src/themes/corteza-base/custom.scss index f8e10f8a2..0164e3cce 100644 --- a/client/web/workflow/src/themes/corteza-base/custom.scss +++ b/client/web/workflow/src/themes/corteza-base/custom.scss @@ -10,7 +10,7 @@ body { } :focus { - outline-color: $primary; + outline-color: var(--primary); } button:disabled { @@ -36,13 +36,13 @@ thead th, legend, label, .btn { - font-family: $font-medium; + font-family: var(--font-medium); } strong, b, .font-weight-bold { - font-family: $font-semibold; + font-family: var(--font-semibold); } th { @@ -70,7 +70,7 @@ th { padding: 0.375rem; padding-top: 0; border-width: 2px; - border-color: $light; + border-color: var(--light); background-color: white; .vs__selected { @@ -84,7 +84,7 @@ th { .vs__clear, .vs__open-indicator { - fill: $gray-900; + fill: var(--gray-900); display: inline-flex; } } @@ -94,7 +94,7 @@ th { } .loader { - height: calc(100vh - 2 * #{$topbar-height}); + height: calc(100vh - 2 * #{var(--topbar-height)}); display: flex; align-items: center; justify-content: space-around; @@ -126,7 +126,7 @@ th { .rt-content { &.editor { border-radius: 4px; - border: 2px solid $light; + border: 2px solid var(--light); } .editor__content { @@ -144,7 +144,7 @@ th { // blockquote blockquote { - border-left: 3px solid rgba($black, 0.1); + border-left: 3px solid rgba(var(--black), 0.1); padding-left: 0.8rem; font-style: italic; } @@ -168,7 +168,7 @@ th { } .todo-checkbox { - border: 2px solid $black; + border: 2px solid var(--black); height: 0.9em; width: 0.9em; box-sizing: border-box; @@ -201,7 +201,7 @@ th { } > .todo-checkbox { - background-color: $black; + background-color: var(--black); } } @@ -213,14 +213,14 @@ th { fieldset.required { &.error { legend::before { - color: $danger; + color: var(--danger); } } label::after { content: "*"; display: inline-block; - color: $danger; + color: var(--danger); width: 10px; height: 18px; overflow: hidden; @@ -264,8 +264,8 @@ fieldset.required { body { margin: 0; - color: $black; - background-color: $white; + color: var(--black); + background-color: var(--white); } .block { diff --git a/client/web/workflow/src/themes/corteza-base/index.scss b/client/web/workflow/src/themes/corteza-base/index.scss index edf1eaf45..5d4c06448 100644 --- a/client/web/workflow/src/themes/corteza-base/index.scss +++ b/client/web/workflow/src/themes/corteza-base/index.scss @@ -1,6 +1,3 @@ -@import "./variables"; -@import "~bootstrap/scss/bootstrap"; -@import '~bootstrap-vue/src/index.scss'; @import "./custom"; @import "./poppins.scss"; @import "./mxgraph.scss"; diff --git a/client/web/workflow/src/themes/corteza-base/mxgraph.scss b/client/web/workflow/src/themes/corteza-base/mxgraph.scss index 3ed505b97..ec9f47df2 100644 --- a/client/web/workflow/src/themes/corteza-base/mxgraph.scss +++ b/client/web/workflow/src/themes/corteza-base/mxgraph.scss @@ -19,11 +19,11 @@ img.mxToolbarModeSelected { } div.mxTooltip { - font-family: $font-family-base; + font-family: var(--font-family-base); -webkit-box-shadow: 3px 3px 12px #C0C0C0; -moz-box-shadow: 3px 3px 12px #C0C0C0; box-shadow: 3px 3px 12px #C0C0C0; - background: $white; + background: var(--white); border-style: solid; border-width: 2px; border-color: #A7D0E3; diff --git a/client/web/workflow/src/themes/corteza-base/poppins.scss b/client/web/workflow/src/themes/corteza-base/poppins.scss index 9667c1f7e..80d24a908 100644 --- a/client/web/workflow/src/themes/corteza-base/poppins.scss +++ b/client/web/workflow/src/themes/corteza-base/poppins.scss @@ -1,3 +1,6 @@ +// Fonts Path +$fonts_dir : './fonts/' !default; + @font-face { font-family: 'Poppins-Bold'; src: url($fonts_dir + 'poppins/Poppins-Bold.ttf') format('truetype'); diff --git a/client/web/workflow/src/themes/corteza-base/variables.scss b/client/web/workflow/src/themes/corteza-base/variables.scss deleted file mode 100644 index 2e10e7934..000000000 --- a/client/web/workflow/src/themes/corteza-base/variables.scss +++ /dev/null @@ -1,124 +0,0 @@ -$wideminwidth:767px !default; -$confortableminwidth:1020px !default; - -// Paths -$fonts_dir : './fonts/' !default; - -// Typography -$font-light: 'Poppins-Light' !default; -$font-regular: 'Poppins-Regular' !default; -$font-medium: 'Poppins-Medium' !default; -$font-semibold: 'Poppins-Semibold' !default; -$font-bold: 'Poppins-Bold' !default; -$font-size-base: 0.9rem !default; - -$font-family-base: $font-regular !default; -$headings-font-family: $font-semibold !default; - -// Color system -$white: #FFFFFF !default; -$black: #162425 !default; -$primary: #0B344E !default; -$secondary: #758D9B !default; -$success: #43AA8B !default; -$warning: #E2A046 !default; -$danger: #E54122 !default; -$light: #F3F5F7 !default; -$dark: #162425 !default; -$tertiary: #5E727E !default; - -$gray-200: #F9FAFB !default; - -$theme-colors: () !default; -$theme-colors: map-merge( - ( - "white": $white, - "tertiary": $tertiary, - ), - $theme-colors -); - -// Grid - maybe not the smartest idea to change this but let's see -$grid-breakpoints: ( - xs: 0, - sm: 576px, - md: 768px, - lg: 992px, - xl: 1500px -) !default; - -// Options -$enable-rounded: true !default; -$enable-gradients: false !default; -$enable-responsive-font-sizes: true !default; - -// Body -$body-bg: $gray-200 !default; - -// Card -$card-border-radius: 1rem !default; -$card-border-width: 0 !default; -$card-cap-bg: $gray-200 !default; - -// Tables -$table-cell-padding-sm: 0.25rem !default; -$table-hover-bg: $gray-200 !default; - -// Buttons -$btn-font-size: $font-size-base !default; -$btn-padding-y: 0.25em !default; -$btn-padding-x: 1em !default; - -$btn-focus-width: 0.2rem !default; -$btn-focus-box-shadow: none !default; -$btn-active-box-shadow: none !default; - -$btn-font-size-lg: 16px !default; -$btn-font-family: $font-semibold !default; - -$topbar-height: 64px !default; - -// Navbar -$navbar-bg: $white !default; -$navbar-color: $black !default; -$navbar-border: $primary !default; -$navbar-active-bg: $white !default; -$navbar-active-color: $primary !default; -$navbar-active-border: $primary !default; -$navbar-hover-bg: $white !default; -$navbar-hover-color: $primary !default; -$navbar-hover-border: $primary !default; -$navbar-height: 50px !default; -$navbar-padding-y: 0 !default; -$navbar-padding-x: 0 !default; - -$navbar-toggler-font-size: 24px !default; -$sidebar-width: 320px !default; -$sidebar-bg: #F4F7FA; - -// Pagination -$pagination-color: $primary !default; -$pagination-disabled-bg: transparent !default; -$pagination-bg: transparent !default; -$pagination-active-bg: $primary !default; -$pagination-border-width: 0 !default; - -// Forms -$input-font-size: $font-size-base !default; - -$input-border-color: $light !default; -$input-border-width: 2px !default; - -$input-btn-focus-width: 0 !default; -$input-focus-box-shadow: none !default; -$input-focus-border-color: $primary !default; - -/* stylelint-disable */ -// This is used within corteza-webapp-compose/src/lib/block/Calendar/feedLoader/ -// to determine default event colors -:export { - primary: $primary; - danger: $danger; - secondary: $secondary; -} -/* stylelint-enable */ diff --git a/client/web/workflow/src/views/Layout.vue b/client/web/workflow/src/views/Layout.vue index e1f43d704..a77798c12 100644 --- a/client/web/workflow/src/views/Layout.vue +++ b/client/web/workflow/src/views/Layout.vue @@ -151,7 +151,7 @@ export default { transition: min-width 0.2s ease-in-out; &.expanded { - min-width: $sidebar-width; + min-width: var(--sidebar-width); -webkit-transition: min-width 0.2s ease-in-out; -moz-transition: min-width 0.2s ease-in-out; -o-transition: min-width 0.2s ease-in-out; diff --git a/client/web/workflow/src/views/Workflow/Editor.vue b/client/web/workflow/src/views/Workflow/Editor.vue index 6894bd310..43ab9e963 100644 --- a/client/web/workflow/src/views/Workflow/Editor.vue +++ b/client/web/workflow/src/views/Workflow/Editor.vue @@ -247,7 +247,7 @@ export default { margin: 0 auto; border-left: 10px solid transparent; border-right: 10px solid transparent; - border-bottom: 10px solid $light; + border-bottom: 10px solid var(--light); } } diff --git a/client/web/workflow/vue.config-builder.js b/client/web/workflow/vue.config-builder.js index 9b8492b15..46ff13123 100644 --- a/client/web/workflow/vue.config-builder.js +++ b/client/web/workflow/vue.config-builder.js @@ -1,23 +1,20 @@ -const webpack = require('webpack') -const exec = require('child_process').execSync -const path = require('path') +var webpack = require('webpack') +var exec = require('child_process').execSync +var path = require('path') +var Vue = require('vue') -module.exports = ({ appFlavour, appLabel, version, theme, packageAlias, root = path.resolve('.'), env = process.env.NODE_ENV }) => { +module.exports = ({ appFlavour, appLabel, version = process.env.BUILD_VERSION, theme, packageAlias, root = path.resolve('.'), env = process.env.NODE_ENV }) => { const isDevelopment = (env === 'development') const isTest = (env === 'test') - if (isTest || isDevelopment) { - const Vue = require('vue') + if (isTest) { + Vue.config.devtools = false + Vue.config.productionTip = false + } - if (isTest) { - Vue.config.devtools = false - Vue.config.productionTip = false - } - - if (isDevelopment) { - Vue.config.devtools = true - Vue.config.performance = true - } + if (isDevelopment) { + Vue.config.devtools = true + Vue.config.performance = true } const optimization = isTest ? {} : { @@ -36,14 +33,14 @@ module.exports = ({ appFlavour, appLabel, version, theme, packageAlias, root = p return { publicPath: './', - lintOnSave: true, - runtimeCompiler: true, configureWebpack: { // other webpack options to merge in ... + // Make sure webpack is not too nosy + // and tries to tinker around linked packages resolve: { symlinks: false }, plugins: [ @@ -59,9 +56,28 @@ module.exports = ({ appFlavour, appLabel, version, theme, packageAlias, root = p }, chainWebpack: config => { + // https://cli.vuejs.org/guide/troubleshooting.html#symbolic-links-in-node-modules + config.resolve.symlinks(false) + + // Remove css extraction issues + // https://github.com/vuejs/vue-cli/issues/3771#issuecomment-526228100 + config.plugin('friendly-errors').tap(args => { + const vueCli3Transformer = args[0].additionalTransformers[0] + args[0].additionalTransformers = [ + vueCli3Transformer, + error => { + const regexp = /\[mini-css-extract-plugin\]/ + if (regexp.test(error.message)) return {} + return error + }, + ] + return args + }) + // Do not copy config files (deployment procedure will do that) - config.plugin('copy').tap(options => { + config.plugins.has('copy') && config.plugin('copy').tap(options => { options[0][0].ignore.push('config*js') + options[0][0].ignore.push('*gitignore') return options }) @@ -93,6 +109,7 @@ module.exports = ({ appFlavour, appLabel, version, theme, packageAlias, root = p scssNormal.use('resolve-url-loader') .loader('resolve-url-loader').options({ keepQuery: true, + removeCR: true, root: path.join(root, 'src/themes', theme), }) .before('sass-loader') @@ -103,6 +120,12 @@ module.exports = ({ appFlavour, appLabel, version, theme, packageAlias, root = p hot: true, disableHostCheck: true, + proxy: { + '^/custom.css': { + target: fetchBaseUrl(), + }, + }, + watchOptions: { ignored: [ // Do not watch for changes under node_modules @@ -117,11 +140,30 @@ module.exports = ({ appFlavour, appLabel, version, theme, packageAlias, root = p css: { sourceMap: isDevelopment, loaderOptions: { - sass: { - // @todo cleanup all components and remove this global import - additionalData: `@import "./src/themes/${theme}/variables.scss";`, - }, + sass: {}, }, }, } } + +function fetchBaseUrl () { + var fs = require('fs') + var window = {} + + const fileContents = + fs.existsSync('public/config.js') + ? fs.readFileSync('public/config.js', 'utf-8') + : '' + + try { + // eslint-disable-next-line no-eval + eval(fileContents) + + const u = window.CortezaAPI || '' + const ur = new URL(u.startsWith('//') ? `http:${u}` : u) + + return `${ur.protocol}//${ur.host}/` + } catch (e) { + return '/' + } +} diff --git a/lib/vue/src/components/input/CAceEditor.vue b/lib/vue/src/components/input/CAceEditor.vue index b66f72ab2..19e1d113b 100644 --- a/lib/vue/src/components/input/CAceEditor.vue +++ b/lib/vue/src/components/input/CAceEditor.vue @@ -93,6 +93,7 @@ require('brace/mode/text') require('brace/mode/html') require('brace/mode/css') + require('brace/mode/scss') require('brace/mode/javascript') require('brace/theme/chrome') diff --git a/lib/vue/src/components/input/CInputColorPicker.vue b/lib/vue/src/components/input/CInputColorPicker.vue index e4a760458..b00331384 100644 --- a/lib/vue/src/components/input/CInputColorPicker.vue +++ b/lib/vue/src/components/input/CInputColorPicker.vue @@ -1,53 +1,57 @@