tabs support + cleanup

This commit is contained in:
Henry Jameson 2024-02-22 00:02:24 +02:00
parent 8a21594dbc
commit 879f520b75
9 changed files with 74 additions and 14 deletions

View File

@ -359,7 +359,6 @@ const afterStoreSetup = async ({ store, i18n }) => {
const { theme } = store.state.instance
const customThemePresent = customThemeSource || customTheme
console.log({ ...customThemeSource }, { ...customTheme })
if (customThemePresent) {
if (customThemeSource && customThemeSource.themeEngineVersion === CURRENT_VERSION) {
applyTheme(customThemeSource)

View File

@ -5,7 +5,8 @@ export default {
'Text',
'Icon',
'Link',
'Border'
'Border',
'ButtonUnstyled'
],
variants: {
normal: '.neutral',

View File

@ -3,8 +3,6 @@ export default {
selector: '.button-unstyled',
states: {
disabled: ':disabled',
toggled: '.toggled',
pressed: ':active',
hover: ':hover:not(:disabled)',
focused: ':focus-within'
},

View File

@ -16,7 +16,8 @@ export default {
'Alert',
'UserCard',
'Chat',
'Attachment'
'Attachment',
'Tab'
],
defaultRules: [
{

View File

@ -0,0 +1,52 @@
export default {
name: 'Tab', // Name of the component
selector: '.tab', // CSS selector/prefix
states: {
active: '.active',
hover: ':hover:not(:disabled)',
disabled: '.disabled'
},
validInnerComponents: [
'Text',
'Icon'
],
defaultRules: [
{
directives: {
background: '--fg',
shadow: ['--defaultButtonShadow', '--defaultButtonBevel'],
roundness: 3
}
},
{
state: ['hover'],
directives: {
shadow: ['--defaultButtonHoverGlow', '--defaultButtonBevel']
}
},
{
state: ['disabled'],
directives: {
background: '$blend(--inheritedBackground, 0.25, --parent)',
shadow: ['--defaultButtonBevel']
}
},
{
state: ['active'],
directives: {
opacity: 0
}
},
{
component: 'Text',
parent: {
component: 'Tab',
state: ['disabled']
},
directives: {
textOpacity: 0.25,
textOpacityMode: 'blend'
}
}
]
}

View File

@ -97,7 +97,7 @@ export default {
.map((slot, index) => {
const props = slot.props
if (!props) return
const classesTab = ['tab', 'button-default']
const classesTab = ['tab']
const classesWrapper = ['tab-wrapper']
if (this.activeIndex === index) {
classesTab.push('active')

View File

@ -25,8 +25,7 @@
content: "";
flex: 1 1 auto;
border-bottom: 1px solid;
border-bottom-color: $fallback--border;
border-bottom-color: var(--border, $fallback--border);
border-bottom-color: var(--border);
}
.tab-wrapper {
@ -37,8 +36,7 @@
right: 0;
bottom: 0;
border-bottom: 1px solid;
border-bottom-color: $fallback--border;
border-bottom-color: var(--border, $fallback--border);
border-bottom-color: var(--border);
}
}
@ -173,6 +171,14 @@
}
.tab {
user-select: none;
color: var(--text);
border: none;
cursor: pointer;
box-shadow: var(--shadow);
font-size: 1em;
font-family: var(--interfaceFont, sans-serif);
border-radius: var(--roundness);
position: relative;
white-space: nowrap;
padding: 6px 1em;

View File

@ -9,7 +9,6 @@ export const parseCssShadow = (text) => {
const [x, y, blur = 0, spread = 0] = dimensions.split(/ /).filter(x => x).map(x => x.trim())
const isInset = inset?.trim() === 'inset'
console.log(color.trim())
const colorString = color.split(/ /).filter(x => x).map(x => x.trim())[0]
return {

View File

@ -55,7 +55,7 @@ export const extendedBasePrefixes = [
'panel',
'topBar',
// 'tab', // TODO: not implemented yet
'tab',
'btn',
'input',
'selectedMenu',
@ -122,6 +122,9 @@ export const convertTheme2To3 = (data) => {
case 'btn':
rule.component = 'Button'
break
case 'tab':
rule.component = 'Tab'
break
case 'input':
rule.component = 'Input'
break
@ -155,6 +158,7 @@ export const convertTheme2To3 = (data) => {
newRules.push(rule)
if (rule.component === 'Button') {
newRules.push({ ...rule, component: 'ScrollbarElement' })
newRules.push({ ...rule, component: 'Tab' })
}
})
return newRules
@ -215,6 +219,7 @@ export const convertTheme2To3 = (data) => {
if (rule.component === 'Button') {
newRules.push({ ...rule, component: 'ScrollbarElement' })
newRules.push({ ...rule, component: 'Tab' })
}
})
return newRules
@ -351,8 +356,7 @@ export const convertTheme2To3 = (data) => {
}
if (newRule.component === 'Button') {
console.log([newRule, { ...newRule, component: 'ScrollbarElement' }])
return [newRule, { ...newRule, component: 'ScrollbarElement' }]
return [newRule, { ...newRule, component: 'Tab' }, { ...newRule, component: 'ScrollbarElement' }]
} else {
return [newRule]
}