fix component preview styles
This commit is contained in:
Henry Jameson
parent
d72438f0a7
commit
0d32a7ddac
7 changed files with 240 additions and 215 deletions
|
|
@ -14,6 +14,10 @@
|
||||||
<link rel="stylesheet" id="pleroma-eager-styles" type="text/css" href="/static/empty.css" />
|
<link rel="stylesheet" id="pleroma-eager-styles" type="text/css" href="/static/empty.css" />
|
||||||
<link rel="stylesheet" id="pleroma-lazy-styles" type="text/css" href="/static/empty.css" />
|
<link rel="stylesheet" id="pleroma-lazy-styles" type="text/css" href="/static/empty.css" />
|
||||||
<link rel="stylesheet" id="theme-holder" type="text/css" href="/static/empty.css" />
|
<link rel="stylesheet" id="theme-holder" type="text/css" href="/static/empty.css" />
|
||||||
|
<link rel="stylesheet" id="theme-preview-holder" type="text/css" href="/static/empty.css" />
|
||||||
|
<link rel="stylesheet" id="component-style-holder" type="text/css" href="/static/empty.css" />
|
||||||
|
<link rel="stylesheet" id="editor-preview-style-holder" type="text/css" href="/static/empty.css" />
|
||||||
|
<link rel="stylesheet" id="old-editor-preview-style-holder" type="text/css" href="/static/empty.css" />
|
||||||
<!--server-generated-meta-->
|
<!--server-generated-meta-->
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
|
||||||
80
src/components/component_preview/component_preview.js
Normal file
80
src/components/component_preview/component_preview.js
Normal file
|
|
@ -0,0 +1,80 @@
|
||||||
|
import Checkbox from 'src/components/checkbox/checkbox.vue'
|
||||||
|
import ColorInput from 'src/components/color_input/color_input.vue'
|
||||||
|
|
||||||
|
import genRandomSeed from 'src/services/random_seed/random_seed.service.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
Checkbox,
|
||||||
|
ColorInput
|
||||||
|
},
|
||||||
|
props: [
|
||||||
|
'shadow',
|
||||||
|
'shadowControl',
|
||||||
|
'previewClass',
|
||||||
|
'previewStyle',
|
||||||
|
'previewCss',
|
||||||
|
'disabled',
|
||||||
|
'invalid',
|
||||||
|
'noColorControl'
|
||||||
|
],
|
||||||
|
emits: ['update:shadow'],
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
colorOverride: undefined,
|
||||||
|
lightGrid: false,
|
||||||
|
zoom: 100,
|
||||||
|
randomSeed: genRandomSeed()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
hideControls () {
|
||||||
|
return typeof this.shadow === 'string'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
previewCss () {
|
||||||
|
this.update()
|
||||||
|
},
|
||||||
|
previewStyle () {
|
||||||
|
this.update()
|
||||||
|
},
|
||||||
|
zoom () {
|
||||||
|
this.update()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
updateProperty (axis, value) {
|
||||||
|
this.$emit('update:shadow', { axis, value: Number(value) })
|
||||||
|
},
|
||||||
|
update () {
|
||||||
|
const styleEl = document.getElementById('component-style-holder')
|
||||||
|
const styleSheet = styleEl.sheet
|
||||||
|
|
||||||
|
for (let i = styleEl.sheet.cssRules.length - 1; i >= 0; --i) {
|
||||||
|
styleEl.sheet.deleteRule(i)
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = []
|
||||||
|
|
||||||
|
if (this.colorOverride) result.push(`--background: ${this.colorOverride}`)
|
||||||
|
|
||||||
|
const styleRule = [
|
||||||
|
'#component-preview-', this.randomSeed, ' {\n',
|
||||||
|
'.preview-block {\n',
|
||||||
|
`zoom: ${this.zoom / 100};`,
|
||||||
|
this.previewStyle,
|
||||||
|
'\n}',
|
||||||
|
'\n}'
|
||||||
|
].join('')
|
||||||
|
|
||||||
|
styleSheet.insertRule(styleRule)
|
||||||
|
styleSheet.insertRule([
|
||||||
|
'#component-preview-', this.randomSeed, ' {\n',
|
||||||
|
this.previewCss,
|
||||||
|
...result,
|
||||||
|
'\n}'
|
||||||
|
].join(''), 'index-max')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
151
src/components/component_preview/component_preview.scss
Normal file
151
src/components/component_preview/component_preview.scss
Normal file
|
|
@ -0,0 +1,151 @@
|
||||||
|
.ComponentPreview {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1em 1fr 1fr 1em;
|
||||||
|
grid-template-rows: 2em 1fr 1fr 1fr 1em 2em max-content;
|
||||||
|
grid-template-areas:
|
||||||
|
"header header header header "
|
||||||
|
"preview preview preview y-slide"
|
||||||
|
"preview preview preview y-slide"
|
||||||
|
"preview preview preview y-slide"
|
||||||
|
"x-slide x-slide x-slide . "
|
||||||
|
"x-num x-num y-num y-num "
|
||||||
|
"assists assists assists assists";
|
||||||
|
grid-gap: 0.5em;
|
||||||
|
|
||||||
|
&:not(.-shadow-controls) {
|
||||||
|
grid-template-areas:
|
||||||
|
"header header header header "
|
||||||
|
"preview preview preview y-slide"
|
||||||
|
"preview preview preview y-slide"
|
||||||
|
"preview preview preview y-slide"
|
||||||
|
"assists assists assists assists";
|
||||||
|
grid-template-rows: 2em 1fr 1fr 1fr max-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
grid-area: header;
|
||||||
|
place-self: baseline center;
|
||||||
|
line-height: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.invalid-container {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
display: grid;
|
||||||
|
place-items: center center;
|
||||||
|
background-color: rgb(100 0 0 / 50%);
|
||||||
|
|
||||||
|
.alert {
|
||||||
|
padding: 0.5em 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.assists {
|
||||||
|
grid-area: assists;
|
||||||
|
display: grid;
|
||||||
|
grid-auto-flow: row;
|
||||||
|
grid-auto-rows: 2em;
|
||||||
|
grid-gap: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-light-grid {
|
||||||
|
justify-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-number {
|
||||||
|
min-width: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.x-shift-number {
|
||||||
|
grid-area: x-num;
|
||||||
|
justify-self: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.y-shift-number {
|
||||||
|
grid-area: y-num;
|
||||||
|
justify-self: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.x-shift-number,
|
||||||
|
.y-shift-number {
|
||||||
|
input {
|
||||||
|
max-width: 4em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.x-shift-slider {
|
||||||
|
grid-area: x-slide;
|
||||||
|
height: auto;
|
||||||
|
align-self: start;
|
||||||
|
min-width: 10em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.y-shift-slider {
|
||||||
|
grid-area: y-slide;
|
||||||
|
writing-mode: vertical-lr;
|
||||||
|
justify-self: left;
|
||||||
|
min-height: 10em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.x-shift-slider,
|
||||||
|
.y-shift-slider {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-window {
|
||||||
|
--__grid-color1: rgb(102 102 102);
|
||||||
|
--__grid-color2: rgb(153 153 153);
|
||||||
|
--__grid-color1-disabled: rgb(102 102 102 / 20%);
|
||||||
|
--__grid-color2-disabled: rgb(153 153 153 / 20%);
|
||||||
|
|
||||||
|
&.-light-grid {
|
||||||
|
--__grid-color1: rgb(205 205 205);
|
||||||
|
--__grid-color2: rgb(255 255 255);
|
||||||
|
--__grid-color1-disabled: rgb(205 205 205 / 20%);
|
||||||
|
--__grid-color2-disabled: rgb(255 255 255 / 20%);
|
||||||
|
}
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
grid-area: preview;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-width: 10em;
|
||||||
|
min-height: 10em;
|
||||||
|
background-color: var(--__grid-color2);
|
||||||
|
background-image:
|
||||||
|
linear-gradient(45deg, var(--__grid-color1) 25%, transparent 25%),
|
||||||
|
linear-gradient(-45deg, var(--__grid-color1) 25%, transparent 25%),
|
||||||
|
linear-gradient(45deg, transparent 75%, var(--__grid-color1) 75%),
|
||||||
|
linear-gradient(-45deg, transparent 75%, var(--__grid-color1) 75%);
|
||||||
|
background-size: 20px 20px;
|
||||||
|
background-position: 0 0, 0 10px, 10px -10px, -10px 0;
|
||||||
|
border-radius: var(--roundness);
|
||||||
|
|
||||||
|
&.disabled {
|
||||||
|
background-color: var(--__grid-color2-disabled);
|
||||||
|
background-image:
|
||||||
|
linear-gradient(45deg, var(--__grid-color1-disabled) 25%, transparent 25%),
|
||||||
|
linear-gradient(-45deg, var(--__grid-color1-disabled) 25%, transparent 25%),
|
||||||
|
linear-gradient(45deg, transparent 75%, var(--__grid-color1-disabled) 75%),
|
||||||
|
linear-gradient(-45deg, transparent 75%, var(--__grid-color1-disabled) 75%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-block {
|
||||||
|
background: var(--background, var(--bg));
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
min-width: 33%;
|
||||||
|
min-height: 33%;
|
||||||
|
max-width: 80%;
|
||||||
|
max-height: 80%;
|
||||||
|
border-width: 0;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: var(--border);
|
||||||
|
border-radius: var(--roundness);
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -2,13 +2,8 @@
|
||||||
<div
|
<div
|
||||||
class="ComponentPreview"
|
class="ComponentPreview"
|
||||||
:class="{ '-shadow-controls': shadowControl }"
|
:class="{ '-shadow-controls': shadowControl }"
|
||||||
|
:id="'component-preview-' + randomSeed"
|
||||||
>
|
>
|
||||||
<!-- eslint-disable vue/no-v-html vue/no-v-text-v-html-on-component -->
|
|
||||||
<component
|
|
||||||
:is="'style'"
|
|
||||||
v-html="previewCss"
|
|
||||||
/>
|
|
||||||
<!-- eslint-enable vue/no-v-html vue/no-v-text-v-html-on-component -->
|
|
||||||
<label
|
<label
|
||||||
v-show="shadowControl"
|
v-show="shadowControl"
|
||||||
role="heading"
|
role="heading"
|
||||||
|
|
@ -74,7 +69,6 @@
|
||||||
<div
|
<div
|
||||||
class="preview-block"
|
class="preview-block"
|
||||||
:class="previewClass"
|
:class="previewClass"
|
||||||
:style="style"
|
|
||||||
>
|
>
|
||||||
{{ $t('settings.style.themes3.editor.test_string') }}
|
{{ $t('settings.style.themes3.editor.test_string') }}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -116,203 +110,5 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script src="./component_preview.js" />
|
||||||
import Checkbox from 'src/components/checkbox/checkbox.vue'
|
<style src="./component_preview.scss" lang="scss" />
|
||||||
import ColorInput from 'src/components/color_input/color_input.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
Checkbox,
|
|
||||||
ColorInput
|
|
||||||
},
|
|
||||||
props: [
|
|
||||||
'shadow',
|
|
||||||
'shadowControl',
|
|
||||||
'previewClass',
|
|
||||||
'previewStyle',
|
|
||||||
'previewCss',
|
|
||||||
'disabled',
|
|
||||||
'invalid',
|
|
||||||
'noColorControl'
|
|
||||||
],
|
|
||||||
emits: ['update:shadow'],
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
colorOverride: undefined,
|
|
||||||
lightGrid: false,
|
|
||||||
zoom: 100
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
style () {
|
|
||||||
const result = [
|
|
||||||
this.previewStyle,
|
|
||||||
`zoom: ${this.zoom / 100}`
|
|
||||||
]
|
|
||||||
if (this.colorOverride) result.push(`--background: ${this.colorOverride}`)
|
|
||||||
return result
|
|
||||||
},
|
|
||||||
hideControls () {
|
|
||||||
return typeof this.shadow === 'string'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
updateProperty (axis, value) {
|
|
||||||
this.$emit('update:shadow', { axis, value: Number(value) })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style lang="scss">
|
|
||||||
.ComponentPreview {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1em 1fr 1fr 1em;
|
|
||||||
grid-template-rows: 2em 1fr 1fr 1fr 1em 2em max-content;
|
|
||||||
grid-template-areas:
|
|
||||||
"header header header header "
|
|
||||||
"preview preview preview y-slide"
|
|
||||||
"preview preview preview y-slide"
|
|
||||||
"preview preview preview y-slide"
|
|
||||||
"x-slide x-slide x-slide . "
|
|
||||||
"x-num x-num y-num y-num "
|
|
||||||
"assists assists assists assists";
|
|
||||||
grid-gap: 0.5em;
|
|
||||||
|
|
||||||
&:not(.-shadow-controls) {
|
|
||||||
grid-template-areas:
|
|
||||||
"header header header header "
|
|
||||||
"preview preview preview y-slide"
|
|
||||||
"preview preview preview y-slide"
|
|
||||||
"preview preview preview y-slide"
|
|
||||||
"assists assists assists assists";
|
|
||||||
grid-template-rows: 2em 1fr 1fr 1fr max-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
|
||||||
grid-area: header;
|
|
||||||
place-self: baseline center;
|
|
||||||
line-height: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.invalid-container {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
display: grid;
|
|
||||||
place-items: center center;
|
|
||||||
background-color: rgb(100 0 0 / 50%);
|
|
||||||
|
|
||||||
.alert {
|
|
||||||
padding: 0.5em 1em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.assists {
|
|
||||||
grid-area: assists;
|
|
||||||
display: grid;
|
|
||||||
grid-auto-flow: row;
|
|
||||||
grid-auto-rows: 2em;
|
|
||||||
grid-gap: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-light-grid {
|
|
||||||
justify-self: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-number {
|
|
||||||
min-width: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.x-shift-number {
|
|
||||||
grid-area: x-num;
|
|
||||||
justify-self: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.y-shift-number {
|
|
||||||
grid-area: y-num;
|
|
||||||
justify-self: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.x-shift-number,
|
|
||||||
.y-shift-number {
|
|
||||||
input {
|
|
||||||
max-width: 4em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.x-shift-slider {
|
|
||||||
grid-area: x-slide;
|
|
||||||
height: auto;
|
|
||||||
align-self: start;
|
|
||||||
min-width: 10em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.y-shift-slider {
|
|
||||||
grid-area: y-slide;
|
|
||||||
writing-mode: vertical-lr;
|
|
||||||
justify-self: left;
|
|
||||||
min-height: 10em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.x-shift-slider,
|
|
||||||
.y-shift-slider {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-window {
|
|
||||||
--__grid-color1: rgb(102 102 102);
|
|
||||||
--__grid-color2: rgb(153 153 153);
|
|
||||||
--__grid-color1-disabled: rgb(102 102 102 / 20%);
|
|
||||||
--__grid-color2-disabled: rgb(153 153 153 / 20%);
|
|
||||||
|
|
||||||
&.-light-grid {
|
|
||||||
--__grid-color1: rgb(205 205 205);
|
|
||||||
--__grid-color2: rgb(255 255 255);
|
|
||||||
--__grid-color1-disabled: rgb(205 205 205 / 20%);
|
|
||||||
--__grid-color2-disabled: rgb(255 255 255 / 20%);
|
|
||||||
}
|
|
||||||
|
|
||||||
position: relative;
|
|
||||||
grid-area: preview;
|
|
||||||
aspect-ratio: 1;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
min-width: 10em;
|
|
||||||
min-height: 10em;
|
|
||||||
background-color: var(--__grid-color2);
|
|
||||||
background-image:
|
|
||||||
linear-gradient(45deg, var(--__grid-color1) 25%, transparent 25%),
|
|
||||||
linear-gradient(-45deg, var(--__grid-color1) 25%, transparent 25%),
|
|
||||||
linear-gradient(45deg, transparent 75%, var(--__grid-color1) 75%),
|
|
||||||
linear-gradient(-45deg, transparent 75%, var(--__grid-color1) 75%);
|
|
||||||
background-size: 20px 20px;
|
|
||||||
background-position: 0 0, 0 10px, 10px -10px, -10px 0;
|
|
||||||
border-radius: var(--roundness);
|
|
||||||
|
|
||||||
&.disabled {
|
|
||||||
background-color: var(--__grid-color2-disabled);
|
|
||||||
background-image:
|
|
||||||
linear-gradient(45deg, var(--__grid-color1-disabled) 25%, transparent 25%),
|
|
||||||
linear-gradient(-45deg, var(--__grid-color1-disabled) 25%, transparent 25%),
|
|
||||||
linear-gradient(45deg, transparent 75%, var(--__grid-color1-disabled) 75%),
|
|
||||||
linear-gradient(-45deg, transparent 75%, var(--__grid-color1-disabled) 75%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-block {
|
|
||||||
background: var(--background, var(--bg));
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
min-width: 33%;
|
|
||||||
min-height: 33%;
|
|
||||||
max-width: 80%;
|
|
||||||
max-height: 80%;
|
|
||||||
border-width: 0;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: var(--border);
|
|
||||||
border-radius: var(--roundness);
|
|
||||||
box-shadow: var(--shadow);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
|
|
@ -410,7 +410,7 @@ const AppearanceTab = {
|
||||||
this.compilationCache[key] = theme3
|
this.compilationCache[key] = theme3
|
||||||
}
|
}
|
||||||
|
|
||||||
const styleEl = document.getElementById('theme-holder')
|
const styleEl = document.getElementById('theme-preview-holder')
|
||||||
const styleSheet = styleEl.sheet
|
const styleSheet = styleEl.sheet
|
||||||
styleSheet.insertRule([
|
styleSheet.insertRule([
|
||||||
'#theme-preview-',
|
'#theme-preview-',
|
||||||
|
|
|
||||||
|
|
@ -729,7 +729,7 @@ export default {
|
||||||
// Apart from "hover" we can't really show how component looks like in
|
// Apart from "hover" we can't really show how component looks like in
|
||||||
// certain states, so we have to fake them.
|
// certain states, so we have to fake them.
|
||||||
const simulatePseudoSelectors = (css, prefix) => css
|
const simulatePseudoSelectors = (css, prefix) => css
|
||||||
.replace(prefix, '.component-preview .preview-block')
|
.replace(prefix, '.preview-block')
|
||||||
.replace(':active', '.preview-active')
|
.replace(':active', '.preview-active')
|
||||||
.replace(':hover', '.preview-hover')
|
.replace(':hover', '.preview-hover')
|
||||||
.replace(':active', '.preview-active')
|
.replace(':active', '.preview-active')
|
||||||
|
|
|
||||||
|
|
@ -155,12 +155,6 @@
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="preview-container">
|
<div class="preview-container">
|
||||||
<!-- eslint-disable vue/no-v-html vue/no-v-text-v-html-on-component -->
|
|
||||||
<component
|
|
||||||
:is="'style'"
|
|
||||||
v-html="previewCss"
|
|
||||||
/>
|
|
||||||
<!-- eslint-enable vue/no-v-html vue/no-v-text-v-html-on-component -->
|
|
||||||
<ComponentPreview
|
<ComponentPreview
|
||||||
class="component-preview"
|
class="component-preview"
|
||||||
:show-text="componentHas('Text')"
|
:show-text="componentHas('Text')"
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue