diff --git a/.eslintrc.js b/.eslintrc.js index 7d090208..3c48baa8 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -21,26 +21,6 @@ module.exports = { 'generator-star-spacing': 0, // allow debugger during development 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, - // Webpack 4 update commit, most of these probably should be fixed and removed in a separate MR - // A lot of errors come from .vue files that are now properly linted - 'vue/valid-v-if': 1, - 'vue/use-v-on-exact': 1, - 'vue/no-parsing-error': 1, - 'vue/require-v-for-key': 1, - 'vue/valid-v-for': 1, - 'vue/require-prop-types': 1, - 'vue/no-use-v-if-with-v-for': 1, - 'indent': 1, - 'import/first': 1, - 'object-curly-spacing': 1, - 'prefer-promise-reject-errors': 1, - 'eol-last': 1, - 'no-return-await': 1, - 'no-multi-spaces': 1, - 'no-trailing-spaces': 1, - 'no-unused-expressions': 1, - 'no-mixed-operators': 1, - 'camelcase': 1, - 'no-multiple-empty-lines': 1 + 'vue/require-prop-types': 0 } } diff --git a/BREAKING_CHANGES.md b/BREAKING_CHANGES.md index 924c38da..bc0f7b9d 100644 --- a/BREAKING_CHANGES.md +++ b/BREAKING_CHANGES.md @@ -1,5 +1,8 @@ # v1.0 ## Removed features/radically changed behavior +### formattingOptionsEnabled +as of !833 `formattingOptionsEnabled` is no longer available and instead FE check for available post formatting options and enables formatting control if there's more than one option. + ### minimalScopesMode As of !633, `scopeOptions` is no longer available and instead is changed for `minimalScopesMode` (default: `false`) diff --git a/build/dev-server.js b/build/dev-server.js index 9c3d4e00..48574214 100644 --- a/build/dev-server.js +++ b/build/dev-server.js @@ -31,8 +31,13 @@ var hotMiddleware = require('webpack-hot-middleware')(compiler) // force page reload when html-webpack-plugin template changes compiler.plugin('compilation', function (compilation) { compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { - hotMiddleware.publish({ action: 'reload' }) - cb() + // FIXME: This supposed to reload whole page when index.html is changed, + // however now it reloads entire page on every breath, i suppose the order + // of plugins changed or something. It's a minor thing and douesn't hurt + // disabling it, constant reloads hurt much more + + // hotMiddleware.publish({ action: 'reload' }) + // cb() }) }) diff --git a/build/utils.js b/build/utils.js index b45ffc16..c094c3c8 100644 --- a/build/utils.js +++ b/build/utils.js @@ -27,16 +27,17 @@ exports.cssLoaders = function (options) { return [ { test: /\.(post)?css$/, - use: generateLoaders(['css-loader']), + use: generateLoaders(['css-loader', 'postcss-loader']), }, { test: /\.less$/, - use: generateLoaders(['css-loader', 'less-loader']), + use: generateLoaders(['css-loader', 'postcss-loader', 'less-loader']), }, { test: /\.sass$/, use: generateLoaders([ 'css-loader', + 'postcss-loader', { loader: 'sass-loader', options: { @@ -47,11 +48,11 @@ exports.cssLoaders = function (options) { }, { test: /\.scss$/, - use: generateLoaders(['css-loader', 'sass-loader']) + use: generateLoaders(['css-loader', 'postcss-loader', 'sass-loader']) }, { test: /\.styl(us)?$/, - use: generateLoaders(['css-loader', 'stylus-loader']), + use: generateLoaders(['css-loader', 'postcss-loader', 'stylus-loader']), }, ] } diff --git a/config/index.js b/config/index.js index 56fa5940..ccec4196 100644 --- a/config/index.js +++ b/config/index.js @@ -48,6 +48,11 @@ module.exports = { changeOrigin: true, cookieDomainRewrite: 'localhost', ws: true + }, + '/oauth/revoke': { + target, + changeOrigin: true, + cookieDomainRewrite: 'localhost' } }, // CSS Sourcemaps off by default because relative paths are "buggy" diff --git a/index.html b/index.html index 63161f3c..a8681c8b 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,8 @@ - + +
diff --git a/package.json b/package.json index 0e7572fa..0f6ae9c8 100644 --- a/package.json +++ b/package.json @@ -25,17 +25,15 @@ "localforage": "^1.5.0", "object-path": "^0.11.3", "phoenix": "^1.3.0", - "popper.js": "^1.14.7", "portal-vue": "^2.1.4", "sanitize-html": "^1.13.0", "v-click-outside": "^2.1.1", + "v-tooltip": "^2.0.2", "vue": "^2.5.13", "vue-chat-scroll": "^1.2.1", "vue-i18n": "^7.3.2", - "vue-popperjs": "^2.0.3", "vue-router": "^3.0.1", "vue-template-compiler": "^2.3.4", - "vue-timeago": "^3.1.2", "vuelidate": "^0.7.4", "vuex": "^3.0.1", "whatwg-fetch": "^2.0.3" @@ -82,8 +80,8 @@ "json-loader": "^0.5.4", "karma": "^3.0.0", "karma-coverage": "^1.1.1", - "karma-mocha": "^1.2.0", "karma-firefox-launcher": "^1.1.0", + "karma-mocha": "^1.2.0", "karma-sinon-chai": "^2.0.2", "karma-sourcemap-loader": "^0.3.7", "karma-spec-reporter": "0.0.26", @@ -95,6 +93,7 @@ "nightwatch": "^0.9.8", "opn": "^4.0.2", "ora": "^0.3.0", + "postcss-loader": "^3.0.0", "raw-loader": "^0.5.1", "sass": "^1.17.3", "sass-loader": "git://github.com/webpack-contrib/sass-loader", diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 00000000..88752c6c --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,5 @@ +module.exports = { + plugins: [ + require('autoprefixer') + ] +} diff --git a/src/App.js b/src/App.js index e72c73e3..e9cd5917 100644 --- a/src/App.js +++ b/src/App.js @@ -1,7 +1,7 @@ import UserPanel from './components/user_panel/user_panel.vue' import NavPanel from './components/nav_panel/nav_panel.vue' import Notifications from './components/notifications/notifications.vue' -import UserFinder from './components/user_finder/user_finder.vue' +import SearchBar from './components/search_bar/search_bar.vue' import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue' import FeaturesPanel from './components/features_panel/features_panel.vue' import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue' @@ -19,7 +19,7 @@ export default { UserPanel, NavPanel, Notifications, - UserFinder, + SearchBar, InstanceSpecificPanel, FeaturesPanel, WhoToFollowPanel, @@ -32,7 +32,7 @@ export default { }, data: () => ({ mobileActivePanel: 'timeline', - finderHidden: true, + searchBarHidden: true, supportsMask: window.CSS && window.CSS.supports && ( window.CSS.supports('mask-size', 'contain') || window.CSS.supports('-webkit-mask-size', 'contain') || @@ -70,7 +70,7 @@ export default { logoBgStyle () { return Object.assign({ 'margin': `${this.$store.state.instance.logoMargin} 0`, - opacity: this.finderHidden ? 1 : 0 + opacity: this.searchBarHidden ? 1 : 0 }, this.enableMask ? {} : { 'background-color': this.enableMask ? '' : 'transparent' }) @@ -89,7 +89,11 @@ export default { sitename () { return this.$store.state.instance.name }, chat () { return this.$store.state.chat.channel.state === 'joined' }, suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled }, - showInstanceSpecificPanel () { return this.$store.state.instance.showInstanceSpecificPanel }, + showInstanceSpecificPanel () { + return this.$store.state.instance.showInstanceSpecificPanel && + !this.$store.state.config.hideISP && + this.$store.state.instance.instanceSpecificPanelContent + }, showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel }, isMobileLayout () { return this.$store.state.interface.mobileLayout } }, @@ -101,8 +105,8 @@ export default { this.$router.replace('/main/public') this.$store.dispatch('logout') }, - onFinderToggled (hidden) { - this.finderHidden = hidden + onSearchBarToggled (hidden) { + this.searchBarHidden = hidden }, updateMobileState () { const mobileLayout = windowWidth() <= 800 diff --git a/src/App.scss b/src/App.scss index 52a786ad..fac800bc 100644 --- a/src/App.scss +++ b/src/App.scss @@ -47,6 +47,8 @@ body { color: var(--text, $fallback--text); max-width: 100vw; overflow-x: hidden; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } a { @@ -129,6 +131,7 @@ input, textarea, .select { font-family: sans-serif; font-family: var(--inputFont, sans-serif); font-size: 14px; + margin: 0; padding: 8px .5em; box-sizing: border-box; display: inline-block; @@ -182,7 +185,44 @@ input, textarea, .select { flex: 1; } - &[type=radio], + &[type=radio] { + display: none; + &:checked + label::before { + box-shadow: 0px 0px 2px black inset, 0px 0px 0px 4px $fallback--fg inset; + box-shadow: var(--inputShadow), 0px 0px 0px 4px var(--fg, $fallback--fg) inset; + background-color: var(--link, $fallback--link); + } + &:disabled { + &, + & + label, + & + label::before { + opacity: .5; + } + } + + label::before { + flex-shrink: 0; + display: inline-block; + content: ''; + transition: box-shadow 200ms; + width: 1.1em; + height: 1.1em; + border-radius: 100%; // Radio buttons should always be circle + box-shadow: 0px 0px 2px black inset; + box-shadow: var(--inputShadow); + margin-right: .5em; + background-color: $fallback--fg; + background-color: var(--input, $fallback--fg); + vertical-align: top; + text-align: center; + line-height: 1.1em; + font-size: 1.1em; + box-sizing: border-box; + color: transparent; + overflow: hidden; + box-sizing: border-box; + } + } + &[type=checkbox] { display: none; &:checked + label::before { @@ -197,6 +237,7 @@ input, textarea, .select { } } + label::before { + flex-shrink: 0; display: inline-block; content: '✔'; transition: color 200ms; @@ -228,11 +269,45 @@ option { background-color: var(--bg, $fallback--bg); } +.hide-number-spinner { + -moz-appearance: textfield; + &[type=number]::-webkit-inner-spin-button, + &[type=number]::-webkit-outer-spin-button { + opacity: 0; + display: none; + } +} + i[class*=icon-] { color: $fallback--icon; color: var(--icon, $fallback--icon) } +.btn-block { + display: block; + width: 100%; +} + +.btn-group { + position: relative; + display: inline-flex; + vertical-align: middle; + + button { + position: relative; + flex: 1 1 auto; + + &:not(:last-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + &:not(:first-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + } +} .container { display: flex; @@ -474,23 +549,6 @@ nav { color: var(--faint, $fallback--faint); box-shadow: 0px 0px 4px rgba(0,0,0,.6); box-shadow: var(--topBarShadow); - - .back-button { - display: block; - max-width: 99px; - transition-property: opacity, max-width; - transition-duration: 300ms; - transition-timing-function: ease-out; - - i { - margin: 0 1em; - } - - &.hidden { - opacity: 0; - max-width: 5px; - } - } } .fade-enter-active, .fade-leave-active { @@ -526,12 +584,6 @@ nav { overflow-y: scroll; } - nav { - .back-button { - display: none; - } - } - .sidebar-bounds { overflow: hidden; max-height: 100vh; @@ -806,54 +858,3 @@ nav { .btn.btn-default { min-height: 28px; } - -.autocomplete { - &-panel { - position: relative; - - &-body { - margin: 0 0.5em 0 0.5em; - border-radius: $fallback--tooltipRadius; - border-radius: var(--tooltipRadius, $fallback--tooltipRadius); - position: absolute; - z-index: 1; - box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); - // this doesn't match original but i don't care, making it uniform. - box-shadow: var(--popupShadow); - min-width: 75%; - background: $fallback--bg; - background: var(--bg, $fallback--bg); - color: $fallback--lightText; - color: var(--lightText, $fallback--lightText); - } - } - - &-item { - cursor: pointer; - padding: 0.2em 0.4em 0.2em 0.4em; - border-bottom: 1px solid rgba(0, 0, 0, 0.4); - display: flex; - - img { - width: 24px; - height: 24px; - object-fit: contain; - } - - span { - line-height: 24px; - margin: 0 0.1em 0 0.2em; - } - - small { - margin-left: .5em; - color: $fallback--faint; - color: var(--faint, $fallback--faint); - } - - &.highlighted { - background-color: $fallback--fg; - background-color: var(--lightBg, $fallback--fg); - } - } -} diff --git a/src/App.vue b/src/App.vue index 769e075d..719e00a4 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,53 +1,113 @@