From 415c582c00ea29750d6f446e08bb141472c9a322 Mon Sep 17 00:00:00 2001 From: Tixie Date: Sat, 22 Feb 2020 01:59:26 +0100 Subject: [PATCH] add context menu --- package-lock.json | 5 ++ package.json | 1 + src/assets/scss/5-modules/context-menu.scss | 63 +++++++++++++++++++++ src/assets/scss/5-modules/track.scss | 3 +- src/assets/scss/style.scss | 1 + src/components/ContextMenu.svelte | 3 + src/components/Controls.svelte | 9 ++- src/components/PopperMenu.svelte | 55 ++++++++++++++++++ src/components/Queue.svelte | 24 ++++++-- 9 files changed, 156 insertions(+), 8 deletions(-) create mode 100644 src/assets/scss/5-modules/context-menu.scss create mode 100644 src/components/ContextMenu.svelte create mode 100644 src/components/PopperMenu.svelte diff --git a/package-lock.json b/package-lock.json index 2f167c2..f858208 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2650,6 +2650,11 @@ "physical-cpu-count": "^2.0.0" } }, + "@popperjs/core": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.0.6.tgz", + "integrity": "sha512-zj7Gw8QC4jmR92eKUvtrZUEpl2ypRbq+qlE4pwf9n2hnUO9BOAcWUs4/Ht+gNIbFt98xtqhLvccdCfD469MzpQ==" + }, "@types/q": { "version": "1.5.2", "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.2.tgz", diff --git a/package.json b/package.json index 015a7a5..dcaa948 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "typescript": "^3.8.2" }, "dependencies": { + "@popperjs/core": "^2.0.6", "core-js-pure": "^3.6.4", "date-fns": "^2.9.0", "get-urls": "^9.2.0", diff --git a/src/assets/scss/5-modules/context-menu.scss b/src/assets/scss/5-modules/context-menu.scss new file mode 100644 index 0000000..9496d73 --- /dev/null +++ b/src/assets/scss/5-modules/context-menu.scss @@ -0,0 +1,63 @@ +/* ----------------------------------------------------------- */ +/* == context menu module */ +/* ----------------------------------------------------------- */ + +/* Overlay +-------------------------------------------------------------- */ + +.contextMenu__overlay { + position: fixed; + top: 0; + left: 0; + z-index: 10; + display: none; + width: 100%; + height: 100%; +} + +.contextMenu__overlay.active { + display: block; +} + +/* Menu +-------------------------------------------------------------- */ + +.contextMenu { + z-index: 10; + visibility: hidden; + overflow: hidden; + min-width: 15rem; + border-radius: .3rem; + background-color: $color-primary; + color: $color-light-text; + opacity: 0; +} + +.contextMenu.active { + visibility: visible; + opacity: 1; +} + +.contextMenu__item, +.contextMenu__item:link, +.contextMenu__item:visited { + display: block; + padding: 1.2rem 2rem; + width: 100%; + border: none; + border-radius: 0; + background: none; + color: $color-light-text; + text-align: left; + text-decoration: none; + font-weight: 600; + font-size: 1.4rem; + cursor: pointer; + transition: .1s all; +} + +.contextMenu__item:hover, +.contextMenu__item:active, +.contextMenu__item:focus { + background-color: $color-secondary; +} diff --git a/src/assets/scss/5-modules/track.scss b/src/assets/scss/5-modules/track.scss index 2ceb015..e2c6fa8 100644 --- a/src/assets/scss/5-modules/track.scss +++ b/src/assets/scss/5-modules/track.scss @@ -5,6 +5,7 @@ .track { position: relative; display: flex; + margin-right: -1rem; padding: 1rem 0; } @@ -28,6 +29,7 @@ .track__main { flex-grow: 1; min-width: 0; + cursor: pointer; } .track__title { @@ -53,7 +55,6 @@ display: flex; align-items: center; flex-shrink: 0; - margin-right: -1rem; margin-left: 1rem; padding: 1rem; border: none; diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss index 0f8d2bd..75d5661 100755 --- a/src/assets/scss/style.scss +++ b/src/assets/scss/style.scss @@ -69,6 +69,7 @@ @import "5-modules/controls"; @import "5-modules/queue"; @import "5-modules/track"; +@import "5-modules/context-menu"; // -------------------------------------------------------------- diff --git a/src/components/ContextMenu.svelte b/src/components/ContextMenu.svelte new file mode 100644 index 0000000..6751e4d --- /dev/null +++ b/src/components/ContextMenu.svelte @@ -0,0 +1,3 @@ + +Link to toot +Link to media \ No newline at end of file diff --git a/src/components/Controls.svelte b/src/components/Controls.svelte index 9071ee5..550b615 100644 --- a/src/components/Controls.svelte +++ b/src/components/Controls.svelte @@ -24,7 +24,12 @@
- + + +
+ +
+
@@ -35,6 +40,8 @@ import Prev from '/components/icons/controls/Prev' import Next from '/components/icons/controls/Next' import IconMenu from '/components/icons/Menu' + import Popper from '/components/PopperMenu' + import ContextMenu from '/components/ContextMenu' const paused = getContext('paused') const canPrevious = getContext('canPrevious') diff --git a/src/components/PopperMenu.svelte b/src/components/PopperMenu.svelte new file mode 100644 index 0000000..6e3b761 --- /dev/null +++ b/src/components/PopperMenu.svelte @@ -0,0 +1,55 @@ + openMenu()}> + + + + + +
closeMenu()}>
+
+ + No content + +
+ + \ No newline at end of file diff --git a/src/components/Queue.svelte b/src/components/Queue.svelte index 6cebbbb..3aafc64 100644 --- a/src/components/Queue.svelte +++ b/src/components/Queue.svelte @@ -1,8 +1,8 @@
Next song
-
select($next)}> -
+
+
select($next)}>
{#if $next}{$next.media.title}{/if}
@@ -14,7 +14,12 @@
{#if $next} - + + +
+ +
+ {/if}
@@ -23,15 +28,20 @@
History
{#each history as track} -
select(track)}> -
+
+
select(track)}>
{track.media.title}
shared by {track.referer.username} •
- + + +
+ +
+
{/each} {#if history.length === 0} @@ -49,6 +59,8 @@ import { getContext } from 'svelte' import DistanceDate from '/components/DistanceDate' import IconMenu from '/components/icons/Menu' + import Popper from '/components/PopperMenu' + import ContextMenu from '/components/ContextMenu' const current = getContext('current') const enqueueing = getContext('enqueueing')