From b4cc1e020bf62cfebbe0d68efa12a980d2b2c27a Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 27 Aug 2018 21:25:00 +0300 Subject: [PATCH 01/29] added JSX support --- .babelrc | 4 +- build/webpack.base.conf.js | 2 +- package.json | 4 ++ yarn.lock | 111 ++++++++++++++++++++++++++++++------- 4 files changed, 99 insertions(+), 22 deletions(-) diff --git a/.babelrc b/.babelrc index 9fe4b349..bc2b0e31 100644 --- a/.babelrc +++ b/.babelrc @@ -1,5 +1,5 @@ { - "presets": ["es2015", "stage-2"], - "plugins": ["transform-runtime", "lodash"], + "presets": ["es2015", "stage-2", "env"], + "plugins": ["transform-runtime", "lodash", "transform-vue-jsx"], "comments": false } diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js index 7bba3a10..198532ca 100644 --- a/build/webpack.base.conf.js +++ b/build/webpack.base.conf.js @@ -54,7 +54,7 @@ module.exports = { loader: 'vue' }, { - test: /\.js$/, + test: /\.jsx?$/, loader: 'babel', include: projectRoot, exclude: /node_modules\/(?!tributejs)/ diff --git a/package.json b/package.json index 65255715..b716e7c6 100644 --- a/package.json +++ b/package.json @@ -37,8 +37,12 @@ "autoprefixer": "^6.4.0", "babel-core": "^6.0.0", "babel-eslint": "^7.0.0", + "babel-helper-vue-jsx-merge-props": "^2.0.3", "babel-loader": "^6.0.0", + "babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-transform-runtime": "^6.0.0", + "babel-plugin-transform-vue-jsx": "3", + "babel-preset-env": "^1.7.0", "babel-preset-es2015": "^6.0.0", "babel-preset-stage-2": "^6.0.0", "babel-register": "^6.0.0", diff --git a/yarn.lock b/yarn.lock index 2be9efc8..fdad8b49 100644 --- a/yarn.lock +++ b/yarn.lock @@ -434,6 +434,10 @@ babel-helper-replace-supers@^6.24.1: babel-traverse "^6.24.1" babel-types "^6.24.1" +babel-helper-vue-jsx-merge-props@^2.0.3: + version "2.0.3" + resolved "https://registry.yarnpkg.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz#22aebd3b33902328e513293a8e4992b384f9f1b6" + babel-helpers@^6.24.1: version "6.24.1" resolved "https://registry.yarnpkg.com/babel-helpers/-/babel-helpers-6.24.1.tgz#3471de9caec388e5c850e597e58a26ddf37602b2" @@ -500,6 +504,10 @@ babel-plugin-syntax-exponentiation-operator@^6.8.0: version "6.13.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz#9ee7e8337290da95288201a6a57f4170317830de" +babel-plugin-syntax-jsx@^6.18.0: + version "6.18.0" + resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946" + babel-plugin-syntax-object-rest-spread@^6.8.0: version "6.13.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5" @@ -516,7 +524,7 @@ babel-plugin-transform-async-generator-functions@^6.24.1: babel-plugin-syntax-async-generators "^6.5.0" babel-runtime "^6.22.0" -babel-plugin-transform-async-to-generator@^6.24.1: +babel-plugin-transform-async-to-generator@^6.22.0, babel-plugin-transform-async-to-generator@^6.24.1: version "6.24.1" resolved "https://registry.yarnpkg.com/babel-plugin-transform-async-to-generator/-/babel-plugin-transform-async-to-generator-6.24.1.tgz#6536e378aff6cb1d5517ac0e40eb3e9fc8d08761" dependencies: @@ -555,7 +563,7 @@ babel-plugin-transform-es2015-block-scoped-functions@^6.22.0: dependencies: babel-runtime "^6.22.0" -babel-plugin-transform-es2015-block-scoping@^6.24.1: +babel-plugin-transform-es2015-block-scoping@^6.23.0, babel-plugin-transform-es2015-block-scoping@^6.24.1: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-block-scoping/-/babel-plugin-transform-es2015-block-scoping-6.26.0.tgz#d70f5299c1308d05c12f463813b0a09e73b1895f" dependencies: @@ -565,7 +573,7 @@ babel-plugin-transform-es2015-block-scoping@^6.24.1: babel-types "^6.26.0" lodash "^4.17.4" -babel-plugin-transform-es2015-classes@^6.24.1: +babel-plugin-transform-es2015-classes@^6.23.0, babel-plugin-transform-es2015-classes@^6.24.1: version "6.24.1" resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-classes/-/babel-plugin-transform-es2015-classes-6.24.1.tgz#5a4c58a50c9c9461e564b4b2a3bfabc97a2584db" dependencies: @@ -579,33 +587,33 @@ babel-plugin-transform-es2015-classes@^6.24.1: babel-traverse "^6.24.1" babel-types "^6.24.1" -babel-plugin-transform-es2015-computed-properties@^6.24.1: +babel-plugin-transform-es2015-computed-properties@^6.22.0, babel-plugin-transform-es2015-computed-properties@^6.24.1: version "6.24.1" resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-computed-properties/-/babel-plugin-transform-es2015-computed-properties-6.24.1.tgz#6fe2a8d16895d5634f4cd999b6d3480a308159b3" dependencies: babel-runtime "^6.22.0" babel-template "^6.24.1" -babel-plugin-transform-es2015-destructuring@^6.22.0: +babel-plugin-transform-es2015-destructuring@^6.22.0, babel-plugin-transform-es2015-destructuring@^6.23.0: version "6.23.0" resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-destructuring/-/babel-plugin-transform-es2015-destructuring-6.23.0.tgz#997bb1f1ab967f682d2b0876fe358d60e765c56d" dependencies: babel-runtime "^6.22.0" -babel-plugin-transform-es2015-duplicate-keys@^6.24.1: +babel-plugin-transform-es2015-duplicate-keys@^6.22.0, babel-plugin-transform-es2015-duplicate-keys@^6.24.1: version "6.24.1" resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-duplicate-keys/-/babel-plugin-transform-es2015-duplicate-keys-6.24.1.tgz#73eb3d310ca969e3ef9ec91c53741a6f1576423e" dependencies: babel-runtime "^6.22.0" babel-types "^6.24.1" -babel-plugin-transform-es2015-for-of@^6.22.0: +babel-plugin-transform-es2015-for-of@^6.22.0, babel-plugin-transform-es2015-for-of@^6.23.0: version "6.23.0" resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-for-of/-/babel-plugin-transform-es2015-for-of-6.23.0.tgz#f47c95b2b613df1d3ecc2fdb7573623c75248691" dependencies: babel-runtime "^6.22.0" -babel-plugin-transform-es2015-function-name@^6.24.1: +babel-plugin-transform-es2015-function-name@^6.22.0, babel-plugin-transform-es2015-function-name@^6.24.1: version "6.24.1" resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-function-name/-/babel-plugin-transform-es2015-function-name-6.24.1.tgz#834c89853bc36b1af0f3a4c5dbaa94fd8eacaa8b" dependencies: @@ -619,7 +627,7 @@ babel-plugin-transform-es2015-literals@^6.22.0: dependencies: babel-runtime "^6.22.0" -babel-plugin-transform-es2015-modules-amd@^6.24.1: +babel-plugin-transform-es2015-modules-amd@^6.22.0, babel-plugin-transform-es2015-modules-amd@^6.24.1: version "6.24.1" resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-amd/-/babel-plugin-transform-es2015-modules-amd-6.24.1.tgz#3b3e54017239842d6d19c3011c4bd2f00a00d154" dependencies: @@ -627,6 +635,15 @@ babel-plugin-transform-es2015-modules-amd@^6.24.1: babel-runtime "^6.22.0" babel-template "^6.24.1" +babel-plugin-transform-es2015-modules-commonjs@^6.23.0: + version "6.26.2" + resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-commonjs/-/babel-plugin-transform-es2015-modules-commonjs-6.26.2.tgz#58a793863a9e7ca870bdc5a881117ffac27db6f3" + dependencies: + babel-plugin-transform-strict-mode "^6.24.1" + babel-runtime "^6.26.0" + babel-template "^6.26.0" + babel-types "^6.26.0" + babel-plugin-transform-es2015-modules-commonjs@^6.24.1: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-commonjs/-/babel-plugin-transform-es2015-modules-commonjs-6.26.0.tgz#0d8394029b7dc6abe1a97ef181e00758dd2e5d8a" @@ -636,7 +653,7 @@ babel-plugin-transform-es2015-modules-commonjs@^6.24.1: babel-template "^6.26.0" babel-types "^6.26.0" -babel-plugin-transform-es2015-modules-systemjs@^6.24.1: +babel-plugin-transform-es2015-modules-systemjs@^6.23.0, babel-plugin-transform-es2015-modules-systemjs@^6.24.1: version "6.24.1" resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-systemjs/-/babel-plugin-transform-es2015-modules-systemjs-6.24.1.tgz#ff89a142b9119a906195f5f106ecf305d9407d23" dependencies: @@ -644,7 +661,7 @@ babel-plugin-transform-es2015-modules-systemjs@^6.24.1: babel-runtime "^6.22.0" babel-template "^6.24.1" -babel-plugin-transform-es2015-modules-umd@^6.24.1: +babel-plugin-transform-es2015-modules-umd@^6.23.0, babel-plugin-transform-es2015-modules-umd@^6.24.1: version "6.24.1" resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-umd/-/babel-plugin-transform-es2015-modules-umd-6.24.1.tgz#ac997e6285cd18ed6176adb607d602344ad38468" dependencies: @@ -652,14 +669,14 @@ babel-plugin-transform-es2015-modules-umd@^6.24.1: babel-runtime "^6.22.0" babel-template "^6.24.1" -babel-plugin-transform-es2015-object-super@^6.24.1: +babel-plugin-transform-es2015-object-super@^6.22.0, babel-plugin-transform-es2015-object-super@^6.24.1: version "6.24.1" resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-object-super/-/babel-plugin-transform-es2015-object-super-6.24.1.tgz#24cef69ae21cb83a7f8603dad021f572eb278f8d" dependencies: babel-helper-replace-supers "^6.24.1" babel-runtime "^6.22.0" -babel-plugin-transform-es2015-parameters@^6.24.1: +babel-plugin-transform-es2015-parameters@^6.23.0, babel-plugin-transform-es2015-parameters@^6.24.1: version "6.24.1" resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-parameters/-/babel-plugin-transform-es2015-parameters-6.24.1.tgz#57ac351ab49caf14a97cd13b09f66fdf0a625f2b" dependencies: @@ -670,7 +687,7 @@ babel-plugin-transform-es2015-parameters@^6.24.1: babel-traverse "^6.24.1" babel-types "^6.24.1" -babel-plugin-transform-es2015-shorthand-properties@^6.24.1: +babel-plugin-transform-es2015-shorthand-properties@^6.22.0, babel-plugin-transform-es2015-shorthand-properties@^6.24.1: version "6.24.1" resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-shorthand-properties/-/babel-plugin-transform-es2015-shorthand-properties-6.24.1.tgz#24f875d6721c87661bbd99a4622e51f14de38aa0" dependencies: @@ -683,7 +700,7 @@ babel-plugin-transform-es2015-spread@^6.22.0: dependencies: babel-runtime "^6.22.0" -babel-plugin-transform-es2015-sticky-regex@^6.24.1: +babel-plugin-transform-es2015-sticky-regex@^6.22.0, babel-plugin-transform-es2015-sticky-regex@^6.24.1: version "6.24.1" resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-sticky-regex/-/babel-plugin-transform-es2015-sticky-regex-6.24.1.tgz#00c1cdb1aca71112cdf0cf6126c2ed6b457ccdbc" dependencies: @@ -697,13 +714,13 @@ babel-plugin-transform-es2015-template-literals@^6.22.0: dependencies: babel-runtime "^6.22.0" -babel-plugin-transform-es2015-typeof-symbol@^6.22.0: +babel-plugin-transform-es2015-typeof-symbol@^6.22.0, babel-plugin-transform-es2015-typeof-symbol@^6.23.0: version "6.23.0" resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-typeof-symbol/-/babel-plugin-transform-es2015-typeof-symbol-6.23.0.tgz#dec09f1cddff94b52ac73d505c84df59dcceb372" dependencies: babel-runtime "^6.22.0" -babel-plugin-transform-es2015-unicode-regex@^6.24.1: +babel-plugin-transform-es2015-unicode-regex@^6.22.0, babel-plugin-transform-es2015-unicode-regex@^6.24.1: version "6.24.1" resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-unicode-regex/-/babel-plugin-transform-es2015-unicode-regex-6.24.1.tgz#d38b12f42ea7323f729387f18a7c5ae1faeb35e9" dependencies: @@ -711,7 +728,7 @@ babel-plugin-transform-es2015-unicode-regex@^6.24.1: babel-runtime "^6.22.0" regexpu-core "^2.0.0" -babel-plugin-transform-exponentiation-operator@^6.24.1: +babel-plugin-transform-exponentiation-operator@^6.22.0, babel-plugin-transform-exponentiation-operator@^6.24.1: version "6.24.1" resolved "https://registry.yarnpkg.com/babel-plugin-transform-exponentiation-operator/-/babel-plugin-transform-exponentiation-operator-6.24.1.tgz#2ab0c9c7f3098fa48907772bb813fe41e8de3a0e" dependencies: @@ -726,7 +743,7 @@ babel-plugin-transform-object-rest-spread@^6.22.0: babel-plugin-syntax-object-rest-spread "^6.8.0" babel-runtime "^6.26.0" -babel-plugin-transform-regenerator@^6.24.1: +babel-plugin-transform-regenerator@^6.22.0, babel-plugin-transform-regenerator@^6.24.1: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.26.0.tgz#e0703696fbde27f0a3efcacf8b4dca2f7b3a8f2f" dependencies: @@ -745,6 +762,47 @@ babel-plugin-transform-strict-mode@^6.24.1: babel-runtime "^6.22.0" babel-types "^6.24.1" +babel-plugin-transform-vue-jsx@3: + version "3.7.0" + resolved "https://registry.yarnpkg.com/babel-plugin-transform-vue-jsx/-/babel-plugin-transform-vue-jsx-3.7.0.tgz#d40492e6692a36b594f7e9a1928f43e969740960" + dependencies: + esutils "^2.0.2" + +babel-preset-env@^1.7.0: + version "1.7.0" + resolved "https://registry.yarnpkg.com/babel-preset-env/-/babel-preset-env-1.7.0.tgz#dea79fa4ebeb883cd35dab07e260c1c9c04df77a" + dependencies: + babel-plugin-check-es2015-constants "^6.22.0" + babel-plugin-syntax-trailing-function-commas "^6.22.0" + babel-plugin-transform-async-to-generator "^6.22.0" + babel-plugin-transform-es2015-arrow-functions "^6.22.0" + babel-plugin-transform-es2015-block-scoped-functions "^6.22.0" + babel-plugin-transform-es2015-block-scoping "^6.23.0" + babel-plugin-transform-es2015-classes "^6.23.0" + babel-plugin-transform-es2015-computed-properties "^6.22.0" + babel-plugin-transform-es2015-destructuring "^6.23.0" + babel-plugin-transform-es2015-duplicate-keys "^6.22.0" + babel-plugin-transform-es2015-for-of "^6.23.0" + babel-plugin-transform-es2015-function-name "^6.22.0" + babel-plugin-transform-es2015-literals "^6.22.0" + babel-plugin-transform-es2015-modules-amd "^6.22.0" + babel-plugin-transform-es2015-modules-commonjs "^6.23.0" + babel-plugin-transform-es2015-modules-systemjs "^6.23.0" + babel-plugin-transform-es2015-modules-umd "^6.23.0" + babel-plugin-transform-es2015-object-super "^6.22.0" + babel-plugin-transform-es2015-parameters "^6.23.0" + babel-plugin-transform-es2015-shorthand-properties "^6.22.0" + babel-plugin-transform-es2015-spread "^6.22.0" + babel-plugin-transform-es2015-sticky-regex "^6.22.0" + babel-plugin-transform-es2015-template-literals "^6.22.0" + babel-plugin-transform-es2015-typeof-symbol "^6.23.0" + babel-plugin-transform-es2015-unicode-regex "^6.22.0" + babel-plugin-transform-exponentiation-operator "^6.22.0" + babel-plugin-transform-regenerator "^6.22.0" + browserslist "^3.2.6" + invariant "^2.2.2" + semver "^5.3.0" + babel-preset-es2015@^6.0.0: version "6.24.1" resolved "https://registry.yarnpkg.com/babel-preset-es2015/-/babel-preset-es2015-6.24.1.tgz#d44050d6bc2c9feea702aaf38d727a0210538939" @@ -996,6 +1054,13 @@ browserslist@^1.3.6, browserslist@^1.5.2, browserslist@^1.7.6: caniuse-db "^1.0.30000639" electron-to-chromium "^1.2.7" +browserslist@^3.2.6: + version "3.2.8" + resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-3.2.8.tgz#b0005361d6471f0f5952797a76fc985f1f978fc6" + dependencies: + caniuse-lite "^1.0.30000844" + electron-to-chromium "^1.3.47" + buffer@^4.9.0: version "4.9.1" resolved "https://registry.yarnpkg.com/buffer/-/buffer-4.9.1.tgz#6d1bb601b07a4efced97094132093027c95bc298" @@ -1069,6 +1134,10 @@ caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639: version "1.0.30000801" resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000801.tgz#a1d49def94c4e5aca5ccf1d58812e4668fac19d4" +caniuse-lite@^1.0.30000844: + version "1.0.30000878" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000878.tgz#c644c39588dd42d3498e952234c372e5a40a4123" + caseless@~0.12.0: version "0.12.0" resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc" @@ -1789,6 +1858,10 @@ electron-to-chromium@^1.2.7: version "1.3.32" resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.32.tgz#11d0684c0840e003c4be8928f8ac5f35dbc2b4e6" +electron-to-chromium@^1.3.47: + version "1.3.61" + resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.61.tgz#a8ac295b28d0f03d85e37326fd16b6b6b17a1795" + emojis-list@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389" From eacbd9b5009a3646854b59e9983753fd288ea1c4 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 27 Aug 2018 22:22:25 +0300 Subject: [PATCH 02/29] 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; - } -} From fd604dfd2a8110ea62028d399917937b4535ea51 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 27 Aug 2018 22:40:30 +0300 Subject: [PATCH 03/29] fixed still-image not preserving original aspect ratio and resolution. --- src/components/still-image/still-image.js | 6 +++++- src/components/still-image/still-image.vue | 1 + 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/still-image/still-image.js b/src/components/still-image/still-image.js index 0839aca5..5ad06dc2 100644 --- a/src/components/still-image/still-image.js +++ b/src/components/still-image/still-image.js @@ -18,7 +18,11 @@ const StillImage = { onLoad () { const canvas = this.$refs.canvas if (!canvas) return - canvas.getContext('2d').drawImage(this.$refs.src, 1, 1, canvas.width, canvas.height) + const width = this.$refs.src.naturalWidth + const height = this.$refs.src.naturalHeight + canvas.width = width + canvas.height = height + canvas.getContext('2d').drawImage(this.$refs.src, 0, 0, width, height) } } } diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue index a37c678d..e23f8bc1 100644 --- a/src/components/still-image/still-image.vue +++ b/src/components/still-image/still-image.vue @@ -60,6 +60,7 @@ right: 0; width: 100%; height: 100%; + object-fit: contain; } } From 226849b26ec0d6cbb752a1e4ae52577ccb00bd84 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 27 Aug 2018 23:15:58 +0300 Subject: [PATCH 04/29] Added logic to process reply to favorite request and update likes counter accordingly. Should fix some of cases of doubled likes and likes counter not decrementing. --- src/modules/statuses.js | 28 +++++++++++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) diff --git a/src/modules/statuses.js b/src/modules/statuses.js index ff2cb098..0dd88266 100644 --- a/src/modules/statuses.js +++ b/src/modules/statuses.js @@ -225,7 +225,8 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us }, 'favorite': (favorite) => { // Only update if this is a new favorite. - if (!state.favorites.has(favorite.id)) { + // Ignore our own favorites because we get info about likes as response to like request + if (!state.favorites.has(favorite.id) && user.id !== favorite.user.id) { state.favorites.add(favorite.id) favoriteStatus(favorite) } @@ -347,6 +348,11 @@ export const mutations = { const newStatus = state.allStatusesObject[status.id] newStatus.favorited = value }, + setFavoritedConfirm (state, { status }) { + const newStatus = state.allStatusesObject[status.id] + newStatus.favorited = status.favorited + newStatus.fave_num = status.fave_num + }, setRetweeted (state, { status, value }) { const newStatus = state.allStatusesObject[status.id] newStatus.repeated = value @@ -424,11 +430,31 @@ const statuses = { // Optimistic favoriting... commit('setFavorited', { status, value: true }) apiService.favorite({ id: status.id, credentials: rootState.users.currentUser.credentials }) + .then(response => { + if (response.ok) { + return response.json() + } else { + return {} + } + }) + .then(status => { + commit('setFavoritedConfirm', { status }) + }) }, unfavorite ({ rootState, commit }, status) { // Optimistic favoriting... commit('setFavorited', { status, value: false }) apiService.unfavorite({ id: status.id, credentials: rootState.users.currentUser.credentials }) + .then(response => { + if (response.ok) { + return response.json() + } else { + return {} + } + }) + .then(status => { + commit('setFavoritedConfirm', { status }) + }) }, retweet ({ rootState, commit }, status) { // Optimistic retweeting... From 68d15f665e178ca37181b66beae5d833db08df52 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 28 Aug 2018 13:42:44 +0300 Subject: [PATCH 05/29] Show lock icon instead of hiding repeat button, tusky-style. Added hint explaining what's going on. Fixes favorite button jumping left and right depending on post visibility --- src/components/retweet_button/retweet_button.vue | 11 ++++++++--- src/i18n/messages.js | 6 ++++-- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue index f5b00599..ee5722bd 100644 --- a/src/components/retweet_button/retweet_button.vue +++ b/src/components/retweet_button/retweet_button.vue @@ -1,7 +1,12 @@ From b48a3210a3056385484e60551dd601177839b6cd Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 28 Aug 2018 14:28:05 +0300 Subject: [PATCH 07/29] tabs for settings --- src/components/settings/settings.js | 2 + src/components/settings/settings.vue | 169 ++++++++++++++------------- src/i18n/messages.js | 2 + 3 files changed, 95 insertions(+), 78 deletions(-) diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js index f8eaad00..333633c9 100644 --- a/src/components/settings/settings.js +++ b/src/components/settings/settings.js @@ -1,4 +1,5 @@ /* eslint-env browser */ +import TabSwitcher from '../tab_switcher/tab_switcher.jsx' import StyleSwitcher from '../style_switcher/style_switcher.vue' import InterfaceLanguageSwitcher from '../interface_language_switcher/interface_language_switcher.vue' import { filter, trim } from 'lodash' @@ -29,6 +30,7 @@ const settings = { } }, components: { + TabSwitcher, StyleSwitcher, InterfaceLanguageSwitcher }, diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue index f500a1b0..923c6970 100644 --- a/src/components/settings/settings.vue +++ b/src/components/settings/settings.vue @@ -4,90 +4,99 @@ {{$t('settings.settings')}}
-
-

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

- -
-
-

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

-

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

- -
-
-

{{$t('nav.timeline')}}

-
    -
  • - - -
    • -
  • - - -
      + +
      +
      +

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

      + +
      +
      +

      {{$t('nav.timeline')}}

      +
      • - - + + +
        • +
      • + + +
          +
        • + + +
          • +
        +
        • +
      • + + +
        • +
      • + + +
        • +
      • +
      - -
    • - - -
      • -
    • - - -
      • -
    • - -
      • -
    -
-
-

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

-
    -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
      +
+
+

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

+
  • - - -
    - ! {{$t('settings.limited_availability')}} -
    + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
      +
    • + + +
      + ! {{$t('settings.limited_availability')}} +
      +
      • +
- - -
-
-

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

- -
+
+
+ +
+
+ +
+
+ +
+
+

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

+ +
+
+ +
@@ -103,6 +112,10 @@ margin: 1em 1em 1.4em; padding-bottom: 1.4em; + &:last-child { + border-bottom: none; + } + textarea { width: 100%; diff --git a/src/i18n/messages.js b/src/i18n/messages.js index c9a4961c..cd8fa512 100644 --- a/src/i18n/messages.js +++ b/src/i18n/messages.js @@ -277,6 +277,7 @@ const en = { no_retweet_hint: 'Post is marked as followers-only or direct and cannot be repeated' }, settings: { + general: 'General', user_settings: 'User Settings', name_bio: 'Name & Bio', name: 'Name', @@ -1625,6 +1626,7 @@ const ru = { no_retweet_hint: 'Пост помечен как "только для подписчиков" или "личное" и поэтому не может быть повторён' }, settings: { + general: 'Общие', user_settings: 'Настройки пользователя', name_bio: 'Имя и описание', name: 'Имя', From cff4177bf3a7622fa41542c380c462a70359b258 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 28 Aug 2018 15:38:07 +0300 Subject: [PATCH 08/29] settings page update --- src/components/settings/settings.vue | 12 +- .../style_switcher/style_switcher.vue | 230 +++++++++++------- src/i18n/messages.js | 12 +- 3 files changed, 157 insertions(+), 97 deletions(-) diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue index 923c6970..240cd70a 100644 --- a/src/components/settings/settings.vue +++ b/src/components/settings/settings.vue @@ -114,6 +114,12 @@ &:last-child { border-bottom: none; + padding-bottom: 0; + margin-bottom: 1em; + } + + select { + min-width: 10em; } @@ -143,8 +149,12 @@ } .btn { - margin-top: 1em; min-height: 28px; + } + + .submit { + margin-top: 1em; + min-height: 30px; width: 10em; } } diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index 59bd2971..72a338bd 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -1,102 +1,30 @@ @@ -144,15 +159,19 @@ color: var(--cRed, $fallback--cRed); } +.apply-container, .radius-container, -.color-container { +.color-container, +.presets-container { display: flex; p { + flex: 2 0 100%; margin-top: 2em; margin-bottom: .5em; } } + .radius-container { flex-direction: column; } @@ -162,6 +181,36 @@ justify-content: space-between; } +.presets-container { + justify-content: center; + .import-export { + display: flex; + + .btn { + margin-left: .5em; + } + } +} + +.preview-container { + border-top: 1px dashed; + border-bottom: 1px dashed; + border-color: $fallback--border; + border-color: var(--border, $fallback--border); + margin: 1em -1em 0; + padding: 1em; + + .btn { + margin-top: 1em; + min-height: 30px; + width: 10em; + } +} + +.apply-container { + justify-content: center; +} + .radius-item, .color-item { min-width: 20em; @@ -229,6 +278,7 @@ flex: 0; min-width: 2em; cursor: pointer; + max-height: 29px; } .theme-preview-content { diff --git a/src/i18n/messages.js b/src/i18n/messages.js index cd8fa512..cccf48cc 100644 --- a/src/i18n/messages.js +++ b/src/i18n/messages.js @@ -48,8 +48,8 @@ const de = { settings: 'Einstellungen', theme: 'Farbschema', presets: 'Voreinstellungen', - export_theme: 'Aktuelles Theme exportieren', - import_theme: 'Gespeichertes Theme laden', + export_theme: 'Farbschema speichern', + import_theme: 'Farbschema laden', invalid_theme_imported: 'Die ausgewählte Datei ist kein unterstütztes Pleroma-Theme. Keine Änderungen wurden vorgenommen.', theme_help: 'Benutze HTML Farbcodes (#rrggbb) um dein Farbschema anzupassen', radii_help: 'Kantenrundung (in Pixel) der Oberfläche anpassen', @@ -293,8 +293,8 @@ const en = { settings: 'Settings', theme: 'Theme', presets: 'Presets', - export_theme: 'Export current theme', - import_theme: 'Load saved theme', + export_theme: 'Save preset', + import_theme: 'Load preset', theme_help: 'Use hex color codes (#rrggbb) to customize your color theme.', invalid_theme_imported: 'The selected file is not a supported Pleroma theme. No changes to your theme were made.', radii_help: 'Set up interface edge rounding (in pixels)', @@ -1641,8 +1641,8 @@ const ru = { set_new_profile_background: 'Загрузить новый фон профиля', settings: 'Настройки', theme: 'Тема', - export_theme: 'Экспортировать текущую тему', - import_theme: 'Загрузить сохранённую тему', + export_theme: 'Сохранить Тему', + import_theme: 'Загрузить Тему', presets: 'Пресеты', theme_help: 'Используйте шестнадцатеричные коды цветов (#rrggbb) для настройки темы.', radii_help: 'Округление краёв элементов интерфейса (в пикселях)', From c3b27ab4c2d6ca03d8bea171735521b770172104 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 28 Aug 2018 15:47:42 +0300 Subject: [PATCH 09/29] moved replies filtering to "filter" category in settings, made it more consistent --- src/components/settings/settings.vue | 21 +++++++++++---------- src/i18n/messages.js | 5 +++++ 2 files changed, 16 insertions(+), 10 deletions(-) diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue index 240cd70a..2f70c209 100644 --- a/src/components/settings/settings.vue +++ b/src/components/settings/settings.vue @@ -35,16 +35,6 @@ -
  • - -
    • @@ -90,6 +80,17 @@
    +
    + {{$t('settings.replies_in_timeline')}} + +

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

    diff --git a/src/i18n/messages.js b/src/i18n/messages.js index cccf48cc..ebc96e81 100644 --- a/src/i18n/messages.js +++ b/src/i18n/messages.js @@ -327,6 +327,7 @@ const en = { loop_video: 'Loop videos', loop_video_silent_only: 'Loop only videos without sound (i.e. Mastodon\'s "gifs")', reply_link_preview: 'Enable reply-link preview on mouse hover', + replies_in_timeline: 'Replies in timeline', reply_visibility_all: 'Show all replies', reply_visibility_following: 'Only show replies directed at me or users I\'m following', reply_visibility_self: 'Only show replies directed at me', @@ -1674,6 +1675,10 @@ const ru = { loop_video: 'Зациливать видео', loop_video_silent_only: 'Зацикливать только беззвучные видео (т.е. "гифки" с Mastodon)', reply_link_preview: 'Включить предварительный просмотр ответа при наведении мыши', + replies_in_timeline: 'Ответы в ленте', + reply_visibility_all: 'Показывать все ответы', + reply_visibility_following: 'Показывать только ответы мне и тех на кого я подписан', + reply_visibility_self: 'Показывать только ответы мне', follow_import: 'Импортировать читаемых', import_followers_from_a_csv_file: 'Импортировать читаемых из файла .csv', follows_imported: 'Список читаемых импортирован. Обработка займёт некоторое время..', From 330288b4cd874bb960735edb1acde01b0bfbf684 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 28 Aug 2018 16:14:32 +0300 Subject: [PATCH 10/29] panel styling cleanup --- src/App.scss | 15 ++++-- .../notifications/notifications.scss | 46 +++---------------- .../notifications/notifications.vue | 6 ++- src/components/timeline/timeline.vue | 29 ------------ 4 files changed, 23 insertions(+), 73 deletions(-) diff --git a/src/App.scss b/src/App.scss index 3b8b3224..b4692f26 100644 --- a/src/App.scss +++ b/src/App.scss @@ -48,7 +48,7 @@ a { color: var(--link, $fallback--link); } -button{ +button { user-select: none; color: $fallback--fg; color: var(--fg, $fallback--fg); @@ -282,15 +282,25 @@ main-router { } .panel-heading { + display: flex; border-radius: $fallback--panelRadius $fallback--panelRadius 0 0; border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0; background-size: cover; - padding: 0.6em 1.0em; + padding: .6em .6em; text-align: left; font-size: 1.3em; line-height: 24px; background-color: $fallback--btn; background-color: var(--btn, $fallback--btn); + align-items: baseline; + + .title { + flex: 1 0 auto; + } + + button { + height: 100%; + } } .panel-heading.stub { @@ -460,4 +470,3 @@ nav { border-radius: $fallback--inputRadius; border-radius: var(--inputRadius, $fallback--inputRadius); } - diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index 5b09685b..0213d5b8 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -4,58 +4,25 @@ // a bit of a hack to allow scrolling below notifications padding-bottom: 15em; - .title { - display: inline-block; - } - - .panel { - background: $fallback--bg; - background: var(--bg, $fallback--bg) - } - - .panel-body { - border-color: $fallback--border; - border-color: var(--border, $fallback--border) - } - - .panel-heading { - // force the text to stay centered, while keeping - // the button in the right side of the panel heading - position: relative; - background: $fallback--btn; - background: var(--btn, $fallback--btn); - color: $fallback--fg; - color: var(--fg, $fallback--fg); - display: flex; - align-items: baseline; - .read-button { - position: absolute; - right: 0.7em; - height: 1.8em; - line-height: 100%; - } - } - .unseen-count { display: inline-block; background-color: $fallback--cRed; background-color: var(--cRed, $fallback--cRed); text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5); - min-width: 1.3em; - border-radius: 1.3em; - margin: 0 0.2em 0 -0.4em; + border-radius: 99px; + min-width: 1.5em; + max-width: 1.5em; + min-height: 1.5em; + max-height: 1.5em; color: white; font-size: 0.9em; text-align: center; - line-height: 1.3em; } .loadmore-error { position: absolute; right: 0.6em; - font-size: 14px; min-width: 6em; - font-family: sans-serif; text-align: center; padding: 0 0.25em 0 0.25em; margin: 0; @@ -73,7 +40,8 @@ box-sizing: border-box; display: flex; border-bottom: 1px solid; - border-bottom-color: inherit; + border-color: $fallback--border; + border-color: var(--border, $fallback--border); .broken-favorite { border-radius: $fallback--tooltipRadius; diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue index a0b0e5f5..7a4322f9 100644 --- a/src/components/notifications/notifications.vue +++ b/src/components/notifications/notifications.vue @@ -2,8 +2,10 @@
    - {{unseenCount}} -
    {{$t('notifications.notifications')}}
    +
    + {{$t('notifications.notifications')}} + {{unseenCount}} +
    {{$t('timeline.error_fetching')}}
    diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index c4e0fbce..ed354030 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -57,36 +57,8 @@ @import '../../_variables.scss'; .timeline { - .timeline-heading { - position: relative; - display: flex; - } - - .title { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 70%; - } - - .loadmore-button { - position: absolute; - right: 0.6em; - font-size: 14px; - - min-width: 6em; - height: 1.8em; - line-height: 100%; - } - .loadmore-text { - position: absolute; - right: 0.6em; font-size: 14px; - min-width: 6em; - font-family: sans-serif; - text-align: center; - padding: 0 0.5em 0 0.5em; opacity: 0.8; background-color: transparent; color: $fallback--faint; @@ -98,7 +70,6 @@ right: 0.6em; font-size: 14px; min-width: 6em; - font-family: sans-serif; text-align: center; padding: 0 0.25em 0 0.25em; margin: 0; From da362b2b88b9d21a5cca654feafde5bea612a31a Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 28 Aug 2018 16:20:04 +0300 Subject: [PATCH 11/29] minor style tweaks --- src/App.scss | 9 +++++++++ src/components/tab_switcher/tab_switcher.scss | 4 ---- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/App.scss b/src/App.scss index b4692f26..d0c4b26c 100644 --- a/src/App.scss +++ b/src/App.scss @@ -64,10 +64,19 @@ button { font-size: 14px; font-family: sans-serif; + &::-moz-focus-inner { + border: none; + } + &:hover { box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.3); } + &:active { + border-bottom: 1px solid rgba(255, 255, 255, 0.2); + border-top: 1px solid rgba(0, 0, 0, 0.2); + } + &:disabled { cursor: not-allowed; opacity: 0.5; diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss index f83dc7c2..374a19c5 100644 --- a/src/components/tab_switcher/tab_switcher.scss +++ b/src/components/tab_switcher/tab_switcher.scss @@ -26,10 +26,6 @@ border-bottom-right-radius: 0; padding: .3em 1em; - &::-moz-focus-inner { - border: none; - } - &:not(.active) { border-bottom: 1px solid; border-bottom-color: $fallback--btn; From 66a22762c21f652342ca2421f732650c261abc02 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 28 Aug 2018 16:22:49 +0300 Subject: [PATCH 12/29] fixup! Separated tab-switcher into a reusable component. This depends on JSX addition --- src/components/settings/settings.vue | 6 +++--- src/components/tab_switcher/tab_switcher.jsx | 2 +- src/components/user_settings/user_settings.vue | 6 +++--- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue index 2f70c209..c92602b7 100644 --- a/src/components/settings/settings.vue +++ b/src/components/settings/settings.vue @@ -5,7 +5,7 @@
    -
    +

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

    @@ -73,13 +73,13 @@
    -
    +
    -
    +
    {{$t('settings.replies_in_timeline')}}