hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge remote-tracking branch 'origin/develop' into migrate/vuex-to-pinia

Browse source
This commit is contained in:
Henry Jameson 2025-01-30 18:08:05 +02:00
commit 58e18d48df
489 changed files with 31167 additions and 9871 deletions
Download patch file Download diff file Expand all files Collapse all files

78
src/components/tab_switcher/tab.style.js Normal file
View file

@ -0,0 +1,78 @@
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: ['--buttonDefaultShadow', '--buttonDefaultBevel'],
roundness: 3
}
},
{
state: ['hover'],
directives: {
shadow: ['--buttonDefaultHoverGlow', '--buttonDefaultBevel']
}
},
{
state: ['active'],
directives: {
opacity: 0
}
},
{
state: ['hover', 'active'],
directives: {
shadow: ['--buttonDefaultShadow', '--buttonDefaultBevel']
}
},
{
state: ['disabled'],
directives: {
background: '$blend(--inheritedBackground 0.25 --parent)',
shadow: ['--buttonDefaultBevel']
}
},
{
component: 'Text',
parent: {
component: 'Tab',
state: ['disabled']
},
directives: {
textOpacity: 0.25,
textOpacityMode: 'blend'
}
},
{
component: 'Icon',
parent: {
component: 'Tab',
state: ['active']
},
directives: {
textColor: '--text'
}
},
{
component: 'Icon',
parent: {
component: 'Tab',
state: ['active', 'hover']
},
directives: {
textColor: '--text'
}
}
]
}

17
src/components/tab_switcher/tab_switcher.jsx
View file

@ -61,13 +61,7 @@ export default {
const isWanted = slot => slot.props && slot.props['data-tab-name'] === tabName
return this.$slots.default().findIndex(isWanted) === this.activeIndex
}
},
settingsModalVisible () {
return this.settingsModalState === 'visible'
},
...mapState(useInterfaceStore, {
settingsModalState: store => store.settingsModalState
})
}
},
beforeUpdate () {
const currentSlot = this.slots()[this.active]
@ -104,7 +98,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')
@ -152,7 +146,12 @@ export default {
if (props.fullHeight) {
classes.push('full-height')
}
const renderSlot = (!this.renderOnlyFocused || active)
let delayRender = slot.props['delay-render']
if (delayRender && active) {
slot.props['delay-render'] = false
delayRender = false
}
const renderSlot = (!delayRender && (!this.renderOnlyFocused || active))
? slot
: ''

43
src/components/tab_switcher/tab_switcher.scss
View file

@ -1,5 +1,3 @@
@import "../../variables";
/* stylelint-disable no-descending-specificity */
.tab-switcher {
display: flex;
@ -25,8 +23,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 +34,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);
}
}
@ -80,8 +76,7 @@
flex-basis: 0.5em;
content: "";
border-right: 1px solid;
border-right-color: $fallback--border;
border-right-color: var(--border, $fallback--border);
border-right-color: var(--border);
}
&::after {
@ -106,16 +101,14 @@
right: 0;
bottom: 0;
border-right: 1px solid;
border-right-color: $fallback--border;
border-right-color: var(--border, $fallback--border);
border-right-color: var(--border);
}
&::before {
flex: 0 0 6px;
content: "";
border-right: 1px solid;
border-right-color: $fallback--border;
border-right-color: var(--border, $fallback--border);
border-right-color: var(--border);
}
&:last-child .tab {
@ -126,7 +119,7 @@
.tab {
flex: 1;
box-sizing: content-box;
min-width: 10em;
max-width: 9em;
min-width: 1px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
@ -135,12 +128,22 @@
margin-right: -200px;
margin-left: 1em;
&:not(.active) {
margin-top: 0;
margin-left: 1.5em;
}
@media all and (max-width: 800px) {
padding-left: 0.25em;
padding-right: calc(0.25em + 200px);
margin-right: calc(0.25em - 200px);
margin-left: 0.25em;
&:not(.active) {
margin-top: 0;
margin-left: 0.5em;
}
.text {
display: none;
}
@ -173,12 +176,22 @@
}
.tab {
user-select: none;
color: var(--text);
border: none;
cursor: pointer;
box-shadow: var(--shadow);
font-size: 1em;
font-family: var(--font);
border-radius: var(--roundness);
background-color: var(--background);
position: relative;
white-space: nowrap;
padding: 6px 1em;
&:not(.active) {
z-index: 4;
margin-top: 0.25em;
&:hover {
z-index: 6;
@ -188,8 +201,6 @@
&.active {
background: transparent;
z-index: 5;
color: $fallback--text;
color: var(--tabActiveText, $fallback--text);
}
img {
@ -231,7 +242,7 @@
margin-top: 0.5em;
margin-left: 0.2em;
margin-bottom: 0.25em;
border-bottom: 1px solid var(--border, $fallback--border);
border-bottom: 1px solid var(--border);
@media all and (min-width: 800px) {
display: none;