rancher
/
dashboard
mirror of https://github.com/rancher/dashboard.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

#3913 - Add basic formatting support to the custom banners (header/footer)

This commit is contained in:
reemus 2021-08-20 15:04:39 -04:00
parent 72b453b087
commit 26b8033465
3 changed files with 130 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
assets/translations/en-us.yaml
View File

@ -5004,6 +5004,16 @@ branding:
background: Background Color
showHeader: Show Banner in Header
showFooter: Show Banner in Footer
bannerAlignment:
label: Text Alignment
leftOption: Left
centerOption: Center
rightOption: Right
bannerDecoration:
label: Text Decoration
bannerBold: Bold
bannerItalic: Italic
bannerUnderline: Underline
color:
label: Primary Color
tip: You can override the primary color used throughout the UI with a custom color of your choice.

16
components/FixedBanner.vue
View File

@ -17,10 +17,11 @@ export default {
data() {
return {
showHeader: false,
showFooter: false,
banner: {},
bannerSetting: null
showHeader: false,
showFooter: false,
textDecoration: {},
banner: {},
bannerSetting: null
};
},
@ -28,7 +29,11 @@ export default {
bannerStyle() {
return {
color: this.banner.color,
'background-color': this.banner.background
'background-color': this.banner.background,
'text-align': this.banner.textAlignment,
'font-weight': this.banner.fontWeight ? 'bold' : '',
'font-style': this.banner.fontStyle ? 'italic' : '',
'text-decoration': this.banner.textDecoration ? 'underline' : ''
};
},
@ -83,5 +88,6 @@ export default {
line-height: 2em;
height: 2em;
width: 100%;
padding: 0 20px;
}
</style>

118
pages/c/_cluster/settings/brand.vue
View File

@ -3,6 +3,7 @@ import LabeledInput from '@/components/form/LabeledInput';
import ColorInput from '@/components/form/ColorInput';
import Checkbox from '@/components/form/Checkbox';
import RadioGroup from '@/components/form/RadioGroup';
import FileSelector from '@/components/form/FileSelector';
import SimpleBox from '@/components/SimpleBox';
import Loading from '@/components/Loading';
@ -21,14 +22,22 @@ const parse = require('url-parse');
const DEFAULT_BANNER_SETTING = {
bannerHeader: {
background: null,
color: null,
text: null
background: null,
color: null,
textAlignment: null,
fontWeight: null,
fontStyle: null,
textDecoration: null,
text: null
},
bannerFooter: {
background: null,
color: null,
text: null
background: null,
color: null,
textAlignment: null,
fontWeight: null,
fontStyle: null,
textDecoration: null,
text: null
},
showHeader: 'false',
showFooter: 'false',
@ -38,7 +47,7 @@ export default {
layout: 'authenticated',
components: {
LabeledInput, Checkbox, FileSelector, Loading, SimpleBox, AsyncButton, Banner, ColorInput
LabeledInput, Checkbox, RadioGroup, FileSelector, Loading, SimpleBox, AsyncButton, Banner, ColorInput
},
async fetch() {
@ -104,6 +113,36 @@ export default {
const schema = this.$store.getters[`management/schemaFor`](MANAGEMENT.SETTING);
return schema?.resourceMethods?.includes('PUT') ? _EDIT : _VIEW;
},
radioOptions() {
const options = ['left', 'center', 'right'];
const labels = [
this.t('branding.uiBanner.bannerAlignment.leftOption'),
this.t('branding.uiBanner.bannerAlignment.centerOption'),
this.t('branding.uiBanner.bannerAlignment.rightOption'),
];
return { options, labels };
},
textDecorationOptions() {
const options = [
{
style: 'fontWeight',
label: this.t('branding.uiBanner.bannerDecoration.bannerBold')
},
{
style: 'fontStyle',
label: this.t('branding.uiBanner.bannerDecoration.bannerItalic')
},
{
style: 'textDecoration',
label: this.t('branding.uiBanner.bannerDecoration.bannerUnderline')
}
];
return options;
}
},
@ -329,9 +368,34 @@ export default {
<div v-if="bannerVal.showHeader==='true'" class="row mb-20">
<div class="col span-12">
<div class="row">
<div class="col span-12">
<div class="col span-6">
<LabeledInput v-model="bannerVal.bannerHeader.text" :label="t('branding.uiBanner.text')" />
</div>
<div class="col span-3">
<RadioGroup
v-model="bannerVal.bannerHeader.textAlignment"
name="headerAlignment"
:label="t('branding.uiBanner.bannerAlignment.label')"
:options="radioOptions.options"
:labels="radioOptions.labels"
:mode="mode"
/>
</div>
<div class="col span-3">
<h3>
{{ t('branding.uiBanner.bannerDecoration.label') }}
</h3>
<div v-for="o in textDecorationOptions" :key="o.style">
<Checkbox
v-model="bannerVal.bannerHeader[o.style]"
name="headerDecoration"
class="header-decoration-checkbox"
:mode="mode"
:label="o.label"
@input="e=>$set(bannerVal, o.style, e.toString())"
/>
</div>
</div>
</div>
<div class="row mt-10">
<div class="col span-6">
@ -351,9 +415,34 @@ export default {
<div v-if="bannerVal.showFooter==='true'" class="row">
<div class="col span-12 mt-20">
<div class="row">
<div class="col span-12">
<div class="col span-6">
<LabeledInput v-model="bannerVal.bannerFooter.text" :label="t('branding.uiBanner.text')" />
</div>
<div class="col span-3">
<RadioGroup
v-model="bannerVal.bannerFooter.textAlignment"
name="footerAlignment"
:label="t('branding.uiBanner.bannerAlignment.label')"
:options="radioOptions.options"
:labels="radioOptions.labels"
:mode="mode"
/>
</div>
<div class="col span-3">
<h3>
{{ t('branding.uiBanner.bannerDecoration.label') }}
</h3>
<div v-for="o in textDecorationOptions" :key="o.style">
<Checkbox
v-model="bannerVal.bannerFooter[o.style]"
name="footerAlignment"
class="banner-decoration-checkbox"
:mode="mode"
:label="o.label"
@input="e=>$set(bannerVal, o.style, e.toString())"
/>
</div>
</div>
</div>
<div class="row mt-10">
<div class="col span-6">
@ -403,4 +492,15 @@ export default {
}
}
.banner-decoration-checkbox {
position: relative;
display: inline-flex;
align-items: flex-start;
margin: 0;
cursor: pointer;
user-select: none;
border-radius: var(--border-radius);
padding-bottom: 5px;
height: 24px;
}
</style>