Publish develop branch

Author: cheap-glitch

README.md

@@ -1,10 +1,11 @@
+<p>&nbsp;</p>
 <p align="center">
-	<a href="https://fretboarder.app" target="_blank" rel="external nofollow noopener noreferrer">
+	<a href="https://fretboarder.app">
 		<img src="./docs/banner.png" alt="A white icon of a an acoustic guitar and a white text saying Fretboarder over a bright blue background.">
 	</a>
 </p>
 
-<p align="center">Ride your fretboard and take your guitar skills to the next level!&nbsp;&nbsp;🎸&nbsp;&nbsp;🤘</p>
+<p align="center">Ride your fretboard and take your guitar skills to the next level! 🤘</p>
 
 <img src="https://raw.githubusercontent.com/cheap-glitch/fretboarder/main/docs/screenshot.png" alt="A screenshot of the app in usage.">
 
@@ -16,20 +17,20 @@
 
 ## Highlights
 
-🎸&nbsp;&nbsp;&nbsp;**Customize the instrument**
+🎸 **Customize the instrument**
 
 Choose between a  variety of instruments (from ukulele to  11-string guitar) and
 tunings,  set  the  length  of  the fretboard,  and  switch  between  left-  and
 right-handed fretting.
 
-🎨&nbsp;&nbsp;&nbsp;**Overlay scales and arpeggios**
+🍰 **Overlay scales and arpeggios**
 
 The main feature  that distinguishes Fretboarder from other similar  apps is the
 ability to  display several sequences  of notes on  the same fretboard.  You can
 overlap scales  and arpeggios, display  their intersections and  select specific
 positions on the neck.
 
-💻&nbsp;&nbsp;&nbsp;**Use on any device**
+💻 **Use on any device**
 
 The UI has been designed to be simple and intuitive, and to work on both desktop
 and mobile devices. Dark mode included!
@@ -42,9 +43,7 @@ Contributions are welcomed! See [CONTRIBUTING.md](CONTRIBUTING.md).
 
 ## Supporting the app
 
-<a href="https://www.patreon.com/cheap_glitch" target="_blank" rel="external nofollow noopener noreferrer">
-	<img src="./docs/patreon-badge.png" alt="Become a patron">
-</a>
+<p><a href="https://www.patreon.com/cheap_glitch"><img src="https://c5.patreon.com/external/logo/become_a_patron_button@2x.png" width="160" alt="Become a patron!"></a></p>
 
 You can support my work on Fretboarder by donating on my [Patreon](https://www.patreon.com/cheap_glitch)
 or my [PayPal](https://paypal.me/CheapGlitch) page. Plenty of cool features are coming, such as:

docs/patreon-badge.png

@@ -32,18 +32,20 @@
     }
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.28",
-    "@fortawesome/free-brands-svg-icons": "^5.13.0",
-    "@fortawesome/vue-fontawesome": "^0.1.9",
+    "@fortawesome/fontawesome-svg-core": "^1.2.29",
+    "@fortawesome/free-brands-svg-icons": "^5.13.1",
+    "@fortawesome/vue-fontawesome": "^0.1.10",
     "@popperjs/core": "^2.4.2",
+    "@vue/composition-api": "^0.6.7",
     "core-js": "^3.6.5",
     "file-saver": "^2.0.2",
     "register-service-worker": "^1.7.1",
     "v-click-outside": "^3.0.1",
     "vue": "^2.6.11",
     "vue-css-modifiers": "^1.0.7",
     "vuex": "^3.4.0",
-    "vuex-pathify": "^1.4.1"
+    "vuex-pathify": "^1.4.1",
+    "vuex-plugin-save-state": "^1.0.0"
   },
   "optionalDependencies": {
     "@fortawesome/pro-regular-svg-icons": "^5.13.0",
@@ -53,26 +55,26 @@
     "@cheap-glitch/scss-mixins": "^1.0.1",
     "@cheap-glitch/scss-reset": "^1.0.0",
     "@cheap-glitch/vue-cli-plugin-fontawesome": "^1.0.8",
-    "@vue/cli-plugin-babel": "^4.4.4",
-    "@vue/cli-plugin-eslint": "^4.4.4",
-    "@vue/cli-plugin-unit-mocha": "^4.4.4",
-    "@vue/cli-plugin-vuex": "^4.4.4",
-    "@vue/cli-service": "^4.4.4",
+    "@vue/cli-plugin-babel": "^4.4.6",
+    "@vue/cli-plugin-eslint": "^4.4.6",
+    "@vue/cli-plugin-unit-mocha": "^4.4.6",
+    "@vue/cli-plugin-vuex": "^4.4.6",
+    "@vue/cli-service": "^4.4.6",
     "@vue/test-utils": "^1.0.3",
     "babel-eslint": "^10.1.0",
     "chai": "^4.2.0",
-    "eslint": "^7.2.0",
+    "eslint": "^7.3.1",
     "eslint-plugin-smarter-tabs": "^1.1.1",
     "eslint-plugin-vue": "^6.2.2",
     "fibers": "^5.0.0",
     "nodemon": "^2.0.4",
     "nyc": "^15.1.0",
     "pug": "^3.0.0",
     "pug-plain-loader": "^1.0.0",
-    "sass": "^1.26.8",
+    "sass": "^1.26.9",
     "sass-loader": "^8.0.2",
     "sass-mq": "^5.0.1",
-    "vue-cli-plugin-sitemap": "^2.1.2",
+    "vue-cli-plugin-sitemap": "^2.2.0",
     "vue-template-compiler": "^2.6.11",
     "webpack-bundle-analyzer": "^3.8.0"
   }

package-lock.json

@@ -8,6 +8,9 @@
 	<head>
 		<meta charset="utf-8">
 
+		<!-- Page title -->
+		<title><%- VUE_APP_TITLE %></title>
+
 		<!-- Emoji favicon -->
 		<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎸</text></svg>">
 
@@ -33,8 +36,6 @@
 		<meta name="twitter:title"         content="<%- VUE_APP_TITLE %>">
 		<meta name="twitter:description"   content="<%- VUE_APP_DESCRIPTION %>">
 
-		<title><%- VUE_APP_TITLE %></title>
-
 		<style>
 			@keyframes spin {
 				from { transform: rotate(  0deg); }
@@ -57,6 +58,17 @@
 
 				animation: spin 800ms ease-in-out infinite;
 			}
+
+			@media (prefers-color-scheme: dark)
+			{
+				html, body {
+					background-color: #171e29;
+				}
+
+				#spinner {
+					color: #50596c;
+				}
+			}
 		</style>
 	</head>
 	<body>

package.json

@@ -20,31 +20,30 @@ div.App#app(:style="colorscheme")
 				)
 			h1.logo__text Fretboarder
 
-		div.header__settings(v-if="!isMobileDevice")
-			//- Desktop settings
-			FretboardTools
+		//- Settings (desktop)
+		FretboardTools(v-if="!isMobileDevice")
 
 			//- Dark mode toggle switch
-			button.dark-mode-switch(
+			//- button.dark-mode-switch(
 				v-mods="{ isDarkModeOn }"
 				@click="$store.commit('toggle.isDarkModeOn')"
 				)
 				fa-icon.dark-mode-switch__sun(:icon="['fas', 'sun']")
 				div.dark-mode-switch__toggle
 				fa-icon.dark-mode-switch__moon(:icon="['fas', 'moon']")
 
-		//- Sub-pages links
-		nav.sublinks(v-if="isMobileDevice")
-			div.sublinks__item(v-show="subpage == 'fretboard'" @click.left="subpage = 'sequences'"): fa-icon(:icon="['far', 'list-music']")
-			div.sublinks__item(v-show="subpage == 'fretboard'" @click.left="subpage =     'tools'"): fa-icon(:icon="['far', 'cog']")
-			div.sublinks__item(v-show="subpage != 'fretboard'" @click.left="subpage = 'fretboard'"): fa-icon(:icon="['far', 'arrow-left']")
+		//- Sub-pages links (mobile)
+		nav.header__sublinks(v-if="isMobileDevice")
+			div.header__sublinks__item(v-show="subpage == 'fretboard'" @click.left="subpage = 'sequences'"): fa-icon(:icon="['far', 'list-music']")
+			div.header__sublinks__item(v-show="subpage == 'fretboard'" @click.left="subpage =     'tools'"): fa-icon(:icon="['far', 'cog']")
+			div.header__sublinks__item(v-show="subpage != 'fretboard'" @click.left="subpage = 'fretboard'"): fa-icon(:icon="['far', 'arrow-left']")
 
 	//----------------------------------------------------------------------
 	//- Body
 	//----------------------------------------------------------------------
 	div#canvas-wrapper(v-show="false")
 
-	//- Tools
+	//- Settings (mobile)
 	transition(name="fade"): FretboardTools(v-if="isMobileDevice && subpage == 'tools'")
 
 	//- Fretboard
@@ -275,12 +274,6 @@ export default {
 	}
 }
 
-.header__settings {
-	display: flex;
-	align-items: center;
-	@include space-children-h(20px);
-}
-
 .logo__icon {
 	font-size: 18px;
 
@@ -351,12 +344,12 @@ export default {
 	}
 }
 
-.sublinks {
+.header__sublinks {
 	display: flex;
 	justify-content: flex-end;
 }
 
-.sublinks__item {
+.header__sublinks__item {
 	@include center-content;
 	@include circle(42px);
 

public/index.html

@@ -45,10 +45,13 @@ div.FretboardSequencesItem
 		:style="{ borderColor: color, backgroundColor: color }"
 		v-mods="{ isOpen }"
 
-		@click.left="isOpen = !isOpen"
+		@click.left="isOpenedByUser = !isOpenedByUser"
 		)
 		p {{ infos }}
-		fa-icon(:icon="['far', isOpen ? 'minus' : 'ellipsis-v']")
+		fa-icon(
+			v-show="nbSequences > 1"
+			:icon="['far', isOpen ? 'minus' : 'ellipsis-v']"
+			)
 
 	//- Settings & tools
 	transition(name="fade"): div.settings(
@@ -195,7 +198,7 @@ export default {
 
 	data() {
 		return {
-			isOpen: false,
+			isOpenedByUser: false,
 		}
 	},
 
@@ -215,6 +218,10 @@ export default {
 		{
 			return ('positions' in models[this.model]);
 		},
+		isOpen()
+		{
+			return this.isOpenedByUser || this.nbSequences == 1;
+		},
 
 		...get([
 			'isMobileDevice',

src/App.vue

@@ -84,8 +84,8 @@ div.FretboardTools
 				)
 
 			//- Possible options for the information displayed on the notes:
-				* single sequence:    none/note name/interval (select menu)
-				* multiple sequences: none/note name          (toggle button)
+			//-   * single sequence:    none/note name/interval (select menu)
+			//-   * multiple sequences: none/note name          (toggle button)
 			VSelect(
 				v-if="displayedSequences.length <= 1"
 
@@ -102,17 +102,6 @@ div.FretboardTools
 				@click="$store.commit('fretboard/toggle.isShowingNoteNames')"
 				)
 
-			//- Switch to dark mode
-			VButton(
-				v-if="isMobileDevice"
-
-				icon="moon"
-				title="Dark mode"
-
-				:is-active="isDarkModeOn"
-				@click="$store.commit('toggle.isDarkModeOn')"
-				)
-
 	//----------------------------------------------------------------------
 	//- Export menu
 	//----------------------------------------------------------------------
@@ -139,6 +128,16 @@ div.FretboardTools
 						@click=`exportFretboard('${format}')`
 						)
 
+	//----------------------------------------------------------------------
+	//- Colorscheme setting
+	//----------------------------------------------------------------------
+	VTextSelect(
+		:options="{ light: 'Light mode', dark: 'Dark mode', system: 'System colors' }"
+		:icon="isDarkModeOn ? 'moon' : 'sun'"
+
+		v-model="darkModeSetting"
+		)
+
 </template>
 <!--}}}-->
 
@@ -172,6 +171,9 @@ export default {
 		{
 			return mapObjectToObject(tunings[this.instrument], tuning => tuningsNames[tuning]);
 		},
+		...sync([
+			'darkModeSetting',
+		]),
 		...sync('fretboard', [
 			'instrument',
 			'tuning',

src/components/FretboardSequencesItem.vue

@@ -130,7 +130,6 @@ export default {
 }
 
 .icon,
-.icon > *,
 .title {
 	cursor: pointer;
 

src/components/FretboardTools.vue

@@ -23,7 +23,7 @@ div.VSelect
 		:value="value"
 		:disabled="isDisabled"
 
-		@change="selectOption"
+		@change="$emit('change', $event.target.value)"
 		)
 		//- Grouped options
 		template(v-if="Array.isArray(options)")
@@ -54,7 +54,9 @@ div.VSelect
 <!--{{{ JavaScript -->
 <script>
 
-import { formatOrdinalSuffix } from '@/modules/text'
+import { toRef }                  from '@vue/composition-api'
+
+import { useSelectedOptionLabel } from '@/hooks/useSelectedOptionLabel'
 
 export default {
 	name: 'VSelect',
@@ -83,33 +85,15 @@ export default {
 		},
 	},
 
-	data() {
+	setup(props)
+	{
+		const { select, selectedOptionLabel } = useSelectedOptionLabel(toRef(props, 'value'), props.labelFormatter);
+
 		return {
-			selectedOptionLabel: '',
+			select,
+			selectedOptionLabel,
 		}
 	},
-
-	watch: {
-		value: 'updateSelectedOptionLabel',
-	},
-
-	mounted()
-	{
-		this.updateSelectedOptionLabel();
-	},
-
-	methods: {
-		selectOption(event)
-		{
-			this.$emit('change', event.target.value);
-			this.updateSelectedOptionLabel();
-		},
-		async updateSelectedOptionLabel()
-		{
-			await this.$nextTick();
-			this.selectedOptionLabel = this.labelFormatter(this.value, formatOrdinalSuffix(this.$refs.select.selectedOptions[0].label));
-		},
-	}
 }
 
 </script>
@@ -150,7 +134,7 @@ export default {
 	color: var(--color--text);
 	background-color: var(--color--bg--accent);
 
-	.select:not(:focus):not(:disabled):hover + & {
+	.select:not(:disabled):hover + & {
 		border-color: var(--color--hover);
 		background-color: var(--color--bg--highlight);
 	}