Add Corteza studio UI personalization feature
This commit is contained in:
Mumbi Francis
committed by
Mumbi Francis
Mumbi Francis
parent
d10257cc36
commit
e4269669d8
@@ -11,6 +11,7 @@
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" id="favicon">
|
||||
<link rel="stylesheet" type="text/css" href="<%= BASE_URL %>custom.css">
|
||||
<link rel="preload" href="<%= BASE_URL %>config.js" as="script" />
|
||||
<title><%= FLAVOUR %></title>
|
||||
</head>
|
||||
@@ -26,9 +27,6 @@
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
<style>
|
||||
@import url("<%= BASE_URL %>custom.css");
|
||||
</style>
|
||||
<script src="<%= BASE_URL %>config.js" type="text/javascript"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -158,7 +158,7 @@ export default {
|
||||
.filtered-role {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: $light;
|
||||
background-color: var(--light);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -518,7 +518,7 @@ export default {
|
||||
<style lang="scss">
|
||||
.mode {
|
||||
.btn {
|
||||
background-color: $light;
|
||||
background-color: var(--light);
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<b-card
|
||||
class="shadow-sm"
|
||||
header-bg-variant="white"
|
||||
footer-bg-variant="white"
|
||||
>
|
||||
<template #header>
|
||||
<h3 class="m-0">
|
||||
{{ $t('title') }}
|
||||
</h3>
|
||||
</template>
|
||||
|
||||
<div
|
||||
v-if="!sassInstalled"
|
||||
class="bg-warning rounded p-2 mb-3"
|
||||
>
|
||||
{{ $t('sassNotInstalled') }}
|
||||
[<a :href="installSassDocs">{{ $t('installSassDocs') }}</a>]
|
||||
</div>
|
||||
|
||||
<b-row>
|
||||
<b-col
|
||||
v-for="key in Object.keys(brandingVariables)"
|
||||
:key="key"
|
||||
md="6"
|
||||
cols="12"
|
||||
>
|
||||
<b-form-group
|
||||
:label="$t(`brandVariables.${key}`)"
|
||||
label-class="primary"
|
||||
>
|
||||
<c-input-color-picker
|
||||
v-model="brandingVariables[key]"
|
||||
:data-test-id="`input-${key}-color`"
|
||||
width="32px"
|
||||
height="32px"
|
||||
show-color-code-text
|
||||
:translations="colorTranslations"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
<template #footer>
|
||||
<c-submit-button
|
||||
:disabled="!canManage"
|
||||
:processing="processing"
|
||||
:success="success"
|
||||
class="float-right mt-2"
|
||||
@submit="onSubmit"
|
||||
/>
|
||||
</template>
|
||||
</b-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
|
||||
import { components } from '@cortezaproject/corteza-vue'
|
||||
const { CInputColorPicker } = components
|
||||
|
||||
export default {
|
||||
name: 'CUIBrandingEditor',
|
||||
|
||||
i18nOptions: {
|
||||
namespaces: 'ui.settings',
|
||||
keyPrefix: 'editor.corteza-studio',
|
||||
},
|
||||
|
||||
components: {
|
||||
CInputColorPicker,
|
||||
CSubmitButton,
|
||||
},
|
||||
|
||||
props: {
|
||||
settings: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
|
||||
processing: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
|
||||
success: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
|
||||
canManage: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
brandingVariables: {
|
||||
'white': '#FFFFFF',
|
||||
'black': '#162425',
|
||||
'primary': '#0B344E',
|
||||
'secondary': '#758D9B',
|
||||
'success': '#43AA8B',
|
||||
'warning': '#E2A046',
|
||||
'danger': '#E54122',
|
||||
'light': '#E4E9EF',
|
||||
'extra-light': '#F3F5F7',
|
||||
'dark': '#162425',
|
||||
'tertiary': '#5E727E',
|
||||
'gray-200': '#F9FAFB',
|
||||
'body-bg': '#F9FAFB',
|
||||
},
|
||||
colorTranslations: {
|
||||
modalTitle: this.$t('colorPicker'),
|
||||
saveBtnLabel: this.$t('general:label.saveAndClose'),
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
sassInstalled () {
|
||||
return this.settings['ui.studio.sass-installed']
|
||||
},
|
||||
installSassDocs () {
|
||||
// eslint-disable-next-line no-undef
|
||||
const [year, month] = VERSION.split('.')
|
||||
return `https://docs.cortezaproject.org/corteza-docs/${year}.${month}`
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
settings: {
|
||||
immediate: true,
|
||||
handler (settings) {
|
||||
if (settings['ui.studio.branding-sass']) {
|
||||
this.brandingVariables = JSON.parse(settings['ui.studio.branding-sass'])
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
onSubmit () {
|
||||
this.$emit('submit', { 'ui.studio.branding-sass': JSON.stringify(this.brandingVariables) })
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -35,7 +35,7 @@
|
||||
>
|
||||
<c-ace-editor
|
||||
v-model="modalCSSInput"
|
||||
lang="css"
|
||||
lang="scss"
|
||||
height="500px"
|
||||
font-size="14px"
|
||||
show-line-numbers
|
||||
@@ -107,14 +107,14 @@ export default {
|
||||
settings: {
|
||||
immediate: true,
|
||||
handler (settings) {
|
||||
this.customCSS = settings['ui.custom-css'] || ''
|
||||
this.customCSS = settings['ui.studio.custom-css'] || ''
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
onSubmit () {
|
||||
this.$emit('submit', { 'ui.custom-css': this.customCSS })
|
||||
this.$emit('submit', { 'ui.studio.custom-css': this.customCSS })
|
||||
},
|
||||
|
||||
openEditorModal () {
|
||||
|
||||
@@ -10,7 +10,7 @@ body {
|
||||
}
|
||||
|
||||
:focus {
|
||||
outline-color: $primary;
|
||||
outline-color: var(--primary);
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
@@ -49,13 +49,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 {
|
||||
@@ -94,7 +94,7 @@ th {
|
||||
padding: 0.375rem;
|
||||
padding-top: 0;
|
||||
border-width: 2px;
|
||||
border-color: $light;
|
||||
border-color: var(--light);
|
||||
|
||||
.vs__selected {
|
||||
margin-top: 0.375rem;
|
||||
@@ -107,7 +107,7 @@ th {
|
||||
|
||||
.vs__clear,
|
||||
.vs__open-indicator {
|
||||
fill: $gray-900;
|
||||
fill: var(--gray-900);
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
@@ -117,7 +117,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;
|
||||
@@ -148,14 +148,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;
|
||||
@@ -169,7 +169,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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -188,7 +188,7 @@ fieldset.required {
|
||||
}
|
||||
|
||||
.bg-extra-light {
|
||||
background-color: $extra-light;
|
||||
background-color: var(--extra-light);
|
||||
}
|
||||
|
||||
.gap-1 {
|
||||
|
||||
@@ -1,7 +1,4 @@
|
||||
@import "./rtl.scss";
|
||||
@import "~vue-select/dist/vue-select.css";
|
||||
@import "variables.scss";
|
||||
@import '~bootstrap/scss/bootstrap';
|
||||
@import '~bootstrap-vue/src/index.scss';
|
||||
@import "custom";
|
||||
@import "./poppins.scss";
|
||||
@import "./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');
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
[dir] {
|
||||
margin: 0;
|
||||
background-color: $body-bg;
|
||||
background-color: var(--body-bg);
|
||||
}
|
||||
|
||||
[dir="rtl"] {
|
||||
|
||||
@@ -1,115 +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;
|
||||
$extra-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;
|
||||
@@ -230,7 +230,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;
|
||||
|
||||
@@ -11,6 +11,15 @@
|
||||
:can-manage="canManage"
|
||||
/>
|
||||
|
||||
<c-ui-branding-editor
|
||||
:settings="settings"
|
||||
:processing="branding.processing"
|
||||
:success="branding.success"
|
||||
:can-manage="canManage"
|
||||
class="mt-3"
|
||||
@submit="onSubmit($event, 'branding')"
|
||||
/>
|
||||
|
||||
<c-ui-custom-css
|
||||
:settings="settings"
|
||||
:processing="customCSS.processing"
|
||||
@@ -34,6 +43,7 @@
|
||||
<script>
|
||||
import editorHelpers from 'corteza-webapp-admin/src/mixins/editorHelpers'
|
||||
import CUILogoEditor from 'corteza-webapp-admin/src/components/Settings/UI/CUILogoEditor'
|
||||
import CUIBrandingEditor from '../../components/Settings/UI/CUIBrandingEditor.vue'
|
||||
import CUICustomCSS from 'corteza-webapp-admin/src/components/Settings/UI/CUICustomCSS.vue'
|
||||
import CUITopbarSettings from 'corteza-webapp-admin/src/components/Settings/UI/CUITopbarSettings'
|
||||
import { mapGetters } from 'vuex'
|
||||
@@ -49,6 +59,7 @@ export default {
|
||||
components: {
|
||||
'c-ui-logo-editor': CUILogoEditor,
|
||||
'c-ui-custom-css': CUICustomCSS,
|
||||
'c-ui-branding-editor': CUIBrandingEditor,
|
||||
'c-ui-topbar-settings': CUITopbarSettings,
|
||||
},
|
||||
|
||||
@@ -69,6 +80,11 @@ export default {
|
||||
processing: false,
|
||||
success: false,
|
||||
},
|
||||
|
||||
branding: {
|
||||
processing: false,
|
||||
success: false,
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
@@ -117,6 +133,11 @@ export default {
|
||||
.catch(this.toastErrorHandler(this.$t('notification:settings.ui.update.error')))
|
||||
.finally(() => {
|
||||
this[type].processing = false
|
||||
|
||||
// Refresh the page if branding or custom CSS was updated
|
||||
if (type === 'branding' || type === 'customCSS') {
|
||||
window.location.reload()
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
var webpack = require('webpack')
|
||||
var exec = require('child_process').execSync
|
||||
var path = require('path')
|
||||
var Vue = require('vue')
|
||||
|
||||
module.exports = ({ appFlavour, appName, 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')
|
||||
|
||||
var Vue = require('vue')
|
||||
if (isTest) {
|
||||
Vue.config.devtools = false
|
||||
Vue.config.productionTip = false
|
||||
@@ -56,9 +56,28 @@ module.exports = ({ appFlavour, appName, appLabel, version, theme, packageAlias,
|
||||
},
|
||||
|
||||
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
|
||||
})
|
||||
|
||||
@@ -101,6 +120,12 @@ module.exports = ({ appFlavour, appName, appLabel, version, theme, packageAlias,
|
||||
hot: true,
|
||||
disableHostCheck: true,
|
||||
|
||||
proxy: {
|
||||
'^/custom.css': {
|
||||
target: fetchBaseUrl(),
|
||||
},
|
||||
},
|
||||
|
||||
watchOptions: {
|
||||
ignored: [
|
||||
// Do not watch for changes under node_modules
|
||||
@@ -115,11 +140,30 @@ module.exports = ({ appFlavour, appName, appLabel, version, theme, packageAlias,
|
||||
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 '/'
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" id="favicon">
|
||||
<link rel="stylesheet" type="text/css" href="<%= BASE_URL %>custom.css">
|
||||
<link rel="preload" href="<%= BASE_URL %>config.js" as="script" />
|
||||
<title><%= FLAVOUR %></title>
|
||||
</head>
|
||||
@@ -26,9 +27,6 @@
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
<style>
|
||||
@import url("<%= BASE_URL %>custom.css");
|
||||
</style>
|
||||
<script src="<%= BASE_URL %>config.js" type="text/javascript"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -694,7 +694,7 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
.metrics {
|
||||
.metric {
|
||||
background-color: $body-bg;
|
||||
background-color: var(--body-bg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -170,7 +170,7 @@ export default {
|
||||
<style lang="scss">
|
||||
.editable {
|
||||
.grid-item {
|
||||
background-image: linear-gradient(45deg, $gray-200 25%, $white 25%, $white 50%, $gray-200 50%, $gray-200 75%, $white 75%, $white 100%);
|
||||
background-image: linear-gradient(45deg, var(--gray-200) 25%, var(--white) 25%, var(--white) 50%, var(--gray-200) 50%, var(--gray-200) 75%, var(--white) 75%, var(--white) 100%);
|
||||
background-size: 28.28px 28.28px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -689,7 +689,7 @@ export default {
|
||||
padding: 0;
|
||||
color: #2d2d2d;
|
||||
text-align: center;
|
||||
background: $white;
|
||||
background: var(--white);
|
||||
border-radius: 0.25rem;
|
||||
opacity: 1 !important;
|
||||
box-shadow: 0 3px 48px #00000026;
|
||||
@@ -702,12 +702,12 @@ export default {
|
||||
|
||||
.arrow {
|
||||
&::before {
|
||||
border-bottom-color: $white;
|
||||
border-top-color: $white;
|
||||
border-bottom-color: var(--white);
|
||||
border-top-color: var(--white);
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-top-color: $white;
|
||||
border-top-color: var(--white);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -729,8 +729,8 @@ td {
|
||||
|
||||
.btn-add-group {
|
||||
&:hover, &:active {
|
||||
background-color: $primary !important;
|
||||
color: $white !important;
|
||||
background-color: var(--primary) !important;
|
||||
color: var(--white) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -360,7 +360,7 @@ export default {
|
||||
opacity: 1;
|
||||
|
||||
button:hover {
|
||||
color: $primary !important;
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -2078,7 +2078,7 @@ td:hover .inline-actions {
|
||||
width: 1%;
|
||||
|
||||
.regular-font {
|
||||
font-family: $font-regular !important;
|
||||
font-family: var(--font-regular) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1000,6 +1000,6 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.list-background {
|
||||
background-color: $body-bg;
|
||||
background-color: var(--body-bg);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -201,7 +201,7 @@ export default {
|
||||
<style lang="scss">
|
||||
.tabs-base-block-container .nav-pills {
|
||||
.active .edit-block-btn {
|
||||
color: $white !important;
|
||||
color: var(--white) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -366,6 +366,6 @@ export default {
|
||||
}
|
||||
|
||||
.item:hover {
|
||||
background-color: $gray-200;
|
||||
background-color: var(--gray-200);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -44,7 +44,7 @@ div {
|
||||
|
||||
div:empty::before {
|
||||
content: attr(placeholder);
|
||||
color: $secondary;
|
||||
color: var(--secondary);
|
||||
pointer-events: none;
|
||||
display: block; /* For Firefox */
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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";
|
||||
|
||||
@@ -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');
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
[dir] {
|
||||
margin: 0;
|
||||
background-color: $body-bg;
|
||||
background-color: var(--body-bg);
|
||||
}
|
||||
|
||||
[dir="rtl"] {
|
||||
|
||||
@@ -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 */
|
||||
@@ -1094,7 +1094,7 @@ export default {
|
||||
<style lang="scss">
|
||||
div.toolbox {
|
||||
position: absolute;
|
||||
background-color: $dark;
|
||||
background-color: var(--dark);
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1001;
|
||||
|
||||
@@ -1504,7 +1504,7 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.selected-icon {
|
||||
outline: 2px solid $success;
|
||||
outline: 2px solid var(--success);
|
||||
}
|
||||
|
||||
.list-background {
|
||||
|
||||
@@ -315,7 +315,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;
|
||||
|
||||
@@ -192,7 +192,7 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
.error {
|
||||
font-size: 24px;
|
||||
background-color: $white;
|
||||
background-color: var(--white);
|
||||
width: 100vw;
|
||||
height: 20vh;
|
||||
padding: 60px;
|
||||
|
||||
@@ -14,7 +14,7 @@ module.exports = ({ appFlavour, appLabel, version = process.env.BUILD_VERSION, t
|
||||
|
||||
if (isDevelopment) {
|
||||
Vue.config.devtools = true
|
||||
Vue.config.performance = false
|
||||
Vue.config.performance = true
|
||||
}
|
||||
|
||||
const optimization = isTest ? {} : {
|
||||
@@ -24,6 +24,7 @@ module.exports = ({ appFlavour, appLabel, version = process.env.BUILD_VERSION, t
|
||||
cacheGroups: {
|
||||
vendor: {
|
||||
test: /[\\/]node_modules[\\/]/,
|
||||
name: 'vendors',
|
||||
chunks: 'all',
|
||||
},
|
||||
},
|
||||
@@ -37,6 +38,11 @@ module.exports = ({ appFlavour, appLabel, version = process.env.BUILD_VERSION, t
|
||||
|
||||
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),
|
||||
@@ -71,10 +77,11 @@ module.exports = ({ appFlavour, appLabel, version = process.env.BUILD_VERSION, t
|
||||
// Do not copy config files (deployment procedure will do that)
|
||||
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) {
|
||||
@@ -113,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
|
||||
@@ -127,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 '/'
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,6 +10,7 @@
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" id="favicon" href="<%= BASE_URL %>favicon32x32.png">
|
||||
<link rel="stylesheet" type="text/css" href="<%= BASE_URL %>custom.css">
|
||||
<link rel="preload" href="<%= BASE_URL %>config.js" as="script" />
|
||||
<title><%= FLAVOUR %></title>
|
||||
</head>
|
||||
@@ -25,9 +26,6 @@
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
<style>
|
||||
@import url("<%= BASE_URL %>custom.css");
|
||||
</style>
|
||||
<script src="<%= BASE_URL %>config.js" type="text/javascript"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -92,6 +92,6 @@ export default {
|
||||
|
||||
<style lang="scss">
|
||||
.vl-style-text {
|
||||
color: $white;
|
||||
color: var(--white);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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";
|
||||
|
||||
@@ -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');
|
||||
|
||||
@@ -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 */
|
||||
@@ -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;
|
||||
|
||||
@@ -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 '/'
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" id="favicon">
|
||||
<link rel="stylesheet" type="text/css" href="<%= BASE_URL %>custom.css">
|
||||
<link rel="preload" href="<%= BASE_URL %>config.js" as="script" />
|
||||
<title><%= FLAVOUR %></title>
|
||||
</head>
|
||||
@@ -26,9 +27,6 @@
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
<style>
|
||||
@import url("<%= BASE_URL %>custom.css");
|
||||
</style>
|
||||
<script src="<%= BASE_URL %>config.js" type="text/javascript"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -330,7 +330,7 @@ export default {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
.star-icon {
|
||||
fill: $warning;
|
||||
fill: var(--warning);
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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";
|
||||
|
||||
@@ -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');
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
[dir] {
|
||||
margin: 0;
|
||||
background-color: $body-bg;
|
||||
background-color: var(--body-bg);
|
||||
}
|
||||
|
||||
[dir="rtl"] {
|
||||
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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 '/'
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,6 +10,7 @@
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" id="favicon">
|
||||
<link rel="stylesheet" type="text/css" href="<%= BASE_URL %>custom.css">
|
||||
<link rel="preload" href="<%= BASE_URL %>config.js" as="script" />
|
||||
<title><%= FLAVOUR %></title>
|
||||
</head>
|
||||
@@ -25,9 +26,6 @@
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
<style>
|
||||
@import url("<%= BASE_URL %>custom.css");
|
||||
</style>
|
||||
<script src="<%= BASE_URL %>config.js" type="text/javascript"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -110,6 +110,6 @@ export default {
|
||||
|
||||
<style lang="scss">
|
||||
.vl-style-text {
|
||||
color: $white;
|
||||
color: var(--white);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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";
|
||||
|
||||
@@ -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');
|
||||
|
||||
@@ -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 */
|
||||
@@ -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;
|
||||
|
||||
@@ -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 '/'
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,6 +10,7 @@
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" id="favicon">
|
||||
<link rel="stylesheet" type="text/css" href="<%= BASE_URL %>custom.css">
|
||||
<link rel="preload" href="<%= BASE_URL %>config.js" as="script" />
|
||||
<title><%= FLAVOUR %></title>
|
||||
</head>
|
||||
@@ -25,9 +26,6 @@
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
<style>
|
||||
@import url("<%= BASE_URL %>custom.css");
|
||||
</style>
|
||||
<script src="<%= BASE_URL %>config.js" type="text/javascript"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -119,14 +119,14 @@ export default {
|
||||
|
||||
<style lang="scss">
|
||||
.vue-grid-item.vue-grid-placeholder {
|
||||
background: $primary !important;
|
||||
background: var(--primary)!important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.editable-grid-item {
|
||||
touch-action: none;
|
||||
background-image: linear-gradient(45deg, $gray-200 25%, $white 25%, $white 50%, $gray-200 50%, $gray-200 75%, $white 75%, $white 100%);
|
||||
background-image: linear-gradient(45deg, var(--gray-200) 25%, var(--white) 25%, var(--white) 50%, var(--gray-200) 50%, var(--gray-200) 75%, var(--white) 75%, var(--white) 100%);
|
||||
background-size: 28.28px 28.28px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -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');
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -991,7 +991,7 @@ export default {
|
||||
<style lang="scss">
|
||||
div.toolbox {
|
||||
position: absolute;
|
||||
background-color: $dark;
|
||||
background-color: var(--dark);
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1001;
|
||||
|
||||
@@ -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 '/'
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" id="favicon">
|
||||
<link rel="stylesheet" type="text/css" href="<%= BASE_URL %>custom.css">
|
||||
<link rel="preload" href="<%= BASE_URL %>config.js" as="script" />
|
||||
<title><%= FLAVOUR %></title>
|
||||
<style type="text/css">
|
||||
@@ -35,9 +36,6 @@
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
<style>
|
||||
@import url("<%= BASE_URL %>custom.css");
|
||||
</style>
|
||||
<script src="<%= BASE_URL %>config.js" type="text/javascript"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -107,8 +107,8 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.border {
|
||||
background-color: $white;
|
||||
border: 2px solid $light;
|
||||
background-color: var(--white);
|
||||
border: 2px solid var(--light);
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
|
||||
@@ -195,7 +195,7 @@ export default {
|
||||
background-color: #F3F3F5;
|
||||
|
||||
.grab > * {
|
||||
color: $secondary !important;
|
||||
color: var(--secondary) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2548,7 +2548,7 @@ export default {
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
background-color: $gray-200 !important;
|
||||
background-color: var(--gray-200) !important;
|
||||
width: 66px;
|
||||
}
|
||||
|
||||
|
||||
@@ -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, {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -1,6 +1,3 @@
|
||||
@import "./variables";
|
||||
@import "~bootstrap/scss/bootstrap";
|
||||
@import '~bootstrap-vue/src/index.scss';
|
||||
@import "./custom";
|
||||
@import "./poppins.scss";
|
||||
@import "./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;
|
||||
|
||||
@@ -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');
|
||||
|
||||
@@ -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 */
|
||||
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -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 '/'
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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')
|
||||
|
||||
|
||||
@@ -1,53 +1,57 @@
|
||||
<template>
|
||||
<div>
|
||||
<b-button
|
||||
:style="`color: ${pickedColor}; fill: ${pickedColor};`"
|
||||
class="p-0 rounded-circle bg-white border-white shadow-none"
|
||||
@click="toggleMenu"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 32 32"
|
||||
style="width: 32px; height: 32px;"
|
||||
class="border border-light rounded-circle"
|
||||
<div class="d-flex align-items-center">
|
||||
<b-button
|
||||
:style="`color: ${pickedColor}; fill: ${pickedColor};`"
|
||||
class="p-0 rounded-circle bg-white border-white shadow-none"
|
||||
@click="toggleMenu"
|
||||
>
|
||||
<pattern
|
||||
id="checkerboard"
|
||||
width="12"
|
||||
height="12"
|
||||
patternUnits="userSpaceOnUse"
|
||||
fill="FFF"
|
||||
<svg
|
||||
viewBox="0 0 32 32"
|
||||
:style="{ width: width, height: height }"
|
||||
class="border border-light rounded-circle"
|
||||
>
|
||||
<rect
|
||||
fill="#7080707f"
|
||||
x="0"
|
||||
width="6"
|
||||
height="6"
|
||||
y="0"
|
||||
<pattern
|
||||
id="checkerboard"
|
||||
width="12"
|
||||
height="12"
|
||||
patternUnits="userSpaceOnUse"
|
||||
fill="FFF"
|
||||
>
|
||||
<rect
|
||||
fill="#7080707f"
|
||||
x="0"
|
||||
width="6"
|
||||
height="6"
|
||||
y="0"
|
||||
/>
|
||||
<rect
|
||||
fill="#7080707f"
|
||||
x="6"
|
||||
width="6"
|
||||
height="6"
|
||||
y="6"
|
||||
/>
|
||||
</pattern>
|
||||
|
||||
<circle
|
||||
cx="16"
|
||||
cy="16"
|
||||
r="16"
|
||||
fill="url(#checkerboard)"
|
||||
/>
|
||||
<rect
|
||||
fill="#7080707f"
|
||||
x="6"
|
||||
width="6"
|
||||
height="6"
|
||||
y="6"
|
||||
|
||||
<circle
|
||||
cx="16"
|
||||
cy="16"
|
||||
r="16"
|
||||
/>
|
||||
</pattern>
|
||||
|
||||
<circle
|
||||
cx="16"
|
||||
cy="16"
|
||||
r="16"
|
||||
fill="url(#checkerboard)"
|
||||
/>
|
||||
|
||||
<circle
|
||||
cx="16"
|
||||
cy="16"
|
||||
r="16"
|
||||
/>
|
||||
</svg>
|
||||
</b-button>
|
||||
|
||||
</svg>
|
||||
</b-button>
|
||||
<span v-if="showColorCodeText" class="ml-2">
|
||||
{{ value }}
|
||||
</span>
|
||||
</div>
|
||||
<b-modal
|
||||
:visible="showModal"
|
||||
:title="translations.modalTitle"
|
||||
@@ -105,6 +109,21 @@ export default {
|
||||
translations: {
|
||||
type: Object,
|
||||
},
|
||||
|
||||
width: {
|
||||
type: String,
|
||||
default: "32px",
|
||||
},
|
||||
|
||||
height: {
|
||||
type: String,
|
||||
default: "32px",
|
||||
},
|
||||
|
||||
showColorCodeText: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
}
|
||||
},
|
||||
|
||||
data () {
|
||||
|
||||
@@ -347,7 +347,7 @@ $sidebar-bg: #F4F7FA;
|
||||
transition: left 0.15s ease-in-out;
|
||||
|
||||
header {
|
||||
background-color: white;
|
||||
background-color: var(--white);
|
||||
|
||||
&.expanded {
|
||||
background-color: $sidebar-bg !important;
|
||||
@@ -372,7 +372,7 @@ $sidebar-bg: #F4F7FA;
|
||||
transition: right 0.15s ease-in-out;
|
||||
|
||||
header {
|
||||
background-color: white;
|
||||
background-color: var(--white);
|
||||
|
||||
&.expanded {
|
||||
background-color: $sidebar-bg !important;
|
||||
|
||||
@@ -287,7 +287,7 @@ $nav-user-icon-size: 50px;
|
||||
.header-navigation {
|
||||
width: 100vw;
|
||||
min-height: $header-height;
|
||||
background-color: #F9FAFB !important;
|
||||
background-color: var(--gray-200) !important;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
|
||||
@@ -21,6 +21,26 @@ editor:
|
||||
uploader:
|
||||
instructions: 'Click or drop favicon file here to upload'
|
||||
uploading: 'Uploading favicon'
|
||||
|
||||
corteza-studio:
|
||||
title: Branding
|
||||
colorPicker: Choose a color
|
||||
sassNotInstalled: No dart-sass binaries were detected. For guidance on how to set it up, refer to
|
||||
installSassDocs: docs here
|
||||
brandVariables:
|
||||
white: White
|
||||
black: Black
|
||||
primary: Primary
|
||||
secondary: Secondary
|
||||
success: Success
|
||||
warning: Warning
|
||||
danger: Danger
|
||||
light: Light
|
||||
extra-light: Extra light
|
||||
dark: Dark
|
||||
tertiary: Tertiary
|
||||
gray-200: Gray 200
|
||||
body-bg: Body background
|
||||
|
||||
custom-css:
|
||||
title: Custom CSS
|
||||
@@ -52,4 +72,3 @@ editor:
|
||||
invalid-handle-characters: Should be at least 2 characters long. Can contain only letters, numbers, dashes, underscores and dots. Must end with letter or number
|
||||
url: URL
|
||||
new-tab: New tab
|
||||
|
||||
|
||||
@@ -1313,3 +1313,14 @@
|
||||
# Type: string
|
||||
# Default: #162425
|
||||
# AVATAR_INITIALS_COLOR=#162425
|
||||
|
||||
###############################################################################
|
||||
###############################################################################
|
||||
# webapp
|
||||
#
|
||||
|
||||
###############################################################################
|
||||
# Path to custom SCSS source files directory
|
||||
# Type: string
|
||||
# Default: <no value>
|
||||
# WEBAPP_SCSS_DIR_PATH=<no value>
|
||||
|
||||
@@ -41,6 +41,7 @@ corteza: schema.#platform & {
|
||||
options.workflow,
|
||||
options.discovery,
|
||||
options.attachment,
|
||||
options.webapp,
|
||||
]
|
||||
|
||||
// platform resources
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
package options
|
||||
|
||||
import (
|
||||
"github.com/cortezaproject/corteza/server/codegen/schema"
|
||||
)
|
||||
|
||||
webapp: schema.#optionsGroup & {
|
||||
handle: "webapp"
|
||||
|
||||
options: {
|
||||
scss_dir_path: {
|
||||
description: "Path to custom SCSS source files directory"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -57,7 +57,7 @@ func (app *CortezaApp) mountHttpRoutes(r chi.Router) {
|
||||
return
|
||||
}
|
||||
|
||||
r.Route(options.CleanBase(ho.WebappBaseUrl), webapp.MakeWebappServer(app.Log, ho, app.Opt.Auth, app.Opt.Discovery, app.Opt.Sentry))
|
||||
r.Route(options.CleanBase(ho.WebappBaseUrl), webapp.MakeWebappServer(app.Log, ho, app.Opt.Auth, app.Opt.Discovery, app.Opt.Sentry, app.Opt.Webapp))
|
||||
|
||||
app.Log.Info(
|
||||
"client web applications enabled",
|
||||
|
||||
+25
-1
@@ -5,6 +5,7 @@ import (
|
||||
"fmt"
|
||||
"io/fs"
|
||||
"os"
|
||||
"path"
|
||||
|
||||
"go.uber.org/zap"
|
||||
)
|
||||
@@ -57,7 +58,6 @@ func fromPath(path string) (assets fs.FS, err error) {
|
||||
|
||||
if !fi.IsDir() {
|
||||
return nil, fmt.Errorf("expecting directory")
|
||||
|
||||
}
|
||||
|
||||
assets = os.DirFS(path)
|
||||
@@ -67,3 +67,27 @@ func fromPath(path string) (assets fs.FS, err error) {
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
func DirEntries(dir string) (fileNames, subDirs []string, err error) {
|
||||
dirEntries, err := fs.ReadDir(ff, path.Join("src", dir))
|
||||
if err != nil {
|
||||
return nil, nil, err
|
||||
}
|
||||
|
||||
for _, dirEntry := range dirEntries {
|
||||
fileInfo, err := dirEntry.Info()
|
||||
if err != nil {
|
||||
return nil, nil, err
|
||||
}
|
||||
|
||||
// if the entry is a directory skip it
|
||||
if fileInfo.IsDir() {
|
||||
subDirs = append(subDirs, dirEntry.Name())
|
||||
continue
|
||||
}
|
||||
|
||||
fileNames = append(fileNames, dirEntry.Name())
|
||||
}
|
||||
|
||||
return fileNames, subDirs, err
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
+28
-8
@@ -1,8 +1,9 @@
|
||||
$wideminwidth:767px !default;
|
||||
$confortableminwidth:1020px !default;
|
||||
//================================================
|
||||
// Webapp Variables
|
||||
//================================================
|
||||
|
||||
// Paths
|
||||
$fonts_dir : './fonts/' !default;
|
||||
$wideminwidth: 767px !default;
|
||||
$confortableminwidth: 1020px !default;
|
||||
|
||||
// Typography
|
||||
$font-light: 'Poppins-Light' !default;
|
||||
@@ -24,16 +25,20 @@ $success: #43AA8B !default;
|
||||
$warning: #E2A046 !default;
|
||||
$danger: #E54122 !default;
|
||||
$light: #E4E9EF !default;
|
||||
$extra-light: #F3F5F7 !default;
|
||||
$dark: #162425 !default;
|
||||
$tertiary: #5E727E !default;
|
||||
|
||||
$gray-200: #F9FAFB !default;
|
||||
|
||||
// Body
|
||||
$body-bg: $gray-200 !default;
|
||||
|
||||
$theme-colors: () !default;
|
||||
$theme-colors: map-merge(
|
||||
(
|
||||
"white": $white,
|
||||
"tertiary": $tertiary,
|
||||
"tertiary": $tertiary
|
||||
),
|
||||
$theme-colors
|
||||
);
|
||||
@@ -52,9 +57,6 @@ $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;
|
||||
@@ -113,6 +115,24 @@ $input-btn-focus-width: 0 !default;
|
||||
$input-focus-box-shadow: none !default;
|
||||
$input-focus-border-color: $primary !default;
|
||||
|
||||
$corteza-specific: () !default;
|
||||
$corteza-specific: map-merge(
|
||||
(
|
||||
"gray-200": $gray-200,
|
||||
"body-bg": $body-bg,
|
||||
"sidebar-width": $sidebar-width,
|
||||
"font-regular": $font-regular,
|
||||
"font-semibold": $font-semibold,
|
||||
"font-family-base": $font-family-base,
|
||||
"font-medium": $font-medium,
|
||||
"btn-font-family": $btn-font-family,
|
||||
"btn-padding-x": $btn-padding-x,
|
||||
"btn-padding-y": $btn-padding-y,
|
||||
"topbar-height": $topbar-height
|
||||
),
|
||||
$corteza-specific
|
||||
);
|
||||
|
||||
/* stylelint-disable */
|
||||
// This is used within corteza-webapp-compose/src/lib/block/Calendar/feedLoader/
|
||||
// to determine default event colors
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user