From 433ea02a18c0328b8079a40657220633c09e363a Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 18 Apr 2021 14:58:02 +0300 Subject: Changed some of TabSwitcher's internals for easier Vue3 migration --- .../settings_modal/settings_modal_content.js | 2 +- .../settings_modal/tabs/mutes_and_blocks_tab.js | 2 +- .../settings_modal/tabs/theme_tab/theme_tab.js | 2 +- src/components/sticker_picker/sticker_picker.js | 2 +- src/components/tab_switcher/tab_switcher.js | 156 ------------------- src/components/tab_switcher/tab_switcher.jsx | 171 +++++++++++++++++++++ src/components/user_profile/user_profile.js | 2 +- 7 files changed, 176 insertions(+), 161 deletions(-) delete mode 100644 src/components/tab_switcher/tab_switcher.js create mode 100644 src/components/tab_switcher/tab_switcher.jsx (limited to 'src/components') diff --git a/src/components/settings_modal/settings_modal_content.js b/src/components/settings_modal/settings_modal_content.js index 9dcf1b5a..7e366580 100644 --- a/src/components/settings_modal/settings_modal_content.js +++ b/src/components/settings_modal/settings_modal_content.js @@ -1,4 +1,4 @@ -import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js' +import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx' import DataImportExportTab from './tabs/data_import_export_tab.vue' import MutesAndBlocksTab from './tabs/mutes_and_blocks_tab.vue' diff --git a/src/components/settings_modal/tabs/mutes_and_blocks_tab.js b/src/components/settings_modal/tabs/mutes_and_blocks_tab.js index 40a87b81..6cfeea35 100644 --- a/src/components/settings_modal/tabs/mutes_and_blocks_tab.js +++ b/src/components/settings_modal/tabs/mutes_and_blocks_tab.js @@ -2,7 +2,7 @@ import get from 'lodash/get' import map from 'lodash/map' import reject from 'lodash/reject' import Autosuggest from 'src/components/autosuggest/autosuggest.vue' -import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js' +import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx' import BlockCard from 'src/components/block_card/block_card.vue' import MuteCard from 'src/components/mute_card/mute_card.vue' import DomainMuteCard from 'src/components/domain_mute_card/domain_mute_card.vue' diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js index 8960c566..727513f4 100644 --- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js +++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js @@ -34,7 +34,7 @@ import OpacityInput from 'src/components/opacity_input/opacity_input.vue' import ShadowControl from 'src/components/shadow_control/shadow_control.vue' import FontControl from 'src/components/font_control/font_control.vue' import ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.vue' -import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js' +import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx' import Checkbox from 'src/components/checkbox/checkbox.vue' import Preview from './preview.vue' diff --git a/src/components/sticker_picker/sticker_picker.js b/src/components/sticker_picker/sticker_picker.js index 8daf3f07..3a2d3914 100644 --- a/src/components/sticker_picker/sticker_picker.js +++ b/src/components/sticker_picker/sticker_picker.js @@ -1,6 +1,6 @@ /* eslint-env browser */ import statusPosterService from '../../services/status_poster/status_poster.service.js' -import TabSwitcher from '../tab_switcher/tab_switcher.js' +import TabSwitcher from '../tab_switcher/tab_switcher.jsx' const StickerPicker = { components: { diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js deleted file mode 100644 index 12aac8e6..00000000 --- a/src/components/tab_switcher/tab_switcher.js +++ /dev/null @@ -1,156 +0,0 @@ -import Vue from 'vue' -import { mapState } from 'vuex' -import { FontAwesomeIcon as FAIcon } from '@fortawesome/vue-fontawesome' - -import './tab_switcher.scss' - -export default Vue.component('tab-switcher', { - name: 'TabSwitcher', - props: { - renderOnlyFocused: { - required: false, - type: Boolean, - default: false - }, - onSwitch: { - required: false, - type: Function, - default: undefined - }, - activeTab: { - required: false, - type: String, - default: undefined - }, - scrollableTabs: { - required: false, - type: Boolean, - default: false - }, - sideTabBar: { - required: false, - type: Boolean, - default: false - } - }, - data () { - return { - active: this.$slots.default.findIndex(_ => _.tag) - } - }, - computed: { - activeIndex () { - // In case of controlled component - if (this.activeTab) { - return this.$slots.default.findIndex(slot => this.activeTab === slot.key) - } else { - return this.active - } - }, - settingsModalVisible () { - return this.settingsModalState === 'visible' - }, - ...mapState({ - settingsModalState: state => state.interface.settingsModalState - }) - }, - beforeUpdate () { - const currentSlot = this.$slots.default[this.active] - if (!currentSlot.tag) { - this.active = this.$slots.default.findIndex(_ => _.tag) - } - }, - methods: { - clickTab (index) { - return (e) => { - e.preventDefault() - this.setTab(index) - } - }, - setTab (index) { - if (typeof this.onSwitch === 'function') { - this.onSwitch.call(null, this.$slots.default[index].key) - } - this.active = index - if (this.scrollableTabs) { - this.$refs.contents.scrollTop = 0 - } - } - }, - render (h) { - const tabs = this.$slots.default - .map((slot, index) => { - if (!slot.tag) return - const classesTab = ['tab', 'button-default'] - const classesWrapper = ['tab-wrapper'] - if (this.activeIndex === index) { - classesTab.push('active') - classesWrapper.push('active') - } - if (slot.data.attrs.image) { - return ( -
- -
- ) - } - return ( -
- -
- ) - }) - - const contents = this.$slots.default.map((slot, index) => { - if (!slot.tag) return - const active = this.activeIndex === index - const classes = [ active ? 'active' : 'hidden' ] - if (slot.data.attrs.fullHeight) { - classes.push('full-height') - } - const renderSlot = (!this.renderOnlyFocused || active) - ? slot - : '' - - return ( -
- { - this.sideTabBar - ?

{slot.data.attrs.label}

- : '' - } - {renderSlot} -
- ) - }) - - return ( -
-
- {tabs} -
-
- {contents} -
-
- ) - } -}) diff --git a/src/components/tab_switcher/tab_switcher.jsx b/src/components/tab_switcher/tab_switcher.jsx new file mode 100644 index 00000000..68eee122 --- /dev/null +++ b/src/components/tab_switcher/tab_switcher.jsx @@ -0,0 +1,171 @@ +import { mapState } from 'vuex' +import { FontAwesomeIcon as FAIcon } from '@fortawesome/vue-fontawesome' + +import './tab_switcher.scss' + +// TODO VUE3: change data to props +const findFirstUsable = (slots) => slots.findIndex(_ => _.data && _.data.attrs) + +export default { + name: 'TabSwitcher', + props: { + renderOnlyFocused: { + required: false, + type: Boolean, + default: false + }, + onSwitch: { + required: false, + type: Function, + default: undefined + }, + activeTab: { + required: false, + type: String, + default: undefined + }, + scrollableTabs: { + required: false, + type: Boolean, + default: false + }, + sideTabBar: { + required: false, + type: Boolean, + default: false + } + }, + data () { + console.log(this.$slots.default) + return { + // TODO VUE3: add () after 'default' + active: findFirstUsable(this.$slots.default) + } + }, + computed: { + slots () { + // TODO VUE3: add () at the end + return this.$slots.default + }, + activeIndex () { + // In case of controlled component + if (this.activeTab) { + return this.$slots.default.findIndex(slot => this.activeTab === slot.key) + } else { + return this.active + } + }, + settingsModalVisible () { + return this.settingsModalState === 'visible' + }, + ...mapState({ + settingsModalState: state => state.interface.settingsModalState + }) + }, + beforeUpdate () { + console.log(this.slots, this.active) + const currentSlot = this.slots[this.active] + // TODO VUE3: change data to props + if (!currentSlot.data) { + this.active = findFirstUsable(this.slots) + } + }, + methods: { + clickTab (index) { + return (e) => { + e.preventDefault() + this.setTab(index) + } + }, + setTab (index) { + if (typeof this.onSwitch === 'function') { + this.onSwitch.call(null, this.slots[index].key) + } + this.active = index + if (this.scrollableTabs) { + this.$refs.contents.scrollTop = 0 + } + } + }, + // TODO VUE3: remove 'h' here + render (h) { + const tabs = this.slots + .map((slot, index) => { + // TODO VUE3 change to slot.props + const props = slot.data && slot.data.attrs + if (!props) return + const classesTab = ['tab', 'button-default'] + const classesWrapper = ['tab-wrapper'] + if (this.activeIndex === index) { + classesTab.push('active') + classesWrapper.push('active') + } + if (props.image) { + return ( +
+ +
+ ) + } + return ( +
+ +
+ ) + }) + + const contents = this.slots.map((slot, index) => { + // TODO VUE3 change to slot.props + const props = slot.data && slot.data.attrs + if (!props) return + const active = this.activeIndex === index + const classes = [ active ? 'active' : 'hidden' ] + if (props.fullHeight) { + classes.push('full-height') + } + const renderSlot = (!this.renderOnlyFocused || active) + ? slot + : '' + + return ( +
+ { + this.sideTabBar + ?

{props.label}

+ : '' + } + {renderSlot} +
+ ) + }) + + return ( +
+
+ {tabs} +
+
+ {contents} +
+
+ ) + } +} diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js index c0b55a6c..c5ccf747 100644 --- a/src/components/user_profile/user_profile.js +++ b/src/components/user_profile/user_profile.js @@ -3,7 +3,7 @@ import UserCard from '../user_card/user_card.vue' import FollowCard from '../follow_card/follow_card.vue' import Timeline from '../timeline/timeline.vue' import Conversation from '../conversation/conversation.vue' -import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js' +import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx' import List from '../list/list.vue' import withLoadMore from '../../hocs/with_load_more/with_load_more' import { library } from '@fortawesome/fontawesome-svg-core' -- cgit v1.2.3-70-g09d2 From b0789fd6fd280a3dc8cefb4cb2410abec4be9ae6 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 18 Apr 2021 15:03:28 +0300 Subject: fix theme tab, remove console.logs --- src/components/tab_switcher/tab_switcher.jsx | 21 ++++++++++----------- 1 file changed, 10 insertions(+), 11 deletions(-) (limited to 'src/components') diff --git a/src/components/tab_switcher/tab_switcher.jsx b/src/components/tab_switcher/tab_switcher.jsx index 68eee122..44221d50 100644 --- a/src/components/tab_switcher/tab_switcher.jsx +++ b/src/components/tab_switcher/tab_switcher.jsx @@ -36,17 +36,12 @@ export default { } }, data () { - console.log(this.$slots.default) return { // TODO VUE3: add () after 'default' active: findFirstUsable(this.$slots.default) } }, computed: { - slots () { - // TODO VUE3: add () at the end - return this.$slots.default - }, activeIndex () { // In case of controlled component if (this.activeTab) { @@ -63,11 +58,10 @@ export default { }) }, beforeUpdate () { - console.log(this.slots, this.active) - const currentSlot = this.slots[this.active] + const currentSlot = this.slots()[this.active] // TODO VUE3: change data to props if (!currentSlot.data) { - this.active = findFirstUsable(this.slots) + this.active = findFirstUsable(this.slots()) } }, methods: { @@ -77,9 +71,14 @@ export default { this.setTab(index) } }, + // DO NOT put it to computed, it doesn't work (caching?) + slots () { + // TODO VUE3: add () at the end + return this.$slots.default + }, setTab (index) { if (typeof this.onSwitch === 'function') { - this.onSwitch.call(null, this.slots[index].key) + this.onSwitch.call(null, this.slots()[index].key) } this.active = index if (this.scrollableTabs) { @@ -89,7 +88,7 @@ export default { }, // TODO VUE3: remove 'h' here render (h) { - const tabs = this.slots + const tabs = this.slots() .map((slot, index) => { // TODO VUE3 change to slot.props const props = slot.data && slot.data.attrs @@ -132,7 +131,7 @@ export default { ) }) - const contents = this.slots.map((slot, index) => { + const contents = this.slots().map((slot, index) => { // TODO VUE3 change to slot.props const props = slot.data && slot.data.attrs if (!props) return -- cgit v1.2.3-70-g09d2 From 33777fab47b65975d343d219c0b1866ba6849b3f Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 18 Apr 2021 15:39:06 +0300 Subject: small refactoring to uncouple tab-switcher from settings modal --- src/components/settings_modal/settings_modal_content.js | 3 +++ src/components/settings_modal/settings_modal_content.vue | 1 + src/components/tab_switcher/tab_switcher.jsx | 14 ++++++++++---- 3 files changed, 14 insertions(+), 4 deletions(-) (limited to 'src/components') diff --git a/src/components/settings_modal/settings_modal_content.js b/src/components/settings_modal/settings_modal_content.js index 7e366580..deb77298 100644 --- a/src/components/settings_modal/settings_modal_content.js +++ b/src/components/settings_modal/settings_modal_content.js @@ -53,6 +53,9 @@ const SettingsModalContent = { }, open () { return this.$store.state.interface.settingsModalState !== 'hidden' + }, + bodyLock () { + return this.$store.state.interface.settingsModalState === 'visible' } }, methods: { diff --git a/src/components/settings_modal/settings_modal_content.vue b/src/components/settings_modal/settings_modal_content.vue index c9ed2a38..0be76d22 100644 --- a/src/components/settings_modal/settings_modal_content.vue +++ b/src/components/settings_modal/settings_modal_content.vue @@ -4,6 +4,7 @@ class="settings_tab-switcher" :side-tab-bar="true" :scrollable-tabs="true" + :body-scroll-lock="bodyLock" >
state.interface.settingsModalState }) @@ -161,7 +163,11 @@ export default {
{tabs}
-
+
{contents}
-- cgit v1.2.3-70-g09d2 From 509ec995743d21b6a5b81634d026460b082f3506 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sat, 24 Apr 2021 18:04:35 +0300 Subject: some minor fixes to get it to boot --- src/components/settings_modal/settings_modal.js | 16 +++++------ src/components/settings_modal/settings_modal.vue | 32 ++++++++++++---------- src/components/settings_modal/tabs/version_tab.vue | 2 +- src/components/user_panel/user_panel.vue | 2 +- 4 files changed, 26 insertions(+), 26 deletions(-) (limited to 'src/components') diff --git a/src/components/settings_modal/settings_modal.js b/src/components/settings_modal/settings_modal.js index 04043483..7f97fa08 100644 --- a/src/components/settings_modal/settings_modal.js +++ b/src/components/settings_modal/settings_modal.js @@ -1,7 +1,7 @@ +import { defineAsyncComponent } from 'vue' import Modal from 'src/components/modal/modal.vue' import PanelLoading from 'src/components/panel_loading/panel_loading.vue' import AsyncComponentError from 'src/components/async_component_error/async_component_error.vue' -import getResettableAsyncComponent from 'src/services/resettable_async_component.js' import Popover from '../popover/popover.vue' import { library } from '@fortawesome/fontawesome-svg-core' import { cloneDeep } from 'lodash' @@ -51,14 +51,12 @@ const SettingsModal = { components: { Modal, Popover, - SettingsModalContent: getResettableAsyncComponent( - () => import('./settings_modal_content.vue'), - { - loading: PanelLoading, - error: AsyncComponentError, - delay: 0 - } - ) + SettingsModalContent: defineAsyncComponent({ + loader: () => import('./settings_modal_content.vue'), + loadingComponent: PanelLoading, + errorComponent: AsyncComponentError, + delay: 0 + }) }, methods: { closeModal () { diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue index c7da5433..12519925 100644 --- a/src/components/settings_modal/settings_modal.vue +++ b/src/components/settings_modal/settings_modal.vue @@ -11,22 +11,24 @@ {{ $t('settings.settings') }} - - @@ -31,42 +35,60 @@ --_avatarShadowInset: var(--avatarStatusShadowInset); --_still-image-label-visibility: hidden; + display: inline-block; + position: relative; width: 48px; height: 48px; - box-shadow: var(--_avatarShadowBox); - border-radius: $fallback--avatarRadius; - border-radius: var(--avatarRadius, $fallback--avatarRadius); - img { + &.-compact { + width: 32px; + height: 32px; + border-radius: $fallback--avatarAltRadius; + border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); + } + + .avatar { width: 100%; height: 100%; - } + box-shadow: var(--_avatarShadowBox); + border-radius: $fallback--avatarRadius; + border-radius: var(--avatarRadius, $fallback--avatarRadius); - & > .bot-indicator { - position: absolute; - bottom: 0; - right: 0; - } + &.-better-shadow { + box-shadow: var(--_avatarShadowInset); + filter: var(--_avatarShadowFilter); + } - &.better-shadow { - box-shadow: var(--_avatarShadowInset); - filter: var(--_avatarShadowFilter); - } + &.-animated::before { + display: none; + } + + &.-compact { + border-radius: $fallback--avatarAltRadius; + border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); + } - &.animated::before { - display: none; + &.-placeholder { + background-color: $fallback--fg; + background-color: var(--fg, $fallback--fg); + } } - &.avatar-compact { - width: 32px; - height: 32px; - border-radius: $fallback--avatarAltRadius; - border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); + img { + width: 100%; + height: 100%; } - &.-placeholder { - background-color: $fallback--fg; - background-color: var(--fg, $fallback--fg); + .bot-indicator { + position: absolute; + bottom: 0; + right: 0; + margin: -0.2em; + padding: 0.2em; + background: rgba(127, 127, 127, 0.5); + color: #fff; + border-radius: var(--tooltipRadius); } + } -- cgit v1.2.3-70-g09d2 From 1187727b6065363c253f399a6da53725a493fb32 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 21 Mar 2022 21:29:51 +0200 Subject: fix tabswitcher bugs --- src/components/interactions/interactions.js | 4 +++- src/components/tab_switcher/tab_switcher.jsx | 9 ++++++--- 2 files changed, 9 insertions(+), 4 deletions(-) (limited to 'src/components') diff --git a/src/components/interactions/interactions.js b/src/components/interactions/interactions.js index 7fe5e76d..c5ceb63d 100644 --- a/src/components/interactions/interactions.js +++ b/src/components/interactions/interactions.js @@ -1,4 +1,5 @@ import Notifications from '../notifications/notifications.vue' +import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx' const tabModeDict = { mentions: ['mention'], @@ -20,7 +21,8 @@ const Interactions = { } }, components: { - Notifications + Notifications, + TabSwitcher } } diff --git a/src/components/tab_switcher/tab_switcher.jsx b/src/components/tab_switcher/tab_switcher.jsx index db82e075..a5c6cd2b 100644 --- a/src/components/tab_switcher/tab_switcher.jsx +++ b/src/components/tab_switcher/tab_switcher.jsx @@ -1,5 +1,5 @@ // eslint-disable-next-line no-unused -import { h } from 'vue' +import { h, Fragment } from 'vue' import { mapState } from 'vuex' import { FontAwesomeIcon as FAIcon } from '@fortawesome/vue-fontawesome' @@ -43,14 +43,14 @@ export default { }, data () { return { - active: findFirstUsable(this.$slots.default()) + active: findFirstUsable(this.slots()) } }, computed: { activeIndex () { // In case of controlled component if (this.activeTab) { - return this.$slots.default().findIndex(slot => this.activeTab === slot.key) + return this.slots().findIndex(slot => this.activeTab === slot.key) } else { return this.active } @@ -74,6 +74,9 @@ export default { }, // DO NOT put it to computed, it doesn't work (caching?) slots () { + if (this.$slots.default()[0].type === Fragment) { + return this.$slots.default()[0].children + } return this.$slots.default() }, setTab (index) { -- cgit v1.2.3-70-g09d2 From 4cb14c257c980a13e50027ed4b1a2e38fcafe953 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 21 Mar 2022 21:34:55 +0200 Subject: fix expert mode checkbox not working --- src/components/settings_modal/settings_modal.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/components') diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue index ccbb2af9..18b151f4 100644 --- a/src/components/settings_modal/settings_modal.vue +++ b/src/components/settings_modal/settings_modal.vue @@ -111,7 +111,7 @@ - + {{ $t("settings.expert_mode") }}
-- cgit v1.2.3-70-g09d2 From 7a17eb7fec4e8f7dbe0a288a22498b800886ac01 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 21 Mar 2022 22:00:25 +0200 Subject: fix selects --- src/components/select/select.js | 7 ++----- src/components/select/select.vue | 5 ++--- 2 files changed, 4 insertions(+), 8 deletions(-) (limited to 'src/components') diff --git a/src/components/select/select.js b/src/components/select/select.js index 49535d07..ec571a14 100644 --- a/src/components/select/select.js +++ b/src/components/select/select.js @@ -8,12 +8,9 @@ library.add( ) export default { - model: { - prop: 'value', - event: 'change' - }, + emits: ['update:modelValue'], props: [ - 'value', + 'modelValue', 'disabled', 'unstyled', 'kind' diff --git a/src/components/select/select.vue b/src/components/select/select.vue index 56e651e3..08c88979 100644 --- a/src/components/select/select.vue +++ b/src/components/select/select.vue @@ -1,4 +1,3 @@ -