aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/extra_buttons/extra_buttons.js3
-rw-r--r--src/components/extra_buttons/extra_buttons.vue2
-rw-r--r--src/components/interactions/interactions.js25
-rw-r--r--src/components/interactions/interactions.vue25
-rw-r--r--src/components/login_form/login_form.vue29
-rw-r--r--src/components/mentions/mentions.vue2
-rw-r--r--src/components/nav_panel/nav_panel.vue4
-rw-r--r--src/components/notifications/notifications.js18
-rw-r--r--src/components/notifications/notifications.scss6
-rw-r--r--src/components/notifications/notifications.vue10
-rw-r--r--src/components/post_status_form/post_status_form.vue3
-rw-r--r--src/components/scope_selector/scope_selector.vue18
-rw-r--r--src/components/settings/settings.vue68
-rw-r--r--src/components/side_drawer/side_drawer.vue5
-rw-r--r--src/components/status/status.vue9
-rw-r--r--src/components/tab_switcher/tab_switcher.js13
-rw-r--r--src/components/user_card/user_card.vue41
-rw-r--r--src/components/user_settings/user_settings.vue4
18 files changed, 167 insertions, 118 deletions
diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js
index f70ecd1d..528da301 100644
--- a/src/components/extra_buttons/extra_buttons.js
+++ b/src/components/extra_buttons/extra_buttons.js
@@ -54,6 +54,9 @@ const ExtraButtons = {
},
canPin () {
return this.ownStatus && (this.status.visibility === 'public' || this.status.visibility === 'unlisted')
+ },
+ enabled () {
+ return this.canPin || this.canDelete
}
}
}
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index 38e933bb..ef11138d 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -3,7 +3,7 @@
trigger="click"
@hide='showDropDown = false'
append-to-body
- v-if="showPopper"
+ v-if="enabled && showPopper"
:options="{
placement: 'top',
modifiers: {
diff --git a/src/components/interactions/interactions.js b/src/components/interactions/interactions.js
new file mode 100644
index 00000000..d4e3cc17
--- /dev/null
+++ b/src/components/interactions/interactions.js
@@ -0,0 +1,25 @@
+import Notifications from '../notifications/notifications.vue'
+
+const tabModeDict = {
+ mentions: ['mention'],
+ 'likes+repeats': ['repeat', 'like'],
+ follows: ['follow']
+}
+
+const Interactions = {
+ data () {
+ return {
+ filterMode: tabModeDict['mentions']
+ }
+ },
+ methods: {
+ onModeSwitch (index, dataset) {
+ this.filterMode = tabModeDict[dataset.filter]
+ }
+ },
+ components: {
+ Notifications
+ }
+}
+
+export default Interactions
diff --git a/src/components/interactions/interactions.vue b/src/components/interactions/interactions.vue
new file mode 100644
index 00000000..5a204ca7
--- /dev/null
+++ b/src/components/interactions/interactions.vue
@@ -0,0 +1,25 @@
+<template>
+ <div class="panel panel-default">
+ <div class="panel-heading">
+ <div class="title">
+ Interactions
+ </div>
+ </div>
+ <tab-switcher
+ ref="tabSwitcher"
+ :onSwitch="onModeSwitch"
+ >
+ <span data-tab-dummy data-filter="mentions" :label="$t('nav.mentions')"/>
+ <span data-tab-dummy data-filter="likes+repeats" :label="$t('interactions.favs_repeats')"/>
+ <span data-tab-dummy data-filter="follows" :label="$t('interactions.follows')"/>
+ </tab-switcher>
+ <Notifications
+ ref="notifications"
+ :noHeading="true"
+ :minimalMode="true"
+ :filterMode="filterMode"
+ />
+ </div>
+</template>
+
+<script src="./interactions.js"></script>
diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue
index 27a8e48a..c6be2e00 100644
--- a/src/components/login_form/login_form.vue
+++ b/src/components/login_form/login_form.vue
@@ -50,6 +50,10 @@
@import '../../_variables.scss';
.login-form {
+ display: flex;
+ flex-direction: column;
+ padding: 0.6em;
+
.btn {
min-height: 28px;
width: 10em;
@@ -66,9 +70,30 @@
align-items: center;
justify-content: space-between;
}
-}
-.login {
+ .form-group {
+ display: flex;
+ flex-direction: column;
+ padding: 0.3em 0.5em 0.6em;
+ line-height:24px;
+ }
+
+ .form-bottom {
+ display: flex;
+ padding: 0.5em;
+ height: 32px;
+
+ button {
+ width: 10em;
+ }
+
+ p {
+ margin: 0.35em;
+ padding: 0.35em;
+ display: flex;
+ }
+ }
+
.error {
text-align: center;
diff --git a/src/components/mentions/mentions.vue b/src/components/mentions/mentions.vue
index bba06da6..6b4e96e0 100644
--- a/src/components/mentions/mentions.vue
+++ b/src/components/mentions/mentions.vue
@@ -1,5 +1,5 @@
<template>
- <Timeline :title="$t('nav.mentions')" v-bind:timeline="timeline" v-bind:timeline-name="'mentions'"/>
+ <Timeline :title="$t('nav.interactions')" v-bind:timeline="timeline" v-bind:timeline-name="'mentions'"/>
</template>
<script src="./mentions.js"></script>
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 7a7212fb..e6e0f074 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -8,8 +8,8 @@
</router-link>
</li>
<li v-if='currentUser'>
- <router-link :to="{ name: 'mentions', params: { username: currentUser.screen_name } }">
- {{ $t("nav.mentions") }}
+ <router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
+ {{ $t("nav.interactions") }}
</router-link>
</li>
<li v-if='currentUser'>
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index 5b13b98e..8c97eb04 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -7,15 +7,24 @@ import {
} from '../../services/notification_utils/notification_utils.js'
const Notifications = {
- props: [
- 'noHeading'
- ],
+ props: {
+ // Disables display of panel header
+ noHeading: Boolean,
+ // Disables panel styles, unread mark, potentially other notification-related actions
+ // meant for "Interactions" timeline
+ minimalMode: Boolean,
+ // Custom filter mode, an array of strings, possible values 'mention', 'repeat', 'like', 'follow', used to override global filter for use in "Interactions" timeline
+ filterMode: Array
+ },
data () {
return {
bottomedOut: false
}
},
computed: {
+ mainClass () {
+ return this.minimalMode ? '' : 'panel panel-default'
+ },
notifications () {
return notificationsFromStore(this.$store)
},
@@ -26,7 +35,8 @@ const Notifications = {
return unseenNotificationsFromStore(this.$store)
},
visibleNotifications () {
- return visibleNotificationsFromStore(this.$store)
+ console.log(this.filterMode)
+ return visibleNotificationsFromStore(this.$store, this.filterMode)
},
unseenCount () {
return this.unseenNotifications.length
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index c0b458cc..622d12f4 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -1,8 +1,10 @@
@import '../../_variables.scss';
.notifications {
- // a bit of a hack to allow scrolling below notifications
- padding-bottom: 15em;
+ &:not(.minimal) {
+ // a bit of a hack to allow scrolling below notifications
+ padding-bottom: 15em;
+ }
.loadmore-error {
color: $fallback--text;
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 88775be1..c71499b2 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -1,6 +1,6 @@
<template>
- <div class="notifications">
- <div class="panel panel-default">
+ <div :class="{ minimal: minimalMode }" class="notifications">
+ <div :class="mainClass">
<div v-if="!noHeading" class="panel-heading">
<div class="title">
{{$t('notifications.notifications')}}
@@ -12,7 +12,7 @@
<button v-if="unseenCount" @click.prevent="markAsSeen" class="read-button">{{$t('notifications.read')}}</button>
</div>
<div class="panel-body">
- <div v-for="notification in visibleNotifications" :key="notification.id" class="notification" :class='{"unseen": !notification.seen}'>
+ <div v-for="notification in visibleNotifications" :key="notification.id" class="notification" :class='{"unseen": !minimalMode && !notification.seen}'>
<div class="notification-overlay"></div>
<notification :notification="notification"></notification>
</div>
@@ -22,7 +22,9 @@
{{$t('notifications.no_more_notifications')}}
</div>
<a v-else-if="!loading" href="#" v-on:click.prevent="fetchOlderNotifications()">
- <div class="new-status-notification text-center panel-footer">{{$t('notifications.load_older')}}</div>
+ <div class="new-status-notification text-center panel-footer">
+ {{ minimalMode ? $t('interactions.load_older') : $t('notifications.load_older')}}
+ </div>
</a>
<div v-else class="new-status-notification text-center panel-footer">
<i class="icon-spin3 animate-spin"/>
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index cb70d199..25c5284f 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -152,10 +152,11 @@
display: flex;
justify-content: space-between;
flex-direction: row-reverse;
+ padding-top: 5px;
}
}
-.post-status-form, .login {
+.post-status-form {
.form-bottom {
display: flex;
padding: 0.5em;
diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue
index 33ea488f..5ebb5d56 100644
--- a/src/components/scope_selector/scope_selector.vue
+++ b/src/components/scope_selector/scope_selector.vue
@@ -1,5 +1,5 @@
<template>
-<div v-if="!showNothing">
+<div v-if="!showNothing" class="scope-selector">
<i class="icon-mail-alt"
:class="css.direct"
:title="$t('post_status.scope.direct')"
@@ -28,3 +28,19 @@
</template>
<script src="./scope_selector.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.scope-selector {
+ i {
+ font-size: 1.2em;
+ cursor: pointer;
+
+ &.selected {
+ color: $fallback--lightText;
+ color: var(--lightText, $fallback--lightText);
+ }
+ }
+}
+</style>
diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
index 920e6e12..4cf6fae2 100644
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@@ -303,71 +303,3 @@
<script src="./settings.js">
</script>
-
-<style lang="scss">
-@import '../../_variables.scss';
-
-.setting-item {
- border-bottom: 2px solid var(--fg, $fallback--fg);
- margin: 1em 1em 1.4em;
- padding-bottom: 1.4em;
-
- > div {
- margin-bottom: .5em;
- &:last-child {
- margin-bottom: 0;
- }
- }
-
- &:last-child {
- border-bottom: none;
- padding-bottom: 0;
- margin-bottom: 1em;
- }
-
- select {
- min-width: 10em;
- }
-
-
- textarea {
- width: 100%;
- max-width: 100%;
- height: 100px;
- }
-
- .unavailable,
- .unavailable i {
- color: var(--cRed, $fallback--cRed);
- color: $fallback--cRed;
- }
-
- .btn {
- min-height: 28px;
- min-width: 10em;
- padding: 0 2em;
- }
-
- .number-input {
- max-width: 6em;
- }
-}
-.select-multiple {
- display: flex;
- .option-list {
- margin: 0;
- padding-left: .5em;
- }
-}
-.setting-list,
-.option-list{
- list-style-type: none;
- padding-left: 2em;
- li {
- margin-bottom: 0.5em;
- }
- .suboptions {
- margin-top: 0.3em
- }
-}
-</style>
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 9abb8cef..6428b1b0 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -26,6 +26,11 @@
{{ $t("nav.dms") }}
</router-link>
</li>
+ <li v-if="currentUser" @click="toggleDrawer">
+ <router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
+ {{ $t("nav.interactions") }}
+ </router-link>
+ </li>
</ul>
<ul>
<li v-if="currentUser" @click="toggleDrawer">
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 9a062592..e1dd81ac 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -177,7 +177,6 @@
</div>
</div>
<div class="container" v-if="replying">
- <div class="reply-left"/>
<post-status-form class="reply-body" :reply-to="status.id" :attentions="status.attentions" :repliedUser="status.user" :copy-message-scope="status.visibility" :subject="replySubject" v-on:posted="toggleReplying"/>
</div>
</template>
@@ -257,7 +256,6 @@ $status-margin: 0.75em;
}
.status-el {
- hyphens: auto;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
@@ -632,16 +630,11 @@ a.unmute {
margin-left: auto;
}
-.reply-left {
- flex: 0;
- min-width: 48px;
-}
-
.reply-body {
flex: 1;
}
-.timeline > {
+.timeline :not(.panel-disabled) > {
.status-el:last-child {
border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js
index 423df258..c949b458 100644
--- a/src/components/tab_switcher/tab_switcher.js
+++ b/src/components/tab_switcher/tab_switcher.js
@@ -4,15 +4,18 @@ import './tab_switcher.scss'
export default Vue.component('tab-switcher', {
name: 'TabSwitcher',
- props: ['renderOnlyFocused'],
+ props: ['renderOnlyFocused', 'onSwitch'],
data () {
return {
active: this.$slots.default.findIndex(_ => _.tag)
}
},
methods: {
- activateTab (index) {
+ activateTab (index, dataset) {
return () => {
+ if (typeof this.onSwitch === 'function') {
+ this.onSwitch.call(null, index, this.$slots.default[index].elm.dataset)
+ }
this.active = index
}
}
@@ -37,7 +40,11 @@ export default Vue.component('tab-switcher', {
return (
<div class={ classesWrapper.join(' ')}>
- <button disabled={slot.data.attrs.disabled} onClick={this.activateTab(index)} class={ classesTab.join(' ') }>{slot.data.attrs.label}</button>
+ <button
+ disabled={slot.data.attrs.disabled}
+ onClick={this.activateTab(index)}
+ class={classesTab.join(' ')}>
+ {slot.data.attrs.label}</button>
</div>
)
})
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 2d02ca03..b4495673 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -6,7 +6,7 @@
<router-link :to="userProfileLink(user)">
<UserAvatar :betterShadow="betterShadow" :user="user"/>
</router-link>
- <div class="name-and-screen-name">
+ <div class="user-summary">
<div class="top-line">
<div :title="user.name" class='user-name' v-if="user.name_html" v-html="user.name_html"></div>
<div :title="user.name" class='user-name' v-else>{{user.name}}</div>
@@ -18,12 +18,12 @@
</a>
</div>
- <router-link class='user-screen-name' :to="userProfileLink(user)">
- <span class="handle">@{{user.screen_name}}
- <span class="alert staff" v-if="!hideBio && !!visibleRole">{{visibleRole}}</span>
- </span><span v-if="user.locked"><i class="icon icon-lock"></i></span>
+ <div class="bottom-line">
+ <router-link class="user-screen-name" :to="userProfileLink(user)">@{{user.screen_name}}</router-link>
+ <span class="alert staff" v-if="!hideBio && !!visibleRole">{{visibleRole}}</span>
+ <span v-if="user.locked"><i class="icon icon-lock"></i></span>
<span v-if="!hideUserStatsLocal && !hideBio" class="dailyAvg">{{dailyAvg}} {{ $t('user_card.per_day') }}</span>
- </router-link>
+ </div>
</div>
</div>
<div class="user-meta">
@@ -232,7 +232,7 @@
opacity: .8;
}
- .name-and-screen-name {
+ .user-summary {
display: block;
margin-left: 0.6em;
text-align: left;
@@ -249,6 +249,7 @@
vertical-align: middle;
object-fit: contain
}
+
.top-line {
display: flex;
}
@@ -269,15 +270,19 @@
}
}
- .user-screen-name {
- color: $fallback--lightText;
- color: var(--lightText, $fallback--lightText);
- display: inline-block;
+ .bottom-line {
+ display: flex;
font-weight: light;
font-size: 15px;
- padding-right: 0.1em;
- width: 100%;
- display: flex;
+
+ .user-screen-name {
+ min-width: 1px;
+ flex: 0 1 auto;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ color: $fallback--lightText;
+ color: var(--lightText, $fallback--lightText);
+ }
.dailyAvg {
min-width: 1px;
@@ -288,15 +293,9 @@
color: var(--text, $fallback--text);
}
- .handle {
- min-width: 1px;
- flex: 0 1 auto;
- text-overflow: ellipsis;
- overflow: hidden;
- }
-
// TODO use proper colors
.staff {
+ flex: none;
text-transform: capitalize;
color: $fallback--text;
color: var(--btnText, $fallback--text);
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index 8a94f0b8..2cb8b37a 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -251,6 +251,10 @@
margin: 0;
}
+ .visibility-tray {
+ padding-top: 5px;
+ }
+
input[type=file] {
padding: 5px;
height: auto;
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-27 13:38:42 +0000