logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://hacktivis.me/git/pleroma-fe.git
commit: 5b7c6538745083dfd48771392ab22de557a7a344
parent 3fc9673a7d0fb851283e4ed687c2fd7790f03317
Author: Henry Jameson <me@hjkos.com>
Date:   Tue,  2 Aug 2022 00:37:48 +0300

initial scratch

Diffstat:

Msrc/App.js1+
Msrc/App.vue1+
Asrc/assets/pleromatan_apology.png0
Asrc/assets/pleromatan_apology_fox.png0
Asrc/components/update_notification/update_notification.js24++++++++++++++++++++++++
Asrc/components/update_notification/update_notification.scss34++++++++++++++++++++++++++++++++++
Asrc/components/update_notification/update_notification.vue41+++++++++++++++++++++++++++++++++++++++++
Msrc/i18n/en.json9+++++++++
8 files changed, 110 insertions(+), 0 deletions(-)

diff --git a/src/App.js b/src/App.js @@ -32,6 +32,7 @@ export default { MobileNav, DesktopNav, SettingsModal: defineAsyncComponent(() => import('./components/settings_modal/settings_modal.vue')), + UpdateNotification: defineAsyncComponent(() => import('./components/update_notification/update_notification.vue')), UserReportingModal, PostStatusModal, GlobalNoticeList diff --git a/src/App.vue b/src/App.vue @@ -65,6 +65,7 @@ <UserReportingModal /> <PostStatusModal /> <SettingsModal /> + <UpdateNotification /> <div id="modal" /> <GlobalNoticeList /> <div id="popovers" /> diff --git a/src/assets/pleromatan_apology.png b/src/assets/pleromatan_apology.png Binary files differ. diff --git a/src/assets/pleromatan_apology_fox.png b/src/assets/pleromatan_apology_fox.png Binary files differ. diff --git a/src/components/update_notification/update_notification.js b/src/components/update_notification/update_notification.js @@ -0,0 +1,24 @@ +import Modal from 'src/components/modal/modal.vue' +import { library } from '@fortawesome/fontawesome-svg-core' +import pleromaTan from 'src/assets/pleromatan_apology.png' +import pleromaTanFox from 'src/assets/pleromatan_apology_fox.png' + +import { + faTimes +} from '@fortawesome/free-solid-svg-icons' +library.add( + faTimes +) + +const SettingsModal = { + data () { + return { + pleromaTanVariant: Math.random() > 0.5 ? pleromaTan : pleromaTanFox + } + }, + components: { + Modal + } +} + +export default SettingsModal diff --git a/src/components/update_notification/update_notification.scss b/src/components/update_notification/update_notification.scss @@ -0,0 +1,34 @@ +@import 'src/_variables.scss'; +.UpdateNotificationModal { + /* Explanation: + * Modal is positioned vertically centered. + * 100vh - 100% = Distance between modal's top+bottom boundaries and screen + * (100vh - 100%) / 2 = Distance between bottom (or top) boundary and screen + * + 10% - we move modal completely off-screen, it's top boundary touches + * 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; + + @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)); + } + .panel-body > p { + width: calc(100% - 10em) + } + + .pleroma-tan { + max-width: 20em; + max-height: 40em; + position: absolute; + right: -5em; + top: -10em; + z-index: 10; + } +} diff --git a/src/components/update_notification/update_notification.vue b/src/components/update_notification/update_notification.vue @@ -0,0 +1,41 @@ +<template> + <Modal + :is-open="true" + class="UpdateNotification" + :class="{ peek: modalPeeked }" + :no-background="true" + > + <div class="UpdateNotificationModal panel"> + <div class="panel-heading"> + <span class="title"> + {{ $t('update.big_update_title') }} + </span> + </div> + <div class="panel-body"> + <p> + {{ $t('update.big_update_content') }} + </p> + <p> + <button + class="button-unstyled -link tall-status-hider" + @click.prevent="toggleShowMore" + > + {{ $t("general.show_more") }} + </button> + {{ ' ' }} + <button + class="button-unstyled -link tall-status-hider" + @click.prevent="toggleShowMore" + > + {{ $t("general.never_show_again") }} + </button> + </p> + <img class="pleroma-tan" :src="pleromaTanVariant"/> + </div> + </div> + </Modal> +</template> + +<script src="./update_notification.js"></script> + +<style src="./update_notification.scss" lang="scss"></style> diff --git a/src/i18n/en.json b/src/i18n/en.json @@ -71,6 +71,7 @@ "optional": "optional", "show_more": "Show more", "show_less": "Show less", + "never_show_again": "Never show again", "dismiss": "Dismiss", "cancel": "Cancel", "disable": "Disable", @@ -956,5 +957,13 @@ }, "display_date": { "today": "Today" + }, + "update": { + "big_update_title": "Please bear with us", + "big_update_content": "We haven't had a release in a while, so there things might look and feel different than what you're used to.", + "update_bugs": "Please report any issues and bugs on {pleromaGitlab} we don't have a QA team so some things fall through the cracks, we're also open to feedback and suggestions.", + "update_bugs_gitlab": "Pleroma Gitlab", + "update_changelog": "You can see the full changelog {here}", + "update_changelog_here": "here" } }