mirror of
https://github.com/Dvorinka/swingmusic-extended.git
synced 2026-06-04 04:23:01 +00:00
redesign toast notifications
This commit is contained in:
geoffrey45
committed by
Mungai Njoroge
Mungai Njoroge
parent
11951e396a
commit
97db706186
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" width="28px" height="28px">
|
||||
<g id="surface79322138">
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 22.574219 4.953125 C 22.980469 5.214844 23.09375 5.757812 22.832031 6.164062 L 12.0625 22.789062 C 11.914062 23.019531 11.664062 23.164062 11.390625 23.183594 C 11.371094 23.1875 11.347656 23.1875 11.328125 23.1875 C 11.078125 23.1875 10.835938 23.078125 10.667969 22.890625 L 5.246094 16.726562 C 4.925781 16.363281 4.960938 15.808594 5.324219 15.488281 C 5.6875 15.171875 6.238281 15.207031 6.558594 15.570312 L 11.21875 20.867188 L 21.363281 5.210938 C 21.625 4.804688 22.167969 4.691406 22.574219 4.953125 Z M 22.574219 4.953125 "/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 835 B |
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" width="28px" height="28px">
|
||||
<g id="surface79432257">
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 14 5.214844 C 13.210938 5.214844 12.5 5.625 12.105469 6.308594 L 4.253906 19.90625 C 3.859375 20.589844 3.859375 21.410156 4.253906 22.09375 C 4.652344 22.777344 5.359375 23.1875 6.148438 23.1875 L 21.851562 23.1875 C 22.640625 23.1875 23.347656 22.777344 23.746094 22.09375 C 24.140625 21.410156 24.140625 20.589844 23.746094 19.90625 L 15.894531 6.308594 C 15.5 5.625 14.789062 5.214844 14 5.214844 Z M 14 6.964844 C 14.074219 6.964844 14.265625 6.988281 14.378906 7.183594 L 22.230469 20.78125 C 22.34375 20.980469 22.269531 21.152344 22.230469 21.21875 C 22.191406 21.285156 22.078125 21.4375 21.851562 21.4375 L 6.148438 21.4375 C 5.921875 21.4375 5.808594 21.285156 5.769531 21.21875 C 5.730469 21.152344 5.65625 20.980469 5.769531 20.78125 L 13.621094 7.183594 C 13.734375 6.988281 13.925781 6.964844 14 6.964844 Z M 13.992188 10.058594 C 13.691406 10.058594 13.445312 10.152344 13.253906 10.335938 C 13.066406 10.523438 12.976562 10.753906 12.984375 11.03125 L 13.125 16.214844 C 13.140625 16.792969 13.433594 17.085938 14.007812 17.085938 C 14.5625 17.085938 14.84375 16.792969 14.851562 16.214844 L 15.015625 11.042969 C 15.023438 10.765625 14.929688 10.53125 14.730469 10.34375 C 14.535156 10.152344 14.289062 10.058594 13.992188 10.058594 Z M 14 18.238281 C 13.328125 18.238281 12.902344 18.808594 12.902344 19.289062 C 12.902344 19.769531 13.3125 20.339844 14 20.339844 C 14.6875 20.339844 15.097656 19.800781 15.097656 19.289062 C 15.097656 18.777344 14.671875 18.238281 14 18.238281 Z M 14 18.238281 "/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" width="28px" height="28px">
|
||||
<g id="surface79671233">
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 14 4.375 C 8.683594 4.375 4.375 8.683594 4.375 14 C 4.375 19.316406 8.683594 23.625 14 23.625 C 19.316406 23.625 23.625 19.316406 23.625 14 C 23.625 8.683594 19.316406 4.375 14 4.375 Z M 14 6.125 C 18.347656 6.125 21.875 9.652344 21.875 14 C 21.875 18.347656 18.347656 21.875 14 21.875 C 9.652344 21.875 6.125 18.347656 6.125 14 C 6.125 9.652344 9.652344 6.125 14 6.125 Z M 14 9.1875 C 13.273438 9.1875 12.6875 9.773438 12.6875 10.5 C 12.6875 11.226562 13.273438 11.8125 14 11.8125 C 14.726562 11.8125 15.3125 11.226562 15.3125 10.5 C 15.3125 9.773438 14.726562 9.1875 14 9.1875 Z M 14 13.125 C 13.515625 13.125 13.125 13.515625 13.125 14 L 13.125 18.375 C 13.125 18.859375 13.515625 19.25 14 19.25 C 14.484375 19.25 14.875 18.859375 14.875 18.375 L 14.875 14 C 14.875 13.515625 14.484375 13.125 14 13.125 Z M 14 13.125 "/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" width="28px" height="28px">
|
||||
<g id="surface79451713">
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 22.703125 15.355469 C 22.628906 15.773438 22.449219 16.152344 22.203125 16.476562 C 22.667969 17.058594 22.851562 17.796875 22.671875 18.554688 C 22.550781 19.082031 22.265625 19.539062 21.886719 19.886719 C 22.15625 20.265625 22.3125 20.71875 22.3125 21.203125 C 22.3125 22.542969 21.121094 23.59375 19.597656 23.59375 L 13.121094 23.613281 C 11.023438 23.613281 9.042969 22.796875 7.558594 21.316406 C 6.070312 19.828125 5.25 17.851562 5.25 15.75 C 5.25 11.828125 6.660156 10.425781 7.59375 9.5 L 7.695312 9.398438 C 7.988281 9.101562 8.527344 8.707031 9.210938 8.203125 C 10.59375 7.179688 12.914062 5.464844 13.339844 4.308594 C 13.683594 3.382812 14.109375 2.230469 15.75 2.230469 C 16.480469 2.230469 17.152344 2.683594 17.550781 3.445312 C 17.929688 4.175781 18.496094 6.132812 16.472656 9.625 L 19.757812 9.625 C 21.167969 9.625 22.3125 10.699219 22.3125 12.015625 C 22.3125 12.4375 22.191406 12.832031 21.984375 13.175781 C 22.574219 13.746094 22.851562 14.519531 22.703125 15.355469 Z M 19.597656 21.84375 C 20.121094 21.84375 20.5625 21.550781 20.5625 21.203125 C 20.5625 20.851562 20.203125 20.5625 19.757812 20.5625 L 17.9375 20.5625 C 17.453125 20.5625 17.0625 20.171875 17.0625 19.6875 C 17.0625 19.203125 17.453125 18.8125 17.9375 18.8125 L 20.226562 18.8125 C 20.609375 18.8125 20.894531 18.472656 20.96875 18.15625 C 21.015625 17.949219 21 17.679688 20.71875 17.441406 C 20.558594 17.476562 20.394531 17.5 20.226562 17.5 L 17.9375 17.5 C 17.453125 17.5 17.0625 17.109375 17.0625 16.625 C 17.0625 16.140625 17.453125 15.75 17.9375 15.75 L 20.226562 15.75 C 20.617188 15.75 20.917969 15.394531 20.980469 15.050781 C 21.046875 14.667969 20.820312 14.417969 20.542969 14.261719 C 20.25 14.355469 19.933594 14.40625 19.597656 14.40625 L 17.945312 14.4375 C 17.46875 14.4375 17.070312 14.054688 17.0625 13.578125 C 17.054688 13.09375 17.4375 12.695312 17.921875 12.6875 L 19.582031 12.65625 C 20.121094 12.65625 20.5625 12.363281 20.5625 12.015625 C 20.5625 11.664062 20.203125 11.375 19.757812 11.375 L 14.875 11.375 C 14.550781 11.375 14.25 11.195312 14.097656 10.902344 C 13.949219 10.613281 13.972656 10.265625 14.15625 10 C 16.121094 7.1875 16.417969 5.234375 16.039062 4.339844 C 15.921875 4.058594 15.777344 3.984375 15.742188 3.976562 C 15.386719 3.976562 15.328125 3.976562 14.984375 4.917969 C 14.375 6.5625 11.992188 8.324219 10.25 9.609375 C 9.675781 10.035156 9.136719 10.433594 8.929688 10.636719 L 8.828125 10.738281 C 8.015625 11.550781 7 12.554688 7 15.75 C 7 17.386719 7.636719 18.921875 8.792969 20.078125 C 9.949219 21.230469 11.488281 21.863281 13.117188 21.863281 Z M 19.597656 21.84375 "/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28" width="28px" height="28px">
|
||||
<g id="surface79447169">
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 17.703125 16.027344 C 19.269531 17.59375 20.132812 19.679688 20.125 21.898438 C 20.121094 22.855469 19.332031 23.625 18.375 23.625 L 9.625 23.625 C 8.667969 23.625 7.878906 22.855469 7.875 21.898438 C 7.867188 19.679688 8.730469 17.597656 10.296875 16.027344 L 11.449219 14.875 C 11.683594 14.640625 11.8125 14.332031 11.8125 14 C 11.8125 13.667969 11.683594 13.359375 11.449219 13.125 L 10.261719 11.9375 C 8.722656 10.398438 7.875 8.351562 7.875 6.175781 C 7.875 5.164062 8.660156 4.375 9.621094 4.375 L 18.378906 4.375 C 19.339844 4.375 20.125 5.164062 20.125 6.132812 C 20.125 8.351562 19.277344 10.398438 17.738281 11.9375 L 16.550781 13.125 C 16.316406 13.359375 16.1875 13.667969 16.1875 14 C 16.1875 14.332031 16.316406 14.640625 16.550781 14.875 Z M 18.023438 21.121094 L 14.605469 17.859375 C 14.265625 17.535156 13.734375 17.535156 13.394531 17.859375 L 9.976562 21.121094 C 9.691406 21.394531 9.886719 21.875 10.28125 21.875 L 17.71875 21.875 C 18.113281 21.875 18.308594 21.394531 18.023438 21.121094 Z M 18.023438 21.121094 "/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -2,11 +2,6 @@
|
||||
"./scrollbars.scss", "./state.scss", "./variants.scss", "./basic.scss",
|
||||
"./search-tabheaders.scss";
|
||||
|
||||
:root {
|
||||
--separator: #ffffff46;
|
||||
--green: #4ad168;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@@ -62,7 +62,6 @@ const artist = useArtistPageStore();
|
||||
position: absolute;
|
||||
opacity: 0.25;
|
||||
margin-right: -1rem;
|
||||
|
||||
}
|
||||
.artist-page-header {
|
||||
height: 18rem;
|
||||
|
||||
@@ -1,16 +1,12 @@
|
||||
<template>
|
||||
<div class="toasts" v-if="notifStore.notifs">
|
||||
<div
|
||||
class="new-notif rounded"
|
||||
:class="[
|
||||
{ 'notif-error': notif.type == NotifType.Error },
|
||||
{
|
||||
'notif-info': notif.type == NotifType.Info,
|
||||
},
|
||||
]"
|
||||
class="new-notif rounded-sm"
|
||||
:class="notif.type"
|
||||
v-for="notif in notifStore.notifs"
|
||||
>
|
||||
<div class="ellip">{{ notif.text }}</div>
|
||||
<component :is="getSvg(notif.type)" class="notif-icon" />
|
||||
<div class="notif-text ellip">{{ notif.text }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -18,7 +14,25 @@
|
||||
<script setup lang="ts">
|
||||
import { useNotifStore, NotifType } from "../stores/notification";
|
||||
|
||||
import ErrorSvg from "../assets/icons/toast/error.svg";
|
||||
import InfoSvg from "../assets/icons/toast/info.svg";
|
||||
import SuccessSvg from "../assets/icons/toast/ok.svg";
|
||||
import WorkingSvg from "../assets/icons/toast/working.svg";
|
||||
|
||||
const notifStore = useNotifStore();
|
||||
|
||||
function getSvg(notif: NotifType) {
|
||||
switch (notif) {
|
||||
case NotifType.Error:
|
||||
return ErrorSvg;
|
||||
case NotifType.Info:
|
||||
return InfoSvg;
|
||||
case NotifType.Success:
|
||||
return SuccessSvg;
|
||||
case NotifType.Working:
|
||||
return WorkingSvg;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.toasts {
|
||||
@@ -29,27 +43,48 @@ const notifStore = useNotifStore();
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
gap: $small;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.new-notif {
|
||||
width: 20rem;
|
||||
height: 3.5rem;
|
||||
bottom: 2rem;
|
||||
padding: $small;
|
||||
background: linear-gradient(to top right, #021b79, #0575e6);
|
||||
height: 4rem;
|
||||
background-color: $gray;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
align-items: center;
|
||||
box-shadow: 0px 0px 2rem rgb(0, 0, 0);
|
||||
font-size: .85rem;
|
||||
box-shadow: 0px 0px 2rem rgba(0, 0, 0, 0.466);
|
||||
font-size: 0.85rem;
|
||||
padding: 1rem;
|
||||
|
||||
grid-template-columns: 2rem 3fr;
|
||||
gap: $small;
|
||||
|
||||
.notif-text {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.notif-error {
|
||||
background: linear-gradient(to top right, #cf0b25, #e60518);
|
||||
.new-notif.error {
|
||||
$bg: rgb(236, 31, 31);
|
||||
$bg1: rgba(236, 31, 31, 0.15);
|
||||
background-image: linear-gradient(275deg, $bg, $bg1 74%);
|
||||
}
|
||||
|
||||
.notif-info {
|
||||
background: linear-gradient(to top right, $gray4, $gray3);
|
||||
.new-notif.info {
|
||||
$bg: rgb(28, 102, 238);
|
||||
$bg1: rgba(31, 144, 236, 0.15);
|
||||
background-image: linear-gradient(275deg, $bg, $bg1 74%);
|
||||
}
|
||||
|
||||
.new-notif.success {
|
||||
$bg: rgb(5, 167, 53);
|
||||
$bg1: rgba(5, 167, 54, .15);
|
||||
background-image: linear-gradient(275deg, $bg, $bg1 74%);
|
||||
}
|
||||
|
||||
.new-notif.working {
|
||||
$bg: $gray4;
|
||||
$bg1: rgba(128, 128, 128, 0.151);
|
||||
background-image: linear-gradient(275deg, $bg, $bg1 74%);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<button class="playbtnrect" @click="usePlayFrom(source, useQStore, store)">
|
||||
<button class="playbtnrect shadow-sm" @click="usePlayFrom(source, useQStore, store)">
|
||||
<playBtnSvg />
|
||||
<div class="text">Play</div>
|
||||
</button>
|
||||
|
||||
@@ -8,9 +8,10 @@ export enum playSources {
|
||||
}
|
||||
|
||||
export enum NotifType {
|
||||
Success,
|
||||
Info,
|
||||
Error,
|
||||
Success = "success",
|
||||
Info = "info",
|
||||
Error = "error",
|
||||
Working = "working",
|
||||
}
|
||||
|
||||
export enum FromOptions {
|
||||
|
||||
@@ -87,10 +87,19 @@ const getAlbumsFromArtist = async (
|
||||
return [];
|
||||
};
|
||||
|
||||
async function getAlbumTracks(albumhash: string): Promise<Track[]> {
|
||||
const { data } = await useAxios({
|
||||
url: albumUrl + `/${albumhash}a/` + "tracks",
|
||||
get: true,
|
||||
});
|
||||
|
||||
return data.tracks;
|
||||
}
|
||||
|
||||
export {
|
||||
getAlbumData as getAlbumTracks,
|
||||
getAlbumData as getAlbum,
|
||||
getAlbumTracks,
|
||||
getAlbumArtists,
|
||||
getAlbumBio,
|
||||
getAlbumsFromArtist,
|
||||
};
|
||||
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
import { playSources } from "@/composables/enums";
|
||||
import { NotifType, playSources } from "@/composables/enums";
|
||||
|
||||
import { useNotifStore } from "@/stores/notification";
|
||||
import useAStore from "@/stores/pages/album";
|
||||
import useArtistPageStore from "@/stores/pages/artist";
|
||||
import useFStore from "@/stores/pages/folder";
|
||||
import usePStore from "@/stores/pages/playlist";
|
||||
import useQStore from "@/stores/queue";
|
||||
import useSettingsStore from "@/stores/settings";
|
||||
import { useNotifStore } from "@/stores/notification";
|
||||
|
||||
import { getArtistTracks } from "./fetch/artists";
|
||||
import { getAlbumTracks } from "./fetch/album";
|
||||
import { getArtistTracks } from "./fetch/artists";
|
||||
|
||||
const queue = useQStore;
|
||||
const folder = useFStore;
|
||||
@@ -97,8 +97,14 @@ async function playFromAlbumCard(
|
||||
) {
|
||||
const qu = queue();
|
||||
|
||||
const tracks = await getAlbumTracks(albumhash, useNotifStore);
|
||||
qu.playFromAlbum(albumname, albumhash, tracks.tracks);
|
||||
const tracks = await getAlbumTracks(albumhash);
|
||||
|
||||
if (tracks.length === 0) {
|
||||
useNotifStore().showNotification("Album tracks not found", NotifType.Error);
|
||||
return;
|
||||
}
|
||||
|
||||
qu.playFromAlbum(albumname, albumhash, tracks);
|
||||
qu.play();
|
||||
}
|
||||
|
||||
|
||||
@@ -7,10 +7,9 @@ import { FuseTrackOptions } from "@/composables/enums";
|
||||
import { maxAbumCards } from "@/stores/content-width";
|
||||
|
||||
import {
|
||||
getAlbumsFromArtist,
|
||||
getAlbumTracks,
|
||||
getAlbum, getAlbumsFromArtist
|
||||
} from "../../composables/fetch/album";
|
||||
import { Album, Artist, FuseResult, Track } from "../../interfaces";
|
||||
import { Album, FuseResult, Track } from "../../interfaces";
|
||||
import { useNotifStore } from "../notification";
|
||||
|
||||
interface Disc {
|
||||
@@ -62,7 +61,7 @@ export default defineStore("album", {
|
||||
* @param hash title of the album
|
||||
*/
|
||||
async fetchTracksAndArtists(hash: string) {
|
||||
const album = await getAlbumTracks(hash, useNotifStore);
|
||||
const album = await getAlbum(hash, useNotifStore);
|
||||
this.rawTracks = album.tracks;
|
||||
this.info = album.info;
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user