From 15bed586dcd1d10a6a05c664cf5bab72cdbf2a46 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Sun, 15 Nov 2020 13:57:02 +0200 Subject: report notification wip --- src/components/interactions/interactions.js | 2 ++ src/components/interactions/interactions.vue | 9 +++++++++ 2 files changed, 11 insertions(+) (limited to 'src/components') diff --git a/src/components/interactions/interactions.js b/src/components/interactions/interactions.js index 7fe5e76d..54275a7b 100644 --- a/src/components/interactions/interactions.js +++ b/src/components/interactions/interactions.js @@ -4,6 +4,8 @@ const tabModeDict = { mentions: ['mention'], 'likes+repeats': ['repeat', 'like'], follows: ['follow'], + reactions: ['pleroma:emoji_reaction'], + reports: ['pleroma:report'], moves: ['move'] } diff --git a/src/components/interactions/interactions.vue b/src/components/interactions/interactions.vue index 57d5d87c..b7291c02 100644 --- a/src/components/interactions/interactions.vue +++ b/src/components/interactions/interactions.vue @@ -21,6 +21,15 @@ key="follows" :label="$t('interactions.follows')" /> + + Date: Wed, 6 Jan 2021 18:31:34 +0200 Subject: somewhat workign version still with fixture --- src/components/notification/notification.js | 3 + src/components/notification/notification.scss | 28 +++ src/components/notification/notification.vue | 34 ++++ src/components/notifications/notifications.js | 1 + src/components/notifications/notifications.scss | 6 +- src/i18n/en.json | 3 +- src/modules/config.js | 3 +- src/services/api/api.service.js | 197 +++++++++++---------- .../entity_normalizer/entity_normalizer.service.js | 1 - 9 files changed, 177 insertions(+), 99 deletions(-) (limited to 'src/components') diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js index 4aa9affd..a920bb3e 100644 --- a/src/components/notification/notification.js +++ b/src/components/notification/notification.js @@ -76,6 +76,9 @@ const Notification = { this.$store.dispatch('dismissNotificationLocal', { id: this.notification.id }) this.$store.dispatch('removeFollowRequest', this.user) }) + }, + testlog (a) { + console.log(a) } }, computed: { diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss index f5905560..b103db86 100644 --- a/src/components/notification/notification.scss +++ b/src/components/notification/notification.scss @@ -56,6 +56,34 @@ margin: 0 0.1em; } + .report-content { + margin: 0.5em 0; + } + + .reported-status { + border: 1px solid $fallback--faint; + border-color: var(--faint, $fallback--faint); + border-radius: $fallback--inputRadius; + border-radius: var(--inputRadius, $fallback--inputRadius); + color: $fallback--text; + color: var(--text, $fallback--text); + display: block; + padding: 0.5em; + margin: 0.5em 0; + + .status-content { + pointer-events: none; + } + + .reported-status-name { + font-weight: bold; + } + + .reported-status-timeago { + float: right; + } + } + &.-type--repeat .type-icon { color: $fallback--cGreen; color: var(--cGreen, $fallback--cGreen); diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue index f56aa977..39e3bda0 100644 --- a/src/components/notification/notification.vue +++ b/src/components/notification/notification.vue @@ -106,6 +106,9 @@ + + {{ $t('notifications.submitted_report') }} +
+
+ Reported user: + + @{{ notification.report.acct.screen_name }} + + +
+
+ Reported statuses: + + + {{ status.user.name }} + + + +
+
diff --git a/src/components/status_history_modal/status_history_modal.vue b/src/components/status_history_modal/status_history_modal.vue index d6680df2..990be35b 100644 --- a/src/components/status_history_modal/status_history_modal.vue +++ b/src/components/status_history_modal/status_history_modal.vue @@ -17,9 +17,9 @@ v-for="status in history" :key="status.id" :statusoid="status" - :isPreview="true" + :is-preview="true" class="conversation-status status-fadein panel-body" - /> + />
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js index 41c14596..381dd112 100644 --- a/src/services/api/api.service.js +++ b/src/services/api/api.service.js @@ -417,7 +417,7 @@ const fetchStatus = ({ id, credentials }) => { } const fetchStatusSource = ({ id, credentials }) => { - let url = MASTODON_STATUS_SOURCE_URL(id) + const url = MASTODON_STATUS_SOURCE_URL(id) return fetch(url, { headers: authHeaders(credentials) }) .then((data) => { if (data.ok) { @@ -430,7 +430,7 @@ const fetchStatusSource = ({ id, credentials }) => { } const fetchStatusHistory = ({ status, credentials }) => { - let url = MASTODON_STATUS_HISTORY_URL(status.id) + const url = MASTODON_STATUS_HISTORY_URL(status.id) return promisedRequest({ url, credentials }) .then((data) => { data.reverse() @@ -767,7 +767,7 @@ const editStatus = ({ }) } - let putHeaders = authHeaders(credentials) + const putHeaders = authHeaders(credentials) return fetch(MASTODON_STATUS_URL(id), { body: form, diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js index c00e9796..c1b2ffac 100644 --- a/src/services/entity_normalizer/entity_normalizer.service.js +++ b/src/services/entity_normalizer/entity_normalizer.service.js @@ -378,7 +378,7 @@ export const parseStatus = (data) => { output.favoritedBy = [] output.rebloggedBy = [] - if (data.hasOwnProperty('originalStatus')) { + if (Object.prototype.hasOwnProperty.call(data, 'originalStatus')) { Object.assign(output, data.originalStatus) } -- cgit v1.2.3-70-g09d2 From b70d50407cef26926635b1b47131c01e597fcfc6 Mon Sep 17 00:00:00 2001 From: Sean King Date: Mon, 1 Aug 2022 21:25:08 -0600 Subject: Refresh the relative time object for a Timeago component if the time changes --- src/components/timeago/timeago.vue | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'src/components') diff --git a/src/components/timeago/timeago.vue b/src/components/timeago/timeago.vue index 2b487dfd..fce9605b 100644 --- a/src/components/timeago/timeago.vue +++ b/src/components/timeago/timeago.vue @@ -34,6 +34,13 @@ export default { unmounted () { clearTimeout(this.interval) }, + watch: { + time (newVal, oldVal) { + if (oldVal !== newVal) { + this.refreshRelativeTimeObject() + } + } + }, methods: { refreshRelativeTimeObject () { const nowThreshold = typeof this.nowThreshold === 'number' ? this.nowThreshold : 1 -- cgit v1.2.3-70-g09d2 From 4903069481508221ed047761be20a558799e712d Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 2 Aug 2022 23:54:06 +0300 Subject: change icons --- src/components/quick_view_settings/quick_view_settings.js | 6 +++--- src/components/quick_view_settings/quick_view_settings.vue | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) (limited to 'src/components') diff --git a/src/components/quick_view_settings/quick_view_settings.js b/src/components/quick_view_settings/quick_view_settings.js index bb39eb13..ad9e166c 100644 --- a/src/components/quick_view_settings/quick_view_settings.js +++ b/src/components/quick_view_settings/quick_view_settings.js @@ -1,12 +1,12 @@ import Popover from '../popover/popover.vue' import { mapGetters } from 'vuex' import { library } from '@fortawesome/fontawesome-svg-core' -import { faTableList, faFolderTree, faBars, faWrench } from '@fortawesome/free-solid-svg-icons' +import { faList, faFolderTree, faBarsStaggered, faWrench } from '@fortawesome/free-solid-svg-icons' library.add( - faTableList, + faList, faFolderTree, - faBars, + faBarsStaggered, faWrench ) diff --git a/src/components/quick_view_settings/quick_view_settings.vue b/src/components/quick_view_settings/quick_view_settings.vue index 78f315f3..31ff3c6b 100644 --- a/src/components/quick_view_settings/quick_view_settings.vue +++ b/src/components/quick_view_settings/quick_view_settings.vue @@ -23,7 +23,7 @@ {{ $t('settings.conversation_display_linear_quick') }} + /> {{ $t('settings.conversation_display_linear_quick') }}
-- cgit v1.2.3-70-g09d2 From 04e62df377fdd2ea563f58dcd23ea8048fc1c140 Mon Sep 17 00:00:00 2001 From: Sean King Date: Tue, 2 Aug 2022 23:19:25 -0600 Subject: Allow for template inside Timeago component that shows unless the time string is 'just now' --- src/components/status/status.vue | 16 ++++++---------- src/components/timeago/timeago.vue | 26 ++++++++++++++++++-------- 2 files changed, 24 insertions(+), 18 deletions(-) (limited to 'src/components') diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 5ddb94b4..8036ddf4 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -336,16 +336,12 @@ tag="span" >
diff --git a/src/components/timeago/timeago.vue b/src/components/timeago/timeago.vue index fce9605b..b5f49515 100644 --- a/src/components/timeago/timeago.vue +++ b/src/components/timeago/timeago.vue @@ -3,7 +3,7 @@ :datetime="time" :title="localeDateString" > - {{ $tc(relativeTime.key, relativeTime.num, [relativeTime.num]) }} + {{ relativeTimeString }} @@ -13,7 +13,7 @@ import localeService from 'src/services/locale/locale.service.js' export default { name: 'Timeago', - props: ['time', 'autoUpdate', 'longFormat', 'nowThreshold'], + props: ['time', 'autoUpdate', 'longFormat', 'nowThreshold', 'templateKey'], data () { return { relativeTime: { key: 'time.now', num: 0 }, @@ -26,21 +26,31 @@ export default { return typeof this.time === 'string' ? new Date(Date.parse(this.time)).toLocaleString(browserLocale) : this.time.toLocaleString(browserLocale) + }, + relativeTimeString () { + const timeString = this.$i18n.tc(this.relativeTime.key, this.relativeTime.num, [this.relativeTime.num]) + + if (typeof this.templateKey === 'string' && this.relativeTime.key !== 'time.now') { + return this.$i18n.t(this.templateKey, [timeString]) + } + + return timeString } }, - created () { - this.refreshRelativeTimeObject() - }, - unmounted () { - clearTimeout(this.interval) - }, watch: { time (newVal, oldVal) { if (oldVal !== newVal) { + clearTimeout(this.interval) this.refreshRelativeTimeObject() } } }, + created () { + this.refreshRelativeTimeObject() + }, + unmounted () { + clearTimeout(this.interval) + }, methods: { refreshRelativeTimeObject () { const nowThreshold = typeof this.nowThreshold === 'number' ? this.nowThreshold : 1 -- cgit v1.2.3-70-g09d2 From dbfca224d812c2ba80a48852ba047bb65c4c6dd9 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 4 Aug 2022 01:56:52 +0300 Subject: server-side storage for flags --- .../update_notification/update_notification.js | 40 +++++- .../update_notification/update_notification.scss | 95 +++++++++++-- .../update_notification/update_notification.vue | 52 ++++--- src/lib/persisted_state.js | 1 + src/main.js | 3 + src/modules/serverSideStorage.js | 158 +++++++++++++++++++++ src/modules/users.js | 2 + .../entity_normalizer/entity_normalizer.service.js | 3 + 8 files changed, 323 insertions(+), 31 deletions(-) create mode 100644 src/modules/serverSideStorage.js (limited to 'src/components') diff --git a/src/components/update_notification/update_notification.js b/src/components/update_notification/update_notification.js index 6b8665dd..1dd771eb 100644 --- a/src/components/update_notification/update_notification.js +++ b/src/components/update_notification/update_notification.js @@ -10,15 +10,49 @@ library.add( faTimes ) -const SettingsModal = { +const CURRENT_UPDATE_COUNTER = 1 + +const UpdateNotification = { data () { return { - pleromaTanVariant: Math.random() > 0.5 ? pleromaTan : pleromaTanFox + pleromaTanVariant: Math.random() > 0.5 ? pleromaTan : pleromaTanFox, + showingMore: true, + contentHeight: 0 } }, components: { Modal + }, + computed: { + pleromaTanStyles () { + return { + 'shape-outside': 'url(' + this.pleromaTanVariant + ')' + } + }, + shouldShow () { + return this.$store.state.serverSideStorage.flagStorage.updateCounter < CURRENT_UPDATE_COUNTER && + !this.$store.state.serverSideStorage.flagStorage.dontShowUpdateNotifs + } + }, + methods: { + toggleShow () { + this.showingMore = !this.showingMore + }, + neverShowAgain () { + this.$store.commit('setFlag', { flag: 'updateCounter', value: CURRENT_UPDATE_COUNTER }) + this.$store.commit('setFlag', { flag: 'dontShowUpdateNotifs', value: 1 }) + this.$store.dispatch('pushServerSideStorage') + }, + dismiss () { + this.$store.commit('setFlag', { flag: 'updateCounter', value: CURRENT_UPDATE_COUNTER }) + this.$store.dispatch('pushServerSideStorage') + } + }, + mounted () { + setTimeout(() => { + this.contentHeight = this.$refs.content.offsetHeight + }, 10) } } -export default SettingsModal +export default UpdateNotification diff --git a/src/components/update_notification/update_notification.scss b/src/components/update_notification/update_notification.scss index 5fd9eb9b..594f4c6b 100644 --- a/src/components/update_notification/update_notification.scss +++ b/src/components/update_notification/update_notification.scss @@ -1,5 +1,13 @@ @import 'src/_variables.scss'; +.UpdateNotification { + overflow: hidden; +} .UpdateNotificationModal { + --__top-fringe: 18em; // how much pleroma-tan should stick her head above + --__bottom-fringe: 80em; // just reserving as much as we can, number is mostly irrelevant + --__right-fringe: 8em; + + font-size: 15px; /* Explanation: * Modal is positioned vertically centered. * 100vh - 100% = Distance between modal's top+bottom boundaries and screen @@ -8,27 +16,90 @@ * bottom of the screen * - 50px - leaving tiny amount of space so that titlebar + tiny amount of modal is visible */ - transform: translateY(calc(((100vh - 100%) / 2 + 5%))); - max-width: 90vh; - width: 30em; position: relative; + transition: transform; + transition-timing-function: ease-in-out; + transition-duration: 500ms; + + .text { + width: 40em; + padding-left: 1em; + } @media all and (max-width: 800px) { /* For mobile, the modal takes 100% of the available screen. This ensures the minimized modal is always 50px above the browser bottom bar regardless of whether or not it is visible. */ - transform: translateY(calc(100% - 50px)); + width: 100vw; + } + + @media all and (max-height: 600px) { + display: none; } - .panel-body > p { - width: calc(100% - 10em) + + .content { + overflow: hidden; + margin-top: calc(-1 * var(--__top-fringe)); + margin-bottom: calc(-1 * var(--__bottom-fringe)); + margin-right: calc(-1 * var(--__right-fringe)); + } + + .panel-body { + border-width: 0 0 1px 0; + border-style: solid; + border-color: var(--border, $fallback--border); + } + + .panel-footer { + z-index: 22; + position: relative; + border-width: 0; + grid-template-columns: auto; } .pleroma-tan { - max-width: 20em; - max-height: 40em; - position: absolute; - right: -5em; - top: -10em; - z-index: 10; + object-fit: cover; + object-position: top; + transition: position, left, right, top, bottom, max-width, max-height; + transition-timing-function: ease-in-out; + transition-duration: 500ms; + width: 25em; + float: right; + z-index: 20; + position: relative; + shape-margin: 0.5em; + } + + .spacer-top { + min-height: var(--__top-fringe); + } + + .spacer-bottom { + min-height: var(--__bottom-fringe); + } + + .extra-info { + transition: max-height, padding, height; + transition-timing-function: ease-in-out; + transition-duration: 500ms; + max-height: auto; + height: auto; + } + + &.-peek { + transform: translateY(calc(((100vh - 100%) / 2))); + + .pleroma-tan { + float: right; + z-index: 10; + shape-image-threshold: 0.7; + } + + .extra-info { + max-height: 0; + height: 0; + display: none; + overflow: hidden; + } } } diff --git a/src/components/update_notification/update_notification.vue b/src/components/update_notification/update_notification.vue index e7118d81..793966eb 100644 --- a/src/components/update_notification/update_notification.vue +++ b/src/components/update_notification/update_notification.vue @@ -1,36 +1,56 @@