From e4269669d8f36282417098056a6346fa00cd7b9d Mon Sep 17 00:00:00 2001 From: Mumbi Francis Date: Fri, 28 Jul 2023 17:28:33 +0300 Subject: [PATCH] Add Corteza studio UI personalization feature --- client/web/admin/public/index.html | 4 +- .../src/components/Apigw/CFiltersStepper.vue | 6 +- .../web/admin/src/components/CRolePicker.vue | 2 +- .../src/components/ConfirmationToggle.vue | 4 +- .../Permissions/CPermissionList.vue | 6 +- .../Settings/UI/CUIBrandingEditor.vue | 148 + .../components/Settings/UI/CUICustomCSS.vue | 6 +- .../admin/src/themes/corteza-base/custom.scss | 20 +- .../admin/src/themes/corteza-base/index.scss | 5 +- .../src/themes/corteza-base/poppins.scss | 3 + .../admin/src/themes/corteza-base/rtl.scss | 2 +- .../src/themes/corteza-base/variables.scss | 115 - client/web/admin/src/views/Layout.vue | 2 +- client/web/admin/src/views/UI/Index.vue | 21 + client/web/admin/vue.config-builder.js | 58 +- client/web/compose/public/index.html | 4 +- .../compose/src/components/Admin/Import.vue | 10 +- .../src/components/Admin/Page/Tree.vue | 26 +- .../components/Chart/Report/ReportEdit.vue | 2 +- .../compose/src/components/Common/Grid.vue | 2 +- .../components/Common/RecordListFilter.vue | 12 +- .../src/components/PageBlocks/RecordBase.vue | 2 +- .../components/PageBlocks/RecordListBase.vue | 10 +- .../PageBlocks/RecordListConfigurator.vue | 2 +- .../src/components/PageBlocks/TabsBase.vue | 2 +- .../Public/Page/Attachment/ListLoader.vue | 2 +- .../src/components/Translator/Editable.vue | 2 +- .../src/themes/corteza-base/custom.scss | 34 +- .../src/themes/corteza-base/index.scss | 2 - .../src/themes/corteza-base/poppins.scss | 3 + .../compose/src/themes/corteza-base/rtl.scss | 2 +- .../src/themes/corteza-base/variables.scss | 124 - .../compose/src/views/Admin/Pages/Builder.vue | 2 +- .../compose/src/views/Admin/Pages/Edit.vue | 2 +- client/web/compose/src/views/Layout.vue | 2 +- .../web/compose/src/views/Namespace/View.vue | 2 +- client/web/compose/vue.config-builder.js | 44 +- client/web/discovery/public/index.html | 4 +- .../discovery/src/components/DiscoveryMap.vue | 2 +- .../src/themes/corteza-base/custom.scss | 24 +- .../src/themes/corteza-base/index.scss | 3 - .../src/themes/corteza-base/poppins.scss | 3 + .../src/themes/corteza-base/variables.scss | 124 - client/web/discovery/src/views/Layout.vue | 2 +- client/web/discovery/vue.config-builder.js | 84 +- client/web/one/public/index.html | 4 +- .../web/one/src/components/CAppSelector.vue | 2 +- .../one/src/themes/corteza-base/custom.scss | 10 +- .../one/src/themes/corteza-base/index.scss | 2 - .../one/src/themes/corteza-base/poppins.scss | 3 + .../web/one/src/themes/corteza-base/rtl.scss | 2 +- .../src/themes/corteza-base/variables.scss | 78 - client/web/one/src/views/Bridge/Jitsi.vue | 26 +- client/web/one/vue.config-builder.js | 68 +- client/web/privacy/public/index.html | 4 +- .../privacy/src/components/ConnectionMap.vue | 2 +- client/web/privacy/src/plugins/index.js | 3 - .../src/themes/corteza-base/custom.scss | 24 +- .../src/themes/corteza-base/index.scss | 3 - .../src/themes/corteza-base/poppins.scss | 3 + .../src/themes/corteza-base/variables.scss | 124 - client/web/privacy/src/views/Layout.vue | 2 +- client/web/privacy/vue.config-builder.js | 85 +- client/web/reporter/public/index.html | 4 +- .../src/components/Common/Prefilter.vue | 4 +- .../Report/Datasources/Aggregate/GroupBy.vue | 4 +- .../reporter/src/components/Report/Grid.vue | 4 +- .../reporter/src/components/ReportSidebar.vue | 4 +- client/web/reporter/src/plugins/index.js | 3 - .../src/themes/corteza-base/custom.scss | 24 +- .../src/themes/corteza-base/index.scss | 3 - .../src/themes/corteza-base/poppins.scss | 3 + client/web/reporter/src/views/Layout.vue | 2 +- .../web/reporter/src/views/Report/Builder.vue | 2 +- client/web/reporter/vue.config-builder.js | 86 +- client/web/workflow/public/index.html | 4 +- .../src/components/ExpressionEditor.vue | 4 +- .../src/components/ExpressionTable.vue | 2 +- .../src/components/WorkflowEditor.vue | 2 +- client/web/workflow/src/plugins/index.js | 3 - .../src/themes/corteza-base/custom.scss | 28 +- .../src/themes/corteza-base/index.scss | 3 - .../src/themes/corteza-base/mxgraph.scss | 4 +- .../src/themes/corteza-base/poppins.scss | 3 + .../src/themes/corteza-base/variables.scss | 124 - client/web/workflow/src/views/Layout.vue | 2 +- .../workflow/src/views/Workflow/Editor.vue | 2 +- client/web/workflow/vue.config-builder.js | 86 +- lib/vue/src/components/input/CAceEditor.vue | 1 + .../components/input/CInputColorPicker.vue | 107 +- .../src/components/navigation/CSidebar.vue | 4 +- lib/vue/src/components/navigation/CTopbar.vue | 2 +- .../en/corteza-webapp-admin/ui.settings.yaml | 21 +- server/.env.example | 11 + server/app/app.cue | 1 + server/app/options/webapp.cue | 15 + server/app/servers.go | 2 +- server/assets/embed.go | 26 +- server/assets/src/css/minified-custom.css | 1 + .../src/scss/18182031_webapp_variable.scss | 36 +- .../assets/src/scss/18182331_functions.scss | 144 + .../assets/src/scss/18182332_variables.scss | 1143 ++++ server/assets/src/scss/18182341_mixins.scss | 1401 +++++ server/assets/src/scss/18182361_root.scss | 24 + server/assets/src/scss/18183131_alert.scss | 52 + server/assets/src/scss/18183231_badge.scss | 54 + .../assets/src/scss/18183331_breadcrumb.scss | 44 + .../src/scss/18183431_button-group.scss | 163 + server/assets/src/scss/18183531_buttons.scss | 142 + server/assets/src/scss/18183631_card.scss | 286 + server/assets/src/scss/18183731_carousel.scss | 197 + server/assets/src/scss/18183831_close.scss | 40 + server/assets/src/scss/18183931_code.scss | 48 + .../src/scss/18184031_custom-forms.scss | 524 ++ server/assets/src/scss/18184131_dropdown.scss | 192 + server/assets/src/scss/18184231_forms.scss | 347 ++ server/assets/src/scss/18184431_grid.scss | 73 + server/assets/src/scss/18184531_images.scss | 42 + .../assets/src/scss/18184631_input-group.scss | 192 + .../assets/src/scss/18184731_jumbotron.scss | 17 + .../assets/src/scss/18184831_list-group.scss | 154 + server/assets/src/scss/18184931_media.scss | 8 + server/assets/src/scss/18185131_modal.scss | 240 + server/assets/src/scss/18185231_nav.scss | 123 + server/assets/src/scss/18185331_navbar.scss | 324 + .../assets/src/scss/18185431_pagination.scss | 74 + server/assets/src/scss/18185531_popover.scss | 170 + server/assets/src/scss/18185731_progress.scss | 47 + server/assets/src/scss/18185831_reboot.scss | 484 ++ server/assets/src/scss/18190031_spinners.scss | 56 + server/assets/src/scss/18190131_tables.scss | 185 + server/assets/src/scss/18190231_toasts.scss | 46 + server/assets/src/scss/18190331_tooltip.scss | 115 + .../assets/src/scss/18190431_transitions.scss | 20 + server/assets/src/scss/18190531_type.scss | 125 + .../assets/src/scss/18191131_utilities.scss | 505 ++ server/assets/src/scss/18191141_print.scss | 140 + .../assets/src/scss/18201131_bootsrapvue.scss | 3045 ++++++++++ server/go.mod | 4 +- server/go.sum | 9 +- server/pkg/options/options.gen.go | 29 + server/pkg/options/options.go | 2 + server/pkg/sass/processor.go | 194 + server/pkg/sass/sass_store.go | 38 + server/pkg/str/str.go | 9 + server/pkg/webapp/serve.go | 15 +- server/system/service/settings.go | 28 +- server/system/service/stylesheet.go | 64 + server/system/types/app_settings.go | 6 +- .../github.com/bep/godartsass/v2/.gitignore | 17 + .../github.com/bep/godartsass/v2/LICENSE | 21 + .../github.com/bep/godartsass/v2/README.md | 15 + .../github.com/bep/godartsass/v2/codecov.yml | 10 + .../github.com/bep/godartsass/v2/conn.go | 125 + .../v2/internal/embeddedsass/README.md | 5 + .../internal/embeddedsass/embedded_sass.pb.go | 5278 +++++++++++++++++ .../internal/embeddedsass/embedded_sass.proto | 1003 ++++ .../github.com/bep/godartsass/v2/options.go | 231 + .../bep/godartsass/v2/transpiler.go | 564 ++ server/vendor/github.com/cli/safeexec/LICENSE | 25 + .../vendor/github.com/cli/safeexec/README.md | 48 + .../github.com/cli/safeexec/lookpath.go | 17 + .../github.com/cli/safeexec/lookpath_1.18.go | 10 + .../cli/safeexec/lookpath_windows.go | 120 + .../vendor/google.golang.org/protobuf/AUTHORS | 3 - .../google.golang.org/protobuf/CONTRIBUTORS | 3 - .../protobuf/encoding/protojson/decode.go | 174 +- .../protobuf/encoding/protojson/doc.go | 2 +- .../protobuf/encoding/protojson/encode.go | 51 +- .../encoding/protojson/well_known_types.go | 88 +- .../protobuf/encoding/prototext/decode.go | 116 +- .../protobuf/encoding/prototext/encode.go | 39 +- .../protobuf/encoding/protowire/wire.go | 12 +- .../protobuf/internal/descfmt/stringer.go | 66 +- .../internal/encoding/defval/default.go | 78 +- .../protobuf/internal/encoding/json/decode.go | 2 +- .../encoding/messageset/messageset.go | 7 +- .../protobuf/internal/encoding/tag/tag.go | 96 +- .../protobuf/internal/encoding/text/decode.go | 35 +- .../internal/encoding/text/decode_number.go | 49 +- .../protobuf/internal/encoding/text/doc.go | 4 +- .../protobuf/internal/filedesc/build.go | 19 +- .../protobuf/internal/filedesc/desc.go | 378 +- .../protobuf/internal/filedesc/desc_init.go | 36 +- .../protobuf/internal/filedesc/desc_lazy.go | 80 +- .../protobuf/internal/filedesc/desc_list.go | 167 +- .../protobuf/internal/filedesc/placeholder.go | 136 +- .../protobuf/internal/filetype/build.go | 87 +- .../protobuf/internal/genid/descriptor_gen.go | 90 +- .../protobuf/internal/impl/api_export.go | 42 +- .../protobuf/internal/impl/checkinit.go | 12 +- .../protobuf/internal/impl/codec_extension.go | 36 +- .../protobuf/internal/impl/codec_field.go | 90 +- .../protobuf/internal/impl/codec_map.go | 20 +- .../protobuf/internal/impl/codec_message.go | 30 +- .../protobuf/internal/impl/codec_tables.go | 290 +- .../protobuf/internal/impl/convert.go | 229 +- .../protobuf/internal/impl/convert_list.go | 42 +- .../protobuf/internal/impl/convert_map.go | 32 +- .../protobuf/internal/impl/decode.go | 21 +- .../protobuf/internal/impl/enum.go | 10 +- .../protobuf/internal/impl/extension.go | 26 +- .../protobuf/internal/impl/legacy_enum.go | 57 +- .../protobuf/internal/impl/legacy_export.go | 18 +- .../internal/impl/legacy_extension.go | 100 +- .../protobuf/internal/impl/legacy_message.go | 122 +- .../protobuf/internal/impl/merge.go | 32 +- .../protobuf/internal/impl/message.go | 41 +- .../protobuf/internal/impl/message_reflect.go | 74 +- .../internal/impl/message_reflect_field.go | 118 +- .../protobuf/internal/impl/validate.go | 50 +- .../protobuf/internal/impl/weak.go | 16 +- .../protobuf/internal/order/order.go | 16 +- .../protobuf/internal/order/range.go | 22 +- .../protobuf/internal/strs/strings_unsafe.go | 8 +- .../protobuf/internal/version/version.go | 54 +- .../protobuf/proto/decode.go | 3 +- .../google.golang.org/protobuf/proto/doc.go | 24 +- .../protobuf/proto/encode.go | 5 +- .../google.golang.org/protobuf/proto/equal.go | 178 +- .../reflect/protodesc/desc_resolve.go | 6 +- .../protobuf/reflect/protoreflect/proto.go | 30 +- .../protobuf/reflect/protoreflect/source.go | 1 + .../reflect/protoreflect/source_gen.go | 14 + .../protobuf/reflect/protoreflect/type.go | 1 + .../protobuf/reflect/protoreflect/value.go | 2 +- .../reflect/protoreflect/value_equal.go | 168 + .../reflect/protoreflect/value_union.go | 6 +- .../reflect/protoregistry/registry.go | 4 +- .../protobuf/runtime/protoimpl/version.go | 8 +- .../types/descriptorpb/descriptor.pb.go | 1547 +++-- .../protobuf/types/known/anypb/any.pb.go | 127 +- .../types/known/durationpb/duration.pb.go | 63 +- .../types/known/timestamppb/timestamp.pb.go | 61 +- server/vendor/modules.txt | 9 +- 235 files changed, 22920 insertions(+), 3659 deletions(-) create mode 100644 client/web/admin/src/components/Settings/UI/CUIBrandingEditor.vue delete mode 100644 client/web/admin/src/themes/corteza-base/variables.scss delete mode 100644 client/web/compose/src/themes/corteza-base/variables.scss delete mode 100644 client/web/discovery/src/themes/corteza-base/variables.scss delete mode 100644 client/web/one/src/themes/corteza-base/variables.scss delete mode 100644 client/web/privacy/src/themes/corteza-base/variables.scss delete mode 100644 client/web/workflow/src/themes/corteza-base/variables.scss create mode 100644 server/app/options/webapp.cue create mode 100644 server/assets/src/css/minified-custom.css rename client/web/reporter/src/themes/corteza-base/variables.scss => server/assets/src/scss/18182031_webapp_variable.scss (80%) create mode 100644 server/assets/src/scss/18182331_functions.scss create mode 100644 server/assets/src/scss/18182332_variables.scss create mode 100644 server/assets/src/scss/18182341_mixins.scss create mode 100644 server/assets/src/scss/18182361_root.scss create mode 100644 server/assets/src/scss/18183131_alert.scss create mode 100644 server/assets/src/scss/18183231_badge.scss create mode 100644 server/assets/src/scss/18183331_breadcrumb.scss create mode 100644 server/assets/src/scss/18183431_button-group.scss create mode 100644 server/assets/src/scss/18183531_buttons.scss create mode 100644 server/assets/src/scss/18183631_card.scss create mode 100644 server/assets/src/scss/18183731_carousel.scss create mode 100644 server/assets/src/scss/18183831_close.scss create mode 100644 server/assets/src/scss/18183931_code.scss create mode 100644 server/assets/src/scss/18184031_custom-forms.scss create mode 100644 server/assets/src/scss/18184131_dropdown.scss create mode 100644 server/assets/src/scss/18184231_forms.scss create mode 100644 server/assets/src/scss/18184431_grid.scss create mode 100644 server/assets/src/scss/18184531_images.scss create mode 100644 server/assets/src/scss/18184631_input-group.scss create mode 100644 server/assets/src/scss/18184731_jumbotron.scss create mode 100644 server/assets/src/scss/18184831_list-group.scss create mode 100644 server/assets/src/scss/18184931_media.scss create mode 100644 server/assets/src/scss/18185131_modal.scss create mode 100644 server/assets/src/scss/18185231_nav.scss create mode 100644 server/assets/src/scss/18185331_navbar.scss create mode 100644 server/assets/src/scss/18185431_pagination.scss create mode 100644 server/assets/src/scss/18185531_popover.scss create mode 100644 server/assets/src/scss/18185731_progress.scss create mode 100644 server/assets/src/scss/18185831_reboot.scss create mode 100644 server/assets/src/scss/18190031_spinners.scss create mode 100644 server/assets/src/scss/18190131_tables.scss create mode 100644 server/assets/src/scss/18190231_toasts.scss create mode 100644 server/assets/src/scss/18190331_tooltip.scss create mode 100644 server/assets/src/scss/18190431_transitions.scss create mode 100644 server/assets/src/scss/18190531_type.scss create mode 100644 server/assets/src/scss/18191131_utilities.scss create mode 100644 server/assets/src/scss/18191141_print.scss create mode 100644 server/assets/src/scss/18201131_bootsrapvue.scss create mode 100644 server/pkg/sass/processor.go create mode 100644 server/pkg/sass/sass_store.go create mode 100644 server/system/service/stylesheet.go create mode 100644 server/vendor/github.com/bep/godartsass/v2/.gitignore create mode 100644 server/vendor/github.com/bep/godartsass/v2/LICENSE create mode 100644 server/vendor/github.com/bep/godartsass/v2/README.md create mode 100644 server/vendor/github.com/bep/godartsass/v2/codecov.yml create mode 100644 server/vendor/github.com/bep/godartsass/v2/conn.go create mode 100644 server/vendor/github.com/bep/godartsass/v2/internal/embeddedsass/README.md create mode 100644 server/vendor/github.com/bep/godartsass/v2/internal/embeddedsass/embedded_sass.pb.go create mode 100644 server/vendor/github.com/bep/godartsass/v2/internal/embeddedsass/embedded_sass.proto create mode 100644 server/vendor/github.com/bep/godartsass/v2/options.go create mode 100644 server/vendor/github.com/bep/godartsass/v2/transpiler.go create mode 100644 server/vendor/github.com/cli/safeexec/LICENSE create mode 100644 server/vendor/github.com/cli/safeexec/README.md create mode 100644 server/vendor/github.com/cli/safeexec/lookpath.go create mode 100644 server/vendor/github.com/cli/safeexec/lookpath_1.18.go create mode 100644 server/vendor/github.com/cli/safeexec/lookpath_windows.go delete mode 100644 server/vendor/google.golang.org/protobuf/AUTHORS delete mode 100644 server/vendor/google.golang.org/protobuf/CONTRIBUTORS create mode 100644 server/vendor/google.golang.org/protobuf/reflect/protoreflect/value_equal.go 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 @@