nicoeri/filebrowser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Set toast style to scoped and remove noty css imports

Browse Source
This commit is contained in:
Kloon ImKloon 2023-09-08 10:48:14 +02:00
parent b257589405
commit 9b0dcaae65
No known key found for this signature in database
GPG Key ID: CCF1C86A995C5B6A
3 changed files with 24 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/ErrorToast.vue → frontend/src/components/CustomToast.vue
View File

@ -21,16 +21,18 @@ export default {
}; };
</script> </script>
<style> <style scoped>
.t-container { .t-container {
width: 100%; width: 100%;
padding: 5px 0;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.action { .action {
text-align: center;
height: 40px; height: 40px;
padding: 5px 10px; padding: 0 10px;
border-radius: 5px; border-radius: 5px;
color: white; color: white;
cursor: pointer; cursor: pointer;

2
frontend/src/css/styles.css
View File

@ -1,7 +1,5 @@
@import "normalize.css/normalize.css"; @import "normalize.css/normalize.css";
@import "vue-toastification/dist/index.css"; @import "vue-toastification/dist/index.css";
@import "noty/lib/noty.css";
@import "noty/lib/themes/mint.css";
@import "./_variables.css"; @import "./_variables.css";
@import "./_buttons.css"; @import "./_buttons.css";
@import "./_inputs.css"; @import "./_inputs.css";

29
frontend/src/main.js
View File

@ -1,13 +1,14 @@
import { disableExternal } from "@/utils/constants"; import { disableExternal } from "@/utils/constants";
import { createApp } from "vue"; import { createApp, configureCompat } from "vue";
import Noty from "noty";
import VueLazyload from "vue-lazyload"; import VueLazyload from "vue-lazyload";
import Toast, { useToast } from "vue-toastification"; import Toast, { useToast } from "vue-toastification";
import createPinia from "@/stores"; import createPinia from "@/stores";
import router from "@/router"; import router from "@/router";
import i18n from "@/i18n"; import i18n, { rtlLanguages } from "@/i18n";
import App from "@/App.vue"; import App from "@/App.vue";
import ErrorToast from "@/components/ErrorToast.vue"; import CustomToast from "@/components/CustomToast.vue";
configureCompat({ RENDER_FUNCTION: false });
import dayjs from "dayjs"; import dayjs from "dayjs";
import localizedFormat from "dayjs/plugin/localizedFormat"; import localizedFormat from "dayjs/plugin/localizedFormat";
@ -60,20 +61,26 @@ const toastConfig = {
hideProgressBar: false, hideProgressBar: false,
closeButton: "button", closeButton: "button",
icon: true, icon: true,
// TODO: add RTL support
// rtl: false,
}; };
app.provide("$showSuccess", (message) => { app.provide("$showSuccess", (message) => {
const $toast = useToast(); const $toast = useToast();
$toast.success(message, { ...toastConfig }); $toast.success(
{
component: CustomToast,
props: {
message: message,
},
},
{ ...toastConfig, rtl: rtlLanguages.includes(i18n.global.locale) }
);
}); });
app.provide("$showError", (error, displayReport = true) => { app.provide("$showError", (error, displayReport = true) => {
const $toast = useToast(); const $toast = useToast();
$toast.error( $toast.error(
{ {
component: ErrorToast, component: CustomToast,
props: { props: {
message: error.message || error, message: error.message || error,
isReport: !disableExternal && displayReport, isReport: !disableExternal && displayReport,
@ -81,7 +88,11 @@ app.provide("$showError", (error, displayReport = true) => {
reportText: i18n.global.t("buttons.reportIssue"), reportText: i18n.global.t("buttons.reportIssue"),
}, },
}, },
{ ...toastConfig, timeout: 0 } {
...toastConfig,
timeout: 0,
rtl: rtlLanguages.includes(i18n.global.locale),
}
); );
}); });