From 6184c88ac70b33e66a87222142344f693406bd87 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 3 Mar 2019 15:15:41 +0200 Subject: Initial work on deprecating scopeModesEnabled in favor of minimalScopeMode --- src/components/features_panel/features_panel.js | 2 +- .../post_status_form/post_status_form.js | 27 ++++++----- .../post_status_form/post_status_form.vue | 13 ++--- src/components/scope_selector/scope_selector.js | 55 ++++++++++++++++++++++ src/components/scope_selector/scope_selector.vue | 30 ++++++++++++ src/components/settings/settings.js | 10 +++- src/components/settings/settings.vue | 6 +++ src/components/user_settings/user_settings.js | 6 ++- src/components/user_settings/user_settings.vue | 10 ++-- 9 files changed, 132 insertions(+), 27 deletions(-) create mode 100644 src/components/scope_selector/scope_selector.js create mode 100644 src/components/scope_selector/scope_selector.vue (limited to 'src/components') diff --git a/src/components/features_panel/features_panel.js b/src/components/features_panel/features_panel.js index e0b7a118..0a7234cc 100644 --- a/src/components/features_panel/features_panel.js +++ b/src/components/features_panel/features_panel.js @@ -6,7 +6,7 @@ const FeaturesPanel = { gopher: function () { return this.$store.state.instance.gopherAvailable }, whoToFollow: function () { return this.$store.state.instance.suggestionsEnabled }, mediaProxy: function () { return this.$store.state.instance.mediaProxyAvailable }, - scopeOptions: function () { return this.$store.state.instance.scopeOptionsEnabled }, + scopeOptionsMinimal: function () { return this.$store.state.instance.scopeOptionsMinimal }, textlimit: function () { return this.$store.state.instance.textlimit } } } diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js index c28c51bf..b0882f70 100644 --- a/src/components/post_status_form/post_status_form.js +++ b/src/components/post_status_form/post_status_form.js @@ -1,5 +1,6 @@ import statusPoster from '../../services/status_poster/status_poster.service.js' import MediaUpload from '../media_upload/media_upload.vue' +import ScopeSelector from '../scope_selector/scope_selector.vue' import fileTypeService from '../../services/file_type/file_type.service.js' import Completion from '../../services/completion/completion.js' import { take, filter, reject, map, uniqBy } from 'lodash' @@ -28,7 +29,8 @@ const PostStatusForm = { 'subject' ], components: { - MediaUpload + MediaUpload, + ScopeSelector }, mounted () { this.resize(this.$refs.textarea) @@ -78,14 +80,6 @@ const PostStatusForm = { } }, computed: { - vis () { - return { - public: { selected: this.newStatus.visibility === 'public' }, - unlisted: { selected: this.newStatus.visibility === 'unlisted' }, - private: { selected: this.newStatus.visibility === 'private' }, - direct: { selected: this.newStatus.visibility === 'direct' } - } - }, candidates () { const firstchar = this.textAtCaret.charAt(0) if (firstchar === '@') { @@ -133,6 +127,15 @@ const PostStatusForm = { users () { return this.$store.state.users.users }, + userDefaultScope () { + return this.$store.state.users.currentUser.default_scope + }, + showAllScopes () { + const minimalScopesMode = typeof this.$store.state.config.minimalScopesMode === 'undefined' + ? this.$store.state.instance.minimalScopesMode + : this.$store.state.config.minimalScopesMode + return !minimalScopesMode + }, emoji () { return this.$store.state.instance.emoji || [] }, @@ -157,8 +160,8 @@ const PostStatusForm = { isOverLengthLimit () { return this.hasStatusLengthLimit && (this.charactersLeft < 0) }, - scopeOptionsEnabled () { - return this.$store.state.instance.scopeOptionsEnabled + scopeOptionsMinimal () { + return this.$store.state.instance.scopeOptionsMinimal }, alwaysShowSubject () { if (typeof this.$store.state.config.alwaysShowSubjectInput !== 'undefined') { @@ -166,7 +169,7 @@ const PostStatusForm = { } else if (typeof this.$store.state.instance.alwaysShowSubjectInput !== 'undefined') { return this.$store.state.instance.alwaysShowSubjectInput } else { - return this.$store.state.instance.scopeOptionsEnabled + return true } }, formattingOptionsEnabled () { diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index 5085570b..b3d731cd 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -44,12 +44,13 @@ -
- - - - -
+
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 @@

    -
    +
    - - - - +

    -- cgit v1.2.3-70-g09d2 From f19284357e94968cdc9d4034c5e33ef9d6f6d9d7 Mon Sep 17 00:00:00 2001 From: shpuld Date: Thu, 14 Mar 2019 17:46:04 +0200 Subject: make nav bar slide, move mobile post status to mobile nav --- src/App.scss | 72 -------------------- src/App.vue | 7 -- src/components/mobile_nav/mobile_nav.js | 14 +++- src/components/mobile_nav/mobile_nav.vue | 91 +++++++++++++++++++++++++- src/components/notifications/notifications.js | 3 + src/components/notifications/notifications.vue | 2 +- 6 files changed, 105 insertions(+), 84 deletions(-) (limited to 'src/components') diff --git a/src/App.scss b/src/App.scss index 8f727cf8..539c9787 100644 --- a/src/App.scss +++ b/src/App.scss @@ -484,24 +484,6 @@ nav { } } -.menu-button { - display: none; - position: relative; -} - -.alert-dot { - border-radius: 100%; - height: 8px; - width: 8px; - position: absolute; - left: calc(50% - 4px); - top: calc(50% - 4px); - margin-left: 6px; - margin-top: -6px; - background-color: $fallback--cRed; - background-color: var(--badgeNotification, $fallback--cRed); -} - .fade-enter-active, .fade-leave-active { transition: opacity .2s } @@ -530,20 +512,6 @@ nav { display: none; } -.panel-switcher { - display: none; - width: 100%; - height: 46px; - - button { - display: block; - flex: 1; - max-height: 32px; - margin: 0.5em; - padding: 0.5em; - } -} - @media all and (min-width: 800px) { body { overflow-y: scroll; @@ -671,46 +639,6 @@ nav { border-radius: var(--inputRadius, $fallback--inputRadius); } -.mobile-notifications { - position: fixed; - width: 100vw; - height: 100vh; - top: calc(50px - 28px - 1.2em); - left: 0; - z-index: 999; - overflow-x: hidden; - overflow-y: scroll; - transition-property: transform; - transition-duration: 0.25s; - transform: translate(0); - - background-color: $fallback--bg; - background-color: var(--bg, $fallback--bg); - - .notifications { - margin: 0; - padding: 0; - border-radius: 0; - box-shadow: none; - .panel { - border-radius: 0; - margin: 0; - box-shadow: none; - } - .panel:after { - border-radius: 0; - } - .panel .panel-heading { - border-radius: 0; - box-shadow: none; - } - } - - &.closed { - transform: translate(100%); - } -} - @keyframes modal-background-fadein { from { background-color: rgba(0, 0, 0, 0); diff --git a/src/App.vue b/src/App.vue index 54155831..3b8623ad 100644 --- a/src/App.vue +++ b/src/App.vue @@ -46,13 +46,6 @@

    -
    - -
    - -
    -
    - diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js index a79aa636..88fab656 100644 --- a/src/components/mobile_nav/mobile_nav.js +++ b/src/components/mobile_nav/mobile_nav.js @@ -1,11 +1,13 @@ import SideDrawer from '../side_drawer/side_drawer.vue' import Notifications from '../notifications/notifications.vue' +import MobilePostStatusModal from '../mobile_post_status_modal/mobile_post_status_modal.vue' import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils' const MobileNav = { components: { SideDrawer, - Notifications + Notifications, + MobilePostStatusModal }, data: () => ({ notificationsOpen: false @@ -25,9 +27,19 @@ const MobileNav = { }, toggleMobileNotifications () { this.notificationsOpen = !this.notificationsOpen + if (!this.notificationsOpen) { + this.markNotificationsAsSeen() + } }, scrollToTop () { window.scrollTo(0, 0) + }, + logout () { + this.$router.replace('/main/public') + this.$store.dispatch('logout') + }, + markNotificationsAsSeen () { + this.$refs.notifications.markAsSeen() } } } diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue index 8f682c39..af2d6d5a 100644 --- a/src/components/mobile_nav/mobile_nav.vue +++ b/src/components/mobile_nav/mobile_nav.vue @@ -1,6 +1,6 @@ diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js index 9fc5e38a..d3db4b29 100644 --- a/src/components/notifications/notifications.js +++ b/src/components/notifications/notifications.js @@ -7,6 +7,9 @@ import { } from '../../services/notification_utils/notification_utils.js' const Notifications = { + props: [ + 'noHeading' + ], created () { const store = this.$store const credentials = store.state.users.currentUser.credentials diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue index 6f162b62..634a03ac 100644 --- a/src/components/notifications/notifications.vue +++ b/src/components/notifications/notifications.vue @@ -1,7 +1,7 @@