commit: 879f520b75bcb379790317627bc2a8d2b739a2fb
parent 8a21594dbc5075b92d245f4c83530c7dae71c62a
Author: Henry Jameson <me@hjkos.com>
Date: Thu, 22 Feb 2024 00:02:24 +0200
tabs support + cleanup
Diffstat:
9 files changed, 74 insertions(+), 14 deletions(-)
diff --git a/src/boot/after_store.js b/src/boot/after_store.js
@@ -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)
diff --git a/src/components/alert.style.js b/src/components/alert.style.js
@@ -5,7 +5,8 @@ export default {
'Text',
'Icon',
'Link',
- 'Border'
+ 'Border',
+ 'ButtonUnstyled'
],
variants: {
normal: '.neutral',
diff --git a/src/components/button_unstyled.style.js b/src/components/button_unstyled.style.js
@@ -3,8 +3,6 @@ export default {
selector: '.button-unstyled',
states: {
disabled: ':disabled',
- toggled: '.toggled',
- pressed: ':active',
hover: ':hover:not(:disabled)',
focused: ':focus-within'
},
diff --git a/src/components/panel.style.js b/src/components/panel.style.js
@@ -16,7 +16,8 @@ export default {
'Alert',
'UserCard',
'Chat',
- 'Attachment'
+ 'Attachment',
+ 'Tab'
],
defaultRules: [
{
diff --git a/src/components/tab_switcher/tab.style.js b/src/components/tab_switcher/tab.style.js
@@ -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'
+ }
+ }
+ ]
+}
diff --git a/src/components/tab_switcher/tab_switcher.jsx b/src/components/tab_switcher/tab_switcher.jsx
@@ -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')
diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
@@ -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;
diff --git a/src/services/theme_data/css_utils.js b/src/services/theme_data/css_utils.js
@@ -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 {
diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
@@ -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]
}
