Publish develop branch

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:

package.json

@@ -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"
  }

public/index.html

@@ -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>

src/App.vue

@@ -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);
 

src/components/FretboardSequencesItem.vue

@@ -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/components/FretboardTools.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/VButton.vue

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

src/components/VSelect.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);
  }