From 1d3b1ac934e5dacb05d227ddc1ab0cbd8e16e169 Mon Sep 17 00:00:00 2001 From: shpuld Date: Sat, 2 Mar 2019 16:57:32 +0200 Subject: [PATCH 01/34] start working on one tap notifications --- src/App.js | 4 ++++ src/App.scss | 24 +++++++++++++++++++++++- src/App.vue | 8 +++++++- static/font/config.json | 12 ++++++++++++ static/font/css/fontello-codes.css | 2 ++ static/font/css/fontello-embedded.css | 14 ++++++++------ static/font/css/fontello-ie7-codes.css | 2 ++ static/font/css/fontello-ie7.css | 2 ++ static/font/css/fontello.css | 16 +++++++++------- static/font/demo.html | 20 +++++++++++--------- static/font/font/fontello.eot | Bin 17472 -> 18108 bytes static/font/font/fontello.svg | 4 ++++ static/font/font/fontello.ttf | Bin 17304 -> 17940 bytes static/font/font/fontello.woff | Bin 10572 -> 10868 bytes static/font/font/fontello.woff2 | Bin 8932 -> 9212 bytes 15 files changed, 84 insertions(+), 24 deletions(-) diff --git a/src/App.js b/src/App.js index 214e0f48..5e5b6eea 100644 --- a/src/App.js +++ b/src/App.js @@ -26,6 +26,7 @@ export default { }, data: () => ({ mobileActivePanel: 'timeline', + notificationsOpen: false, finderHidden: true, supportsMask: window.CSS && window.CSS.supports && ( window.CSS.supports('mask-size', 'contain') || @@ -101,6 +102,9 @@ export default { }, toggleMobileSidebar () { this.$refs.sideDrawer.toggleDrawer() + }, + toggleMobileNotifications () { + this.notificationsOpen = !this.notificationsOpen } } } diff --git a/src/App.scss b/src/App.scss index 7c6970c1..3edc41a0 100644 --- a/src/App.scss +++ b/src/App.scss @@ -661,6 +661,28 @@ nav { border-radius: var(--inputRadius, $fallback--inputRadius); } +.mobile-notifications { + position: fixed; + width: 100vw; + height: 100vh; + top: 50px; + left: 0; + z-index: 1001; + overflow-x: hidden; + overflow-y: scroll; + transition-property: transform; + transition-duration: 0.35s; + transform: translate(0); + + .notifications { + padding: 0; + } + + &.closed { + transform: translate(100%); + } +} + @keyframes shakeError { 0% { transform: translateX(0); @@ -723,7 +745,7 @@ nav { .login-hint { text-align: center; - + @media all and (min-width: 801px) { display: none; } diff --git a/src/App.vue b/src/App.vue index acbbeb75..aad84804 100644 --- a/src/App.vue +++ b/src/App.vue @@ -10,7 +10,6 @@
-
{{sitename}}
@@ -18,11 +17,18 @@ + + +
+
+
+ +
diff --git a/src/components/scope_selector/scope_selector.js b/src/components/scope_selector/scope_selector.js new file mode 100644 index 00000000..578f1ba5 --- /dev/null +++ b/src/components/scope_selector/scope_selector.js @@ -0,0 +1,55 @@ +const ScopeSelector = { + props: [ + 'showAll', + 'userEnabled', + 'userDefault', + 'originalScope', + 'initialScope', + 'onScopeChange' + ], + data () { + return { + currentScope: this.initialScope + } + }, + computed: { + showNothing () { + return !this.showPublic && !this.showUnlisted && !this.showPrivate && !this.showDirect + }, + showPublic () { + return this.originalScope !== 'direct' && this.shouldShow('public') + }, + showUnlisted () { + return this.originalScope !== 'direct' && this.shouldShow('unlisted') + }, + showPrivate () { + return this.originalScope !== 'direct' && this.shouldShow('private') + }, + showDirect () { + return this.shouldShow('direct') + }, + css () { + return { + public: {selected: this.currentScope === 'public'}, + unlisted: {selected: this.currentScope === 'unlisted'}, + private: {selected: this.currentScope === 'private'}, + direct: {selected: this.currentScope === 'direct'} + } + } + }, + methods: { + shouldShow (scope) { + return this.showAll || + this.currentScope === scope || + this.originalScope === scope || + this.userDefault === scope || + this.userEnabled.includes(scope) + }, + changeVis (scope) { + this.currentScope = scope + this.onScopeChange && this.onScopeChange(scope) + } + } +} + +export default ScopeSelector diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue new file mode 100644 index 00000000..33ea488f --- /dev/null +++ b/src/components/scope_selector/scope_selector.vue @@ -0,0 +1,30 @@ + + + diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js index 6e2dff7b..104be1a8 100644 --- a/src/components/settings/settings.js +++ b/src/components/settings/settings.js @@ -60,13 +60,18 @@ const settings = { alwaysShowSubjectInputLocal: typeof user.alwaysShowSubjectInput === 'undefined' ? instance.alwaysShowSubjectInput : user.alwaysShowSubjectInput, - alwaysShowSubjectInputDefault: instance.alwaysShowSubjectInput, + alwaysShowSubjectInputDefault: this.$t('settings.values.' + instance.alwaysShowSubjectInput), scopeCopyLocal: typeof user.scopeCopy === 'undefined' ? instance.scopeCopy : user.scopeCopy, scopeCopyDefault: this.$t('settings.values.' + instance.scopeCopy), + minimalScopesModeLocal: typeof user.minimalScopesMode === 'undefined' + ? instance.minimalScopesMode + : user.minimalScopesMode, + minimalScopesModeDefault: this.$t('settings.values.' + instance.minimalScopesMode), + stopGifs: user.stopGifs, webPushNotificationsLocal: user.webPushNotifications, loopVideoSilentOnlyLocal: user.loopVideosSilentOnly, @@ -175,6 +180,9 @@ const settings = { postContentTypeLocal (value) { this.$store.dispatch('setOption', { name: 'postContentType', value }) }, + minimalScopesModeLocal (value) { + this.$store.dispatch('setOption', { name: 'minimalScopesMode', value }) + }, stopGifs (value) { this.$store.dispatch('setOption', { name: 'stopGifs', value }) }, diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue index 5041b3a3..d9b72ee0 100644 --- a/src/components/settings/settings.vue +++ b/src/components/settings/settings.vue @@ -122,6 +122,12 @@
+
  • + + +
  • diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js index d6972737..1911ab23 100644 --- a/src/components/user_settings/user_settings.js +++ b/src/components/user_settings/user_settings.js @@ -4,6 +4,7 @@ import get from 'lodash/get' import TabSwitcher from '../tab_switcher/tab_switcher.js' import ImageCropper from '../image_cropper/image_cropper.vue' import StyleSwitcher from '../style_switcher/style_switcher.vue' +import ScopeSelector from '../scope_selector/scope_selector.vue' import fileSizeFormatService from '../../services/file_size_format/file_size_format.js' import BlockCard from '../block_card/block_card.vue' import MuteCard from '../mute_card/mute_card.vue' @@ -66,6 +67,7 @@ const UserSettings = { }, components: { StyleSwitcher, + ScopeSelector, TabSwitcher, ImageCropper, BlockList, @@ -78,8 +80,8 @@ const UserSettings = { pleromaBackend () { return this.$store.state.instance.pleromaBackend }, - scopeOptionsEnabled () { - return this.$store.state.instance.scopeOptionsEnabled + scopeOptionsMinimal () { + return this.$store.state.instance.scopeOptionsMinimal }, vis () { return { diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue index a1123638..7bd391ba 100644 --- a/src/components/user_settings/user_settings.vue +++ b/src/components/user_settings/user_settings.vue @@ -29,13 +29,13 @@

    -
    +
    - - - - +

    diff --git a/src/i18n/en.json b/src/i18n/en.json index c5a4a90d..fb8fcfcc 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -211,6 +211,7 @@ "saving_ok": "Settings saved", "security_tab": "Security", "scope_copy": "Copy scope when replying (DMs are always copied)", + "minimal_scopes_mode": "Minimize post scope selection options", "set_new_avatar": "Set new avatar", "set_new_profile_background": "Set new profile background", "set_new_profile_banner": "Set new profile banner", diff --git a/src/i18n/ru.json b/src/i18n/ru.json index 6799cc96..89aa43f4 100644 --- a/src/i18n/ru.json +++ b/src/i18n/ru.json @@ -111,6 +111,8 @@ "import_theme": "Загрузить Тему", "inputRadius": "Поля ввода", "checkboxRadius": "Чекбоксы", + "instance_default": "(по умолчанию: {value})", + "instance_default_simple": "(по умолчанию)", "interface": "Интерфейс", "interfaceLanguage": "Язык интерфейса", "limited_availability": "Не доступно в вашем браузере", @@ -149,7 +151,11 @@ "reply_visibility_all": "Показывать все ответы", "reply_visibility_following": "Показывать только ответы мне и тех на кого я подписан", "reply_visibility_self": "Показывать только ответы мне", + "saving_err": "Не удалось сохранить настройки", + "saving_ok": "Сохранено", "security_tab": "Безопасность", + "scope_copy": "Копировать видимость поста при ответе (всегда включено для Личных Сообщений)", + "minimal_scopes_mode": "Минимизировать набор опций видимости поста", "set_new_avatar": "Загрузить новый аватар", "set_new_profile_background": "Загрузить новый фон профиля", "set_new_profile_banner": "Загрузить новый баннер профиля", @@ -164,6 +170,10 @@ "theme_help_v2_2": "Под некоторыми полями ввода это идикаторы контрастности, наведите на них мышью чтобы узнать больше. Приспользовании прозрачности контраст расчитывается для наихудшего варианта.", "tooltipRadius": "Всплывающие подсказки/уведомления", "user_settings": "Настройки пользователя", + "values": { + "false": "нет", + "true": "да" + }, "style": { "switcher": { "keep_color": "Оставить цвета", diff --git a/src/modules/config.js b/src/modules/config.js index 1c30c203..6d8aad35 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -32,7 +32,8 @@ const defaultState = { scopeCopy: undefined, // instance default subjectLineBehavior: undefined, // instance default alwaysShowSubjectInput: undefined, // instance default - postContentType: undefined // instance default + postContentType: undefined, // instance default + minimalScopesMode: undefined // instance default } const config = { diff --git a/src/modules/instance.js b/src/modules/instance.js index c31d02b9..7b67890f 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -15,7 +15,6 @@ const defaultState = { redirectRootNoLogin: '/main/all', redirectRootLogin: '/main/friends', showInstanceSpecificPanel: false, - scopeOptionsEnabled: true, formattingOptionsEnabled: false, alwaysShowSubjectInput: true, collapseMessageWithSubject: false, @@ -31,6 +30,7 @@ const defaultState = { vapidPublicKey: undefined, noAttachmentLinks: false, showFeaturesPanel: true, + minimalScopesMode: false, // Nasty stuff pleromaBackend: true, diff --git a/static/config.json b/static/config.json index 533a5b08..b436daae 100644 --- a/static/config.json +++ b/static/config.json @@ -21,5 +21,6 @@ "webPushNotifications": false, "noAttachmentLinks": false, "nsfwCensorImage": "", - "showFeaturesPanel": true + "showFeaturesPanel": true, + "minimalScopesMode": false } From c7e180080afd0e255e439030df800f79d33ff5de Mon Sep 17 00:00:00 2001 From: shpuld Date: Sun, 3 Mar 2019 16:33:40 +0200 Subject: [PATCH 03/34] more work with notifications drawer --- src/App.js | 14 +++++++++++++- src/App.scss | 2 +- src/App.vue | 10 ++++++---- src/boot/after_store.js | 3 +++ src/modules/interface.js | 10 +++++++++- 5 files changed, 32 insertions(+), 7 deletions(-) diff --git a/src/App.js b/src/App.js index 5e5b6eea..b6234a08 100644 --- a/src/App.js +++ b/src/App.js @@ -39,6 +39,10 @@ export default { created () { // Load the locale from the storage this.$i18n.locale = this.$store.state.config.interfaceLanguage + window.addEventListener('resize', this.updateMobileState) + }, + destroyed () { + window.removeEventListener('resize', this.updateMobileState) }, computed: { currentUser () { return this.$store.state.users.currentUser }, @@ -87,7 +91,8 @@ export default { unseenNotificationsCount () { return this.unseenNotifications.length }, - showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel } + showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel }, + isMobileLayout () { return this.$store.state.interface.mobileLayout } }, methods: { scrollToTop () { @@ -105,6 +110,13 @@ export default { }, toggleMobileNotifications () { this.notificationsOpen = !this.notificationsOpen + }, + updateMobileState () { + const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth + const changed = width <= 800 !== this.isMobileLayout + if (changed) { + this.$store.dispatch('setMobileLayout', width <= 800) + } } } } diff --git a/src/App.scss b/src/App.scss index 3edc41a0..775bc1c8 100644 --- a/src/App.scss +++ b/src/App.scss @@ -667,7 +667,7 @@ nav { height: 100vh; top: 50px; left: 0; - z-index: 1001; + z-index: 9; overflow-x: hidden; overflow-y: scroll; transition-property: transform; diff --git a/src/App.vue b/src/App.vue index aad84804..d83d5dbe 100644 --- a/src/App.vue +++ b/src/App.vue @@ -25,11 +25,13 @@

    - -
    - +
    + +
    + +
    -