diff --git a/src/App.scss b/src/App.scss
index f20eb44ce4..2d10f1e7e2 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -39,10 +39,13 @@ h4 {
text-align: center;
}
+html {
+ font-size: 14px;
+}
+
body {
font-family: sans-serif;
font-family: var(--interfaceFont, sans-serif);
- font-size: 14px;
margin: 0;
color: $fallback--text;
color: var(--text, $fallback--text);
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index 6781a4f882..746f1c9175 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -4,8 +4,6 @@
trigger="click"
placement="top"
class="extra-button-popover"
- :offset="5"
- :container="false"
>
.reply-to-and-accountname > a {
max-width: 100%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
+ display: inline-block;
+ word-break: break-all;
}
}
@@ -639,6 +573,8 @@ $status-margin: 0.75em;
overflow: hidden;
text-overflow: ellipsis;
margin: 0 0.4em 0 0.2em;
+ color: $fallback--faint;
+ color: var(--faint, $fallback--faint);
}
.replies-separator {
diff --git a/src/components/status_popover/status_popover.js b/src/components/status_popover/status_popover.js
new file mode 100644
index 0000000000..19f16bd980
--- /dev/null
+++ b/src/components/status_popover/status_popover.js
@@ -0,0 +1,34 @@
+import { find } from 'lodash'
+
+const StatusPopover = {
+ name: 'StatusPopover',
+ props: [
+ 'statusId'
+ ],
+ data () {
+ return {
+ popperOptions: {
+ modifiers: {
+ preventOverflow: { padding: { top: 50 }, boundariesElement: 'viewport' }
+ }
+ }
+ }
+ },
+ computed: {
+ status () {
+ return find(this.$store.state.statuses.allStatuses, { id: this.statusId })
+ }
+ },
+ components: {
+ Status: () => import('../status/status.vue')
+ },
+ methods: {
+ enter () {
+ if (!this.status) {
+ this.$store.dispatch('fetchStatus', this.statusId)
+ }
+ }
+ }
+}
+
+export default StatusPopover
diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
new file mode 100644
index 0000000000..eacf4c0675
--- /dev/null
+++ b/src/components/status_popover/status_popover.vue
@@ -0,0 +1,85 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/main.js b/src/main.js
index 7923ffe890..a9db1cff03 100644
--- a/src/main.js
+++ b/src/main.js
@@ -41,7 +41,13 @@ Vue.use(VueChatScroll)
Vue.use(VueClickOutside)
Vue.use(PortalVue)
Vue.use(VBodyScrollLock)
-Vue.use(VTooltip)
+Vue.use(VTooltip, {
+ popover: {
+ defaultTrigger: 'hover click',
+ defaultContainer: false,
+ defaultOffset: 5
+ }
+})
const i18n = new VueI18n({
// By default, use the browser locale, we will update it if neccessary
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index 918065d207..f11ffdcdc3 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -537,6 +537,10 @@ const statuses = {
setNotificationsSilence ({ rootState, commit }, { value }) {
commit('setNotificationsSilence', { value })
},
+ fetchStatus ({ rootState, dispatch }, id) {
+ rootState.api.backendInteractor.fetchStatus({ id })
+ .then((status) => dispatch('addNewStatuses', { statuses: [status] }))
+ },
deleteStatus ({ rootState, commit }, status) {
commit('setDeleted', { status })
apiService.deleteStatus({ id: status.id, credentials: rootState.users.currentUser.credentials })