Skip to content

Commit 94c5264

Browse files
devmountdevmount
authored
➕ merge pull request #139 from devmount/fix-song-notes
Song Notes
2 parents 094cef9 + 6b8b020 commit 94c5264

11 files changed

Lines changed: 171 additions & 72 deletions

File tree

‎src/assets/global.scss‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -790,20 +790,23 @@ a {
790790
background: rgba($dark-color, .75);
791791
}
792792
&.modal-lg {
793+
793794
.modal-container {
794-
max-width: 100vw;
795795
max-height: 100vh;
796796
}
797-
797+
&.modal-wide .modal-container {
798+
max-width: 100vw;
799+
}
798800
&.modal-full {
799801
padding: 0;
800802

801-
.modal-overlay {
803+
> .modal-overlay {
802804
background: $black-color;
803805
}
804-
.modal-container {
806+
> .modal-container {
805807
background: $black-color;
806808
height: 100vh;
809+
max-width: 100vw;
807810

808811
.modal-footer {
809812
position: absolute;

‎src/locales/de.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,7 @@
139139
"key": {
140140
"B": "B",
141141
"F": "F",
142+
"I": "I",
142143
"K": "K",
143144
"L": "L",
144145
"P": "P",
@@ -169,6 +170,7 @@
169170
"newSong": "Neuer Song",
170171
"resetPassword": "Passwort zurücksetzen",
171172
"signUp": "Registrieren",
173+
"songInfo": "Song Informationen",
172174
"songSyntaxCheatsheet": "Song-Syntax Spickzettel",
173175
"tags": "Tags",
174176
"translations": "Übersetzungen"
@@ -199,7 +201,7 @@
199201
"exampleSongAuthors": "z.B. Edwin Othello Excell | John Newton",
200202
"exampleSongCcli": "z.B. 22025",
201203
"exampleSongContent": "Songtext mit Akkorden und Markern, z.B.:\n\n--v\n G C \nDas ist die Strophe\nD G \nEinfach ein Beispieltext\n\n--c\nD C \nDas ist der Refrain\nD C G \nEinfach ein Beispieltext\n\n--b\n Em \nDas ist die Bridge\nC D \nEinfach ein Beispieltext",
202-
"exampleSongNote": "Allgemeine Notizen, z.B. Capo 3",
204+
"exampleSongNote": "Allgemeine Notizen, z.B. Capo 3 oder Bewegungen für Kinder",
203205
"exampleSongPublisher": "z.B. Public Domain",
204206
"exampleSongSubtitle": "z.B. Wie süß der Klang",
205207
"exampleSongTitle": "z.B. Erstaunliche Gnade",
@@ -378,6 +380,7 @@
378380
"chordsHide": "Akkorde ausblenden",
379381
"chordsShow": "Akkorde zeigen",
380382
"clear": "Suche und Filter zurücksetzen",
383+
"infoSongData": "Song Informationen anzeigen",
381384
"keyReset": "Auf Original-Tonart zurücksetzen",
382385
"lightModeOnOff": "Hell-Modus an / aus",
383386
"nextSlide": "Nächste Folie",

‎src/locales/en.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,7 @@
139139
"key": {
140140
"B": "B",
141141
"F": "F",
142+
"I": "I",
142143
"K": "K",
143144
"L": "L",
144145
"P": "P",
@@ -169,6 +170,7 @@
169170
"newSong": "New Song",
170171
"resetPassword": "Reset Password",
171172
"signUp": "Sign Up",
173+
"songInfo": "Song Information",
172174
"songSyntaxCheatsheet": "Song Syntax Cheatsheet",
173175
"tags": "Tags",
174176
"translations": "Translations"
@@ -199,7 +201,7 @@
199201
"exampleSongAuthors": "e.g. Edwin Othello Excell | John Newton ",
200202
"exampleSongCcli": "e.g. 22025",
201203
"exampleSongContent": "song text with chords and markers, e.g.:\n\n--v\n G C \nThis is the verse text\n D G \nJust an example text\n\n--c\n D C \nThis is the chorus text\n D C G \nJust an example text\n\n--b\n Em \nThis is the bridge text\n C D \nJust an example text",
202-
"exampleSongNote": "general notes, e.g. capo 3",
204+
"exampleSongNote": "general notes, e.g. capo 3 or movements for kids",
203205
"exampleSongPublisher": "e.g. Public Domain",
204206
"exampleSongSubtitle": "e.g. How sweet the sound",
205207
"exampleSongTitle": "e.g. Amazing Grace",
@@ -378,6 +380,7 @@
378380
"chordsHide": "Hide Chords",
379381
"chordsShow": "Show Chords",
380382
"clear": "Clear search and filter",
383+
"infoSongData": "Show Song Information",
381384
"keyReset": "Reset to original key",
382385
"lightModeOnOff": "Light Mode on / off",
383386
"nextSlide": "Next Slide",

‎src/modals/InfoSongData.vue‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<template>
2+
<div class="modal modal-md" :class="{ active: active }">
3+
<a href="#" class="modal-overlay" aria-label="Close" @click.prevent="$emit('closed')"></a>
4+
<div class="modal-container">
5+
<div class="modal-header">
6+
<a href="#" class="btn btn-clear float-right" aria-label="Close" @click.prevent="$emit('closed')"></a>
7+
<div class="modal-title h5">{{ $t('modal.songInfo') }}</div>
8+
</div>
9+
<div class="modal-body">
10+
<div v-if="song.note">
11+
<div class="text-bold">{{ $t('field.note') }}</div>
12+
<p v-html="song.note"></p>
13+
</div>
14+
</div>
15+
<div class="modal-footer"></div>
16+
</div>
17+
</div>
18+
</template>
19+
20+
<script>
21+
export default {
22+
name: 'info-song-data',
23+
props: {
24+
active: Boolean,
25+
song: Object
26+
},
27+
}
28+
</script>

‎src/modals/SetlistPresent.vue‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
@keydown.left.exact="$refs.presentation.slidePrev()"
99
@keydown.down.exact="$refs.presentation.slideNext()"
1010
@keydown.right.exact="$refs.presentation.slideNext()"
11+
@keydown.ctrl.73.prevent="modal.infosongdata = !modal.infosongdata"
1112
@keydown.ctrl.83.prevent="autoSync = !autoSync"
1213
@keydown.ctrl.66.prevent="hide = !hide"
1314
@keydown.ctrl.76.prevent="dark = !dark"
@@ -73,6 +74,16 @@
7374
<span class="clock px-4">{{ timeonly }}</span>
7475
<a
7576
class="btn btn-xl btn-fw btn-gray btn-toggle tooltip ml-4"
77+
:class="{ 'btn-secondary': !modal.infosongdata, 'btn-primary': modal.infosongdata }"
78+
href="#"
79+
aria-label="Song Data"
80+
@click="modal.infosongdata = true"
81+
:data-tooltip="$t('tooltip.infoSongData') + '\n' + $t('key.ctrl') + ' + ' + $t('key.I')"
82+
>
83+
<ion-icon name="information-outline" class="icon-1-5x"></ion-icon>
84+
</a>
85+
<a
86+
class="btn btn-xl btn-fw btn-gray btn-toggle tooltip ml-1"
7687
:class="{ 'btn-secondary': !autoSync, 'btn-primary': autoSync }"
7788
href="#"
7889
aria-label="AutoSync"
@@ -152,6 +163,13 @@
152163
</div>
153164
</div>
154165
</div>
166+
<!-- modal: info song note -->
167+
<InfoSongData
168+
v-if="modal.infosongdata"
169+
:active="modal.infosongdata"
170+
:song="songs[currentPosition]"
171+
@closed="modal.infosongdata = false"
172+
/>
155173
</div>
156174
</template>
157175

@@ -161,14 +179,16 @@ import { Hooper, Slide, Pagination as HooperPagination } from 'hooper';
161179
import 'hooper/dist/hooper.css';
162180
// get internal components
163181
import SongContent from '@/partials/SongContent';
182+
import InfoSongData from '@/modals/InfoSongData';
164183
165184
export default {
166185
name: 'setlist-present',
167186
components: {
168187
Hooper,
169188
Slide,
170189
HooperPagination,
171-
SongContent
190+
SongContent,
191+
InfoSongData,
172192
},
173193
props: {
174194
active: Boolean,
@@ -186,6 +206,9 @@ export default {
186206
infiniteScroll: false,
187207
keysControl: true,
188208
},
209+
modal: {
210+
infosongdata: false
211+
},
189212
currentPosition: 0,
190213
autoSync: false,
191214
hide: false,

‎src/modals/SetlistSet.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="modal modal-lg" :class="{ active: active }">
2+
<div class="modal modal-lg modal-wide" :class="{ active: active }">
33
<a href="#" class="modal-overlay" aria-label="Close" @click.prevent="cancel"></a>
44
<div v-if="setlist && ready.songs" class="modal-container">
55
<div class="modal-header">

‎src/modals/SongPresent.vue‎

Lines changed: 29 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
:class="{ active: active, light: !dark }"
55
ref="container"
66
tabindex="0"
7+
@keydown.ctrl.73.prevent="modal.infosongdata = !modal.infosongdata"
78
@keydown.ctrl.76.prevent="dark = !dark"
89
@keydown.ctrl.75.prevent="chords = !chords"
910
@keydown.esc.exact="$emit('closed')"
@@ -12,20 +13,30 @@
1213
<div class="modal-container p-0">
1314
<div class="modal-header">
1415
<div class="modal-title h5 text-center">
15-
{{ title }}
16-
<span class="modal-subtitle h6 text-gray ml-3">{{ subtitle }}</span>
16+
{{ song.title }}
17+
<span class="modal-subtitle h6 text-gray ml-3">{{ song.subtitle }}</span>
1718
</div>
1819
</div>
19-
<div v-if="content" class="modal-body">
20+
<div v-if="song.content" class="modal-body">
2021
<SongContent
21-
:content="content"
22+
:content="song.content"
2223
:chords="chords"
2324
:tuning="tuning"
2425
:presentation="true"
2526
ref="songcontent"
2627
/>
2728
</div>
2829
<div class="modal-footer">
30+
<a
31+
class="btn btn-xl btn-fw btn-gray btn-toggle tooltip ml-1"
32+
:class="{ 'btn-secondary': !modal.infosongdata, 'btn-primary': modal.infosongdata }"
33+
href="#"
34+
aria-label="Song Data"
35+
@click="modal.infosongdata = true"
36+
:data-tooltip="$t('tooltip.infoSongData') + '\n' + $t('key.ctrl') + ' + ' + $t('key.I')"
37+
>
38+
<ion-icon name="information-outline" class="icon-1-5x"></ion-icon>
39+
</a>
2940
<a
3041
class="btn btn-xl btn-fw btn-gray btn-toggle tooltip ml-1"
3142
:class="{ 'btn-secondary': dark, 'btn-primary': !dark }"
@@ -57,29 +68,39 @@
5768
</a>
5869
</div>
5970
</div>
71+
<!-- modal: info song note -->
72+
<InfoSongData
73+
v-if="modal.infosongdata"
74+
:active="modal.infosongdata"
75+
:song="song"
76+
@closed="modal.infosongdata = false"
77+
/>
6078
</div>
6179
</template>
6280

6381
<script>
6482
// get components
6583
import SongContent from '@/partials/SongContent';
84+
import InfoSongData from '@/modals/InfoSongData';
6685
6786
export default {
6887
name: 'song-present',
6988
components: {
70-
SongContent
89+
SongContent,
90+
InfoSongData,
7191
},
7292
props: {
7393
active: Boolean,
74-
title: String,
75-
subtitle: String,
76-
content: String,
94+
song: Object,
7795
chords: Boolean,
7896
tuning: Number,
7997
},
8098
data () {
8199
return {
82100
dark: true,
101+
modal: {
102+
infosongdata: false
103+
}
83104
};
84105
},
85106
methods: {

‎src/modals/SongSet.vue‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div>
33
<!-- main modal: set song -->
4-
<div class="modal modal-lg" :class="{ active: active }">
4+
<div class="modal modal-lg modal-wide" :class="{ active: active }">
55
<a href="#" class="modal-overlay" aria-label="Close" @click.prevent="$emit('closed')"></a>
66
<div v-if="song && ready.songs" class="modal-container">
77
<div class="modal-header">
@@ -116,7 +116,8 @@
116116
v-model="song.publisher"
117117
class="form-input"
118118
id="publisher"
119-
:placeholder="$t('placeholder.exampleSongPublisher')" rows="2"
119+
:placeholder="$t('placeholder.exampleSongPublisher')"
120+
rows="2"
120121
></textarea>
121122
</div>
122123
</div>
@@ -135,13 +136,14 @@
135136
<div class="column col-8 col-md-12">
136137
<div class="form-group">
137138
<label class="form-label" for="note">{{ $t('field.note') }}</label>
138-
<input
139+
<textarea
139140
v-model="song.note"
140141
class="form-input"
141142
id="note"
142143
type="text"
143144
:placeholder="$t('placeholder.exampleSongNote')"
144-
>
145+
rows="2"
146+
></textarea>
145147
</div>
146148
</div>
147149
<div class="column col-4 col-md-12">

‎src/views/SetlistShow.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -716,6 +716,7 @@ export default {
716716
// footer with ccli#, author names and (c) year publisher
717717
{
718718
text: [
719+
song.note ? this.$t('field.note') + ':\n' + song.note + '\n\n' : '',
719720
song.ccli ? 'CCLI Song Nr.: ' + song.ccli + '\n' : '',
720721
song.authors ? song.authors + '\n' : '',
721722
'\u00A9 ' + (song.year ? song.year + ' ' : '') + song.publisher

‎src/views/Shortcuts.vue‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,15 +57,15 @@
5757
<kbd><ion-icon name="arrow-forward"></ion-icon></kbd> /
5858
<kbd><ion-icon name="arrow-up"></ion-icon></kbd>
5959
</td>
60-
<td><ion-icon name="musical-note"></ion-icon></td>
60+
<td></td>
6161
<td>{{ $t('tooltip.transposeUp') }}</td>
6262
</tr>
6363
<tr>
6464
<td>
6565
<kbd><ion-icon name="arrow-back"></ion-icon></kbd> /
6666
<kbd><ion-icon name="arrow-down"></ion-icon></kbd>
6767
</td>
68-
<td><ion-icon name="musical-note"></ion-icon></td>
68+
<td></td>
6969
<td>{{ $t('tooltip.transposeDown') }}</td>
7070
</tr>
7171
<tr>
@@ -78,6 +78,11 @@
7878
<td><ion-icon name="videocam-outline"></ion-icon></td>
7979
<td>{{ $t('tooltip.presentationStart') }}</td>
8080
</tr>
81+
<tr>
82+
<td><kbd>{{ $t('key.ctrl') }}</kbd>&nbsp;+&nbsp;<kbd>{{ $t('key.I') }}</kbd></td>
83+
<td><ion-icon name="information-outline"></ion-icon></td>
84+
<td>{{ $t('tooltip.infoSongData') }}</td>
85+
</tr>
8186
<tr>
8287
<td><kbd>{{ $t('key.ctrl') }}</kbd>&nbsp;+&nbsp;<kbd>{{ $t('key.L') }}</kbd></td>
8388
<td><ion-icon name="contrast-outline"></ion-icon></td>
@@ -137,6 +142,16 @@
137142
<td><ion-icon name="eye-off-outline"></ion-icon></td>
138143
<td>{{ $t('tooltip.presentationShow') }} / {{ $t('tooltip.presentationHide') }}</td>
139144
</tr>
145+
<tr>
146+
<td><kbd>{{ $t('key.ctrl') }}</kbd>&nbsp;+&nbsp;<kbd>{{ $t('key.I') }}</kbd></td>
147+
<td><ion-icon name="information-outline"></ion-icon></td>
148+
<td>{{ $t('tooltip.infoSongData') }}</td>
149+
</tr>
150+
<tr>
151+
<td><kbd>{{ $t('key.ctrl') }}</kbd>&nbsp;+&nbsp;<kbd>{{ $t('key.L') }}</kbd></td>
152+
<td><ion-icon name="contrast-outline"></ion-icon></td>
153+
<td>{{ $t('tooltip.lightModeOnOff') }}</td>
154+
</tr>
140155
<tr>
141156
<td><kbd>{{ $t('key.esc') }}</kbd></td>
142157
<td><ion-icon name="close"></ion-icon></td>

0 commit comments

Comments
 (0)