Merge branch 'themes-3-1' into shigusegubu-themes3
This commit is contained in:
commit
41add4fc6a
20 changed files with 30 additions and 223 deletions
1
changelog.d/weight-loss.change
Normal file
1
changelog.d/weight-loss.change
Normal file
|
|
@ -0,0 +1 @@
|
|||
Reduced time taken processing theme by half
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
export default {
|
||||
name: 'Attachment',
|
||||
selector: '.Attachment',
|
||||
notEditable: true,
|
||||
validInnerComponents: [
|
||||
'Border',
|
||||
'Button',
|
||||
'Input'
|
||||
],
|
||||
defaultRules: [
|
||||
{
|
||||
directives: {
|
||||
roundness: 3
|
||||
}
|
||||
},
|
||||
{
|
||||
component: 'Button',
|
||||
parent: {
|
||||
component: 'Attachment'
|
||||
},
|
||||
directives: {
|
||||
background: '#FFFFFF',
|
||||
opacity: 0.5
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -8,9 +8,6 @@ export default {
|
|||
'Text',
|
||||
'Icon',
|
||||
'Border',
|
||||
'Button',
|
||||
'RichContent',
|
||||
'Attachment',
|
||||
'PollGraph'
|
||||
],
|
||||
defaultRules: [
|
||||
|
|
|
|||
|
|
@ -1,48 +0,0 @@
|
|||
export default {
|
||||
name: 'ListItem',
|
||||
selector: '.list-item',
|
||||
states: {
|
||||
active: '.-active',
|
||||
hover: ':is(:hover, :focus-visible, :has(:focus-visible)):not(.-non-interactive)'
|
||||
},
|
||||
validInnerComponents: [
|
||||
'Text',
|
||||
'Link',
|
||||
'Icon',
|
||||
'Border',
|
||||
'Button',
|
||||
'ButtonUnstyled',
|
||||
'RichContent',
|
||||
'Input',
|
||||
'Avatar'
|
||||
],
|
||||
defaultRules: [
|
||||
{
|
||||
directives: {
|
||||
background: '--bg',
|
||||
opacity: 0
|
||||
}
|
||||
},
|
||||
{
|
||||
state: ['active'],
|
||||
directives: {
|
||||
background: '--inheritedBackground, 10',
|
||||
opacity: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
state: ['hover'],
|
||||
directives: {
|
||||
background: '--inheritedBackground, 10',
|
||||
opacity: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
state: ['hover', 'active'],
|
||||
directives: {
|
||||
background: '--inheritedBackground, 20',
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -4,11 +4,7 @@ export default {
|
|||
validInnerComponents: [
|
||||
'Text',
|
||||
'Icon',
|
||||
'Input',
|
||||
'Border',
|
||||
'ButtonUnstyled',
|
||||
'Badge',
|
||||
'Avatar'
|
||||
'Border'
|
||||
],
|
||||
states: {
|
||||
hover: ':is(:hover, :focus-visible, :has(:focus-visible)):not(.disabled)',
|
||||
|
|
|
|||
|
|
@ -2,18 +2,7 @@ export default {
|
|||
name: 'MobileDrawer',
|
||||
selector: '.mobile-drawer',
|
||||
validInnerComponents: [
|
||||
'Text',
|
||||
'Link',
|
||||
'Icon',
|
||||
'Border',
|
||||
'Button',
|
||||
'ButtonUnstyled',
|
||||
'Input',
|
||||
'PanelHeader',
|
||||
'MenuItem',
|
||||
'Notification',
|
||||
'Alert',
|
||||
'UserCard'
|
||||
'MenuItem'
|
||||
],
|
||||
defaultRules: [
|
||||
{
|
||||
|
|
@ -21,21 +10,6 @@ export default {
|
|||
background: '--bg',
|
||||
backgroundNoCssColor: 'yes'
|
||||
}
|
||||
},
|
||||
{
|
||||
component: 'PanelHeader',
|
||||
parent: { component: 'MobileDrawer' },
|
||||
directives: {
|
||||
background: '--fg',
|
||||
shadow: [{
|
||||
x: 0,
|
||||
y: 0,
|
||||
blur: 4,
|
||||
spread: 0,
|
||||
color: '#000000',
|
||||
alpha: 0.6
|
||||
}]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,12 +6,7 @@ export default {
|
|||
'Link',
|
||||
'Icon',
|
||||
'Border',
|
||||
'Button',
|
||||
'ButtonUnstyled',
|
||||
'RichContent',
|
||||
'Input',
|
||||
'Avatar',
|
||||
'Attachment',
|
||||
'PollGraph'
|
||||
],
|
||||
defaultRules: []
|
||||
|
|
|
|||
|
|
@ -6,29 +6,17 @@ export default {
|
|||
'Link',
|
||||
'Icon',
|
||||
'Border',
|
||||
'Button',
|
||||
'ButtonUnstyled',
|
||||
'Input',
|
||||
'PanelHeader',
|
||||
'MenuItem',
|
||||
'Post',
|
||||
'Notification',
|
||||
'Alert',
|
||||
'UserCard',
|
||||
'Chat',
|
||||
'Attachment',
|
||||
'Tab',
|
||||
'ListItem'
|
||||
'MenuItem'
|
||||
],
|
||||
validInnerComponentsLite: [
|
||||
'Text',
|
||||
'Link',
|
||||
'Icon',
|
||||
'Border',
|
||||
'Button',
|
||||
'Input',
|
||||
'PanelHeader',
|
||||
'Alert'
|
||||
'PanelHeader'
|
||||
],
|
||||
defaultRules: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -7,9 +7,7 @@ export default {
|
|||
'Icon',
|
||||
'Button',
|
||||
'ButtonUnstyled',
|
||||
'Badge',
|
||||
'Alert',
|
||||
'Avatar'
|
||||
'Alert'
|
||||
],
|
||||
defaultRules: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -6,16 +6,7 @@ export default {
|
|||
modal: '.modal'
|
||||
},
|
||||
validInnerComponents: [
|
||||
'Text',
|
||||
'Link',
|
||||
'Icon',
|
||||
'Border',
|
||||
'Button',
|
||||
'ButtonUnstyled',
|
||||
'Input',
|
||||
'MenuItem',
|
||||
'Post',
|
||||
'UserCard'
|
||||
'MenuItem'
|
||||
],
|
||||
defaultRules: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
font-family: var(--font);
|
||||
|
||||
&.-faint {
|
||||
color: var(--text);
|
||||
/* stylelint-disable declaration-no-important */
|
||||
--text: var(--textFaint) !important;
|
||||
--link: var(--linkFaint) !important;
|
||||
|
|
|
|||
|
|
@ -1,20 +0,0 @@
|
|||
export default {
|
||||
name: 'RichContent',
|
||||
selector: '.RichContent',
|
||||
notEditable: true,
|
||||
transparent: true,
|
||||
validInnerComponents: [
|
||||
'Text',
|
||||
'FunText',
|
||||
'Link'
|
||||
],
|
||||
defaultRules: [
|
||||
{
|
||||
directives: {
|
||||
'--font': 'generic | inherit',
|
||||
'--monoFont': 'generic | monospace',
|
||||
textNoCssColor: 'yes'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -9,23 +9,9 @@ export default {
|
|||
'Link',
|
||||
'Icon',
|
||||
'Border',
|
||||
'Button',
|
||||
'ButtonUnstyled',
|
||||
'RichContent',
|
||||
'Input',
|
||||
'Avatar',
|
||||
'Attachment',
|
||||
'PollGraph'
|
||||
],
|
||||
validInnerComponentsLite: [
|
||||
'Text',
|
||||
'Link',
|
||||
'Icon',
|
||||
'Border',
|
||||
'ButtonUnstyled',
|
||||
'RichContent',
|
||||
'Avatar'
|
||||
],
|
||||
defaultRules: [
|
||||
{
|
||||
directives: {
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ export default {
|
|||
'Link',
|
||||
'Text',
|
||||
'Icon',
|
||||
// Optimization: don't put heavy components unless needed
|
||||
'Button',
|
||||
'ButtonUnstyled',
|
||||
'Input',
|
||||
|
|
|
|||
|
|
@ -111,15 +111,20 @@
|
|||
}
|
||||
}
|
||||
|
||||
.banner-overlay,
|
||||
.banner-image {
|
||||
.header-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
right: -1.2em;
|
||||
left: -1.2em;
|
||||
top: -1.4em;
|
||||
padding: 0;
|
||||
mask: linear-gradient(to top, transparent 0, white 5em) bottom no-repeat;
|
||||
}
|
||||
|
||||
.banner-overlay,
|
||||
.banner-image {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
padding: 0;
|
||||
border-top-left-radius: calc(var(--roundness) - 1px);
|
||||
border-top-right-radius: calc(var(--roundness) - 1px);
|
||||
}
|
||||
|
|
@ -136,6 +141,7 @@
|
|||
|
||||
.banner-overlay {
|
||||
background-color: var(--profileTint);
|
||||
opacity: 0.5;
|
||||
pointer-events: none; // let user copy bg url
|
||||
z-index: -1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,40 +2,10 @@ export default {
|
|||
name: 'UserCard',
|
||||
selector: '.user-card',
|
||||
notEditable: true,
|
||||
validInnerComponents: [
|
||||
'Text',
|
||||
'Link',
|
||||
'Icon',
|
||||
'Button',
|
||||
'ButtonUnstyled',
|
||||
'Input',
|
||||
'RichContent',
|
||||
'Alert'
|
||||
],
|
||||
defaultRules: [
|
||||
{
|
||||
directives: {
|
||||
background: '--bg',
|
||||
opacity: 0,
|
||||
roundness: 3,
|
||||
shadow: [{
|
||||
x: 1,
|
||||
y: 1,
|
||||
blur: 4,
|
||||
spread: 0,
|
||||
color: '#000000',
|
||||
alpha: 0.6
|
||||
}],
|
||||
'--profileTint': 'color | $alpha(--background 0.5)'
|
||||
}
|
||||
},
|
||||
{
|
||||
parent: {
|
||||
component: 'UserCard'
|
||||
},
|
||||
component: 'RichContent',
|
||||
directives: {
|
||||
opacity: 0
|
||||
'--profileTint': 'color | $alpha(--background 1)'
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -3,16 +3,18 @@
|
|||
<div class="user-card-inner">
|
||||
<div class="user-info">
|
||||
<div class="user-identity">
|
||||
<div class="banner-image">
|
||||
<img
|
||||
:src="bannerImgSrc"
|
||||
<div class="header-overlay">
|
||||
<div class="banner-image">
|
||||
<img
|
||||
:src="bannerImgSrc"
|
||||
:class="{ 'hide-bio': hideBio }"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="banner-overlay"
|
||||
:class="{ 'hide-bio': hideBio }"
|
||||
>
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="banner-overlay"
|
||||
:class="{ 'hide-bio': hideBio }"
|
||||
/>
|
||||
<a
|
||||
v-if="avatarAction === 'zoom'"
|
||||
class="user-info-avatar -link"
|
||||
|
|
|
|||
|
|
@ -86,7 +86,7 @@ export const generateTheme = (inputRuleset, callbacks, debug) => {
|
|||
|
||||
const themes3 = init({
|
||||
inputRuleset,
|
||||
debug
|
||||
debug: true
|
||||
})
|
||||
|
||||
getCssRules(themes3.eager, debug).forEach(rule => {
|
||||
|
|
|
|||
|
|
@ -244,9 +244,6 @@ export const convertTheme2To3 = (data) => {
|
|||
case 'tooltip':
|
||||
rule.component = 'Popover'
|
||||
break
|
||||
case 'attachment':
|
||||
rule.component = 'Attachment'
|
||||
break
|
||||
case 'ChatMessage':
|
||||
rule.component = 'Button'
|
||||
break
|
||||
|
|
|
|||
|
|
@ -33,7 +33,6 @@ const components = {
|
|||
Icon: null,
|
||||
Border: null,
|
||||
PanelHeader: null,
|
||||
Attachment: null,
|
||||
Panel: null,
|
||||
Chat: null,
|
||||
ChatMessage: null,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue