From eacbd9b5009a3646854b59e9983753fd288ea1c4 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 27 Aug 2018 22:22:25 +0300 Subject: [PATCH] Separated tab-switcher into a reusable component. This depends on JSX addition --- src/components/tab_switcher/tab_switcher.jsx | 44 ++++ src/components/tab_switcher/tab_switcher.scss | 47 ++++ src/components/user_settings/user_settings.js | 4 +- .../user_settings/user_settings.vue | 246 +++++++++--------- 4 files changed, 215 insertions(+), 126 deletions(-) create mode 100644 src/components/tab_switcher/tab_switcher.jsx create mode 100644 src/components/tab_switcher/tab_switcher.scss diff --git a/src/components/tab_switcher/tab_switcher.jsx b/src/components/tab_switcher/tab_switcher.jsx new file mode 100644 index 00000000..0a6eec11 --- /dev/null +++ b/src/components/tab_switcher/tab_switcher.jsx @@ -0,0 +1,44 @@ +import Vue from 'vue' + +import './tab_switcher.scss' + +export default Vue.component('tab-switcher', { + name: 'TabSwitcher', + data () { + return { + active: 0 + } + }, + methods: { + activateTab(index) { + return () => this.active = index; + } + }, + render(h) { + const tabs = this.$slots.default + .filter(slot => slot.data) + .map((slot, index) => { + const classes = ['tab'] + + if (index === this.active) { + classes.push('active') + } + return () + }); + const contents = ( +
+ {this.$slots.default.filter(slot => slot.data)[this.active]} +
+ ); + return ( +
+
+ {tabs} +
+
+ {contents} +
+
+ ) + } +}) diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss new file mode 100644 index 00000000..f83dc7c2 --- /dev/null +++ b/src/components/tab_switcher/tab_switcher.scss @@ -0,0 +1,47 @@ +@import '../../_variables.scss'; + +.tab-switcher { + .tabs { + display: flex; + position: relative; + justify-content: center; + width: 100%; + overflow: hidden; + padding-top: 5px; + + &::after, &::before { + display: block; + content: ''; + flex: 1 1 auto; + } + + .tab, &::after, &::before { + border-bottom: 1px solid; + border-bottom-color: $fallback--btn; + border-bottom-color: var(--btn, $fallback--btn); + } + + .tab { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: .3em 1em; + + &::-moz-focus-inner { + border: none; + } + + &:not(.active) { + border-bottom: 1px solid; + border-bottom-color: $fallback--btn; + border-bottom-color: var(--btn, $fallback--btn); + z-index: 4; + } + + &.active { + background: transparent; + border-bottom: none; + z-index: 5; + } + } + } +} diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js index f046885e..0b13a668 100644 --- a/src/components/user_settings/user_settings.js +++ b/src/components/user_settings/user_settings.js @@ -1,3 +1,4 @@ +import TabSwitcher from '../tab_switcher/tab_switcher.jsx' import StyleSwitcher from '../style_switcher/style_switcher.vue' const UserSettings = { @@ -23,7 +24,8 @@ const UserSettings = { } }, components: { - StyleSwitcher + StyleSwitcher, + TabSwitcher }, computed: { user () { diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue index c3ca1dbd..64627d92 100644 --- a/src/components/user_settings/user_settings.vue +++ b/src/components/user_settings/user_settings.vue @@ -4,126 +4,131 @@ {{$t('settings.user_settings')}}
-
- - - -
-
-

{{$t('settings.name_bio')}}

-

{{$t('settings.name')}}

- -

{{$t('settings.bio')}}

- -

- - -

-
- -
- - - - + +
+
+

{{$t('settings.name_bio')}}

+

{{$t('settings.name')}}

+ +

{{$t('settings.bio')}}

+ +

+ + +

+
+ +
+ + + + +
+
+ +
+
+

{{$t('settings.avatar')}}

+

{{$t('settings.current_avatar')}}

+ +

{{$t('settings.set_new_avatar')}}

+ + +
+ +
+ + +
+
+

{{$t('settings.profile_banner')}}

+

{{$t('settings.current_profile_banner')}}

+ +

{{$t('settings.set_new_profile_banner')}}

+ + +
+ +
+ + +
+
+

{{$t('settings.profile_background')}}

+

{{$t('settings.set_new_profile_background')}}

+ + +
+ +
+ +
- -
-
-

{{$t('settings.avatar')}}

-

{{$t('settings.current_avatar')}}

- -

{{$t('settings.set_new_avatar')}}

- - -
- + +
+
+

{{$t('settings.change_password')}}

+
+

{{$t('settings.current_password')}}

+ +
+
+

{{$t('settings.new_password')}}

+ +
+
+

{{$t('settings.confirm_new_password')}}

+ +
+ +

{{$t('settings.changed_password')}}

+

{{$t('settings.change_password_error')}}

+

{{changePasswordError}}

+
+ +
+

{{$t('settings.delete_account')}}

+

{{$t('settings.delete_account_description')}}

+
+

{{$t('settings.delete_account_instructions')}}

+

{{$t('login.password')}}

+ + +
+

{{$t('settings.delete_account_error')}}

+

{{deleteAccountError}}

+ +
- - -
-
-

{{$t('settings.profile_banner')}}

-

{{$t('settings.current_profile_banner')}}

- -

{{$t('settings.set_new_profile_banner')}}

- - -
- + +
+
+

{{$t('settings.follow_import')}}

+

{{$t('settings.import_followers_from_a_csv_file')}}

+
+ +
+ + +
+ +

{{$t('settings.follows_imported')}}

+
+
+ +

{{$t('settings.follow_import_error')}}

+
+
+
+

{{$t('settings.follow_export')}}

+ +
+
+

{{$t('settings.follow_export_processing')}}

+
- - -
-
-

{{$t('settings.profile_background')}}

-

{{$t('settings.set_new_profile_background')}}

- - -
- -
- - -
-
-

{{$t('settings.change_password')}}

-
-

{{$t('settings.current_password')}}

- -
-
-

{{$t('settings.new_password')}}

- -
-
-

{{$t('settings.confirm_new_password')}}

- -
- -

{{$t('settings.changed_password')}}

-

{{$t('settings.change_password_error')}}

-

{{changePasswordError}}

-
-
-

{{$t('settings.follow_import')}}

-

{{$t('settings.import_followers_from_a_csv_file')}}

-
- -
- - -
- -

{{$t('settings.follows_imported')}}

-
-
- -

{{$t('settings.follow_import_error')}}

-
-
-
-

{{$t('settings.follow_export')}}

- -
-
-

{{$t('settings.follow_export_processing')}}

-
-
-
-

{{$t('settings.delete_account')}}

-

{{$t('settings.delete_account_description')}}

-
-

{{$t('settings.delete_account_instructions')}}

-

{{$t('login.password')}}

- - -
-

{{$t('settings.delete_account_error')}}

-

{{deleteAccountError}}

- -
+
@@ -151,13 +156,4 @@ margin: 0.25em; } } - -.tab-switcher { - margin: 7px 7px; - display: inline-block; - - button { - height: 30px; - } -}