Settings angepasst

src/js/lib/pwa-lib.js

@@ -4200,7 +4200,7 @@ function applyPolyfills() {
                     //Fallback
                     setTimeout(() => {
                         resolve(false);
-                    }, time*1000);
+                    }, (time+delay)*1000);
 
                     //Nach Seitenneuzeichnen, damit chrome das immer macht (und FF auch)
                     requestAnimationFrame(function () {

src/module/Application/pwa/html/application/dialog/chooseTheme.html

@@ -1,5 +1,7 @@
-<div id='theme-choose-container'>
-    <div id='choose-theme-template'>
-        <div class='name'></div>
+<div>
+    <div id='theme-choose-container'>
+        <div id='choose-theme-template'>
+            <div class='name'></div>
+        </div>
     </div>
 </div>

src/module/Application/pwa/html/application/fragment/settings.html

@@ -1,60 +1,52 @@
 <div class='max-height fill-me'>
     <div class='row max-width grow flex-center'>
         <div class='columns small-centered small-12 smedium-11 medium-9 large-7'>
-            <div class='row' id = "theme-chooser">
+            <div class='row clickable' id="theme-chooser">
                 <span class='columns small-6' data-translation="theme"></span>
                 <span class='columns small-6 text-right'>
-                    <!--<label id='theme-radio-template'><input type="radio" class='setting' name='theme'></label>-->
-                    <div id = 'theme-name'></div>
+                    <div id='theme-name'></div>
                 </span>
             </div>
-            <div class='row'>
+            <label class="switch row max-width">
                 <span class='columns small-6' data-translation="sound"></span>
                 <span class='columns small-6 text-right'>
-                    <label class="switch">
-                        <!--<div data-view="img/speaker.svg"></div>-->
-                        <input type="checkbox" class="setting" id="play-sound" name='play-sound' value="1" data-default="1">
-                        <span class="slider"></span>
-                    </label>
+                    <input type="checkbox" class="setting" id="play-sound" name='play-sound' value="1"
+                           data-default="1">
+                    <span class="slider"></span>
                 </span>
-            </div>
-
-            <div class='row'>
+            </label>
+            <label class="switch row max-width">
                 <span class='columns small-6' data-translation="music"></span>
                 <span class='columns small-6 text-right'>
-                    <label class="switch">
-                        <!--<div data-view="img/music.svg"></div>-->
-                        <input type="checkbox" class="setting" id="play-music" name='play-music' value="1" data-default="1">
-                        <span class="slider"></span>
-                    </label>
+                    <input type="checkbox" class="setting" id="play-music" name='play-music' value="1"
+                           data-default="1">
+                    <span class="slider"></span>
                 </span>
-            </div>
-            <div class='row' id='credits-button'>
+            </label>
+            <div class='row clickable' id='credits-button'>
                 <span class='columns small-6' data-translation="credits"></span>
                 <span class='columns small-6 text-right' data-translation=">"></span>
             </div>
-            <div class='row' id='privacy-policy-button'>
+            <div class='row clickable' id='privacy-policy-button'>
                 <span class='columns small-6' data-translation="privacy-policy"></span>
                 <span class='columns small-6 text-right' data-translation=">"></span>
             </div>
-            <div class='row' id='impressum-button'>
+            <div class='row clickable' id='impressum-button'>
                 <span class='columns small-6' data-translation="impressum"></span>
                 <span class='columns small-6 text-right' data-translation=">"></span>
             </div>
-            <div class='row'>
+            <label class="switch row max-width">
                 <span class='columns small-6' data-translation="track"></span>
                 <span class='columns small-6 text-right'>
-                    <label class="switch">
-                        <!--<div data-view="img/music.svg"></div>-->
-                        <input type="checkbox" class="setting" id="track-switch" name='matomoShouldTrack' value="1" data-default="1" data-raw="1">
-                        <span class="slider"></span>
-                    </label>
+                    <input type="checkbox" class="setting" id="track-switch" name='matomoShouldTrack' value="1"
+                           data-default="1" data-raw="1">
+                    <span class="slider"></span>
                 </span>
-            </div>
+            </label>
 
             <!--<iframe-->
-                    <!--style="border: 0; height: 200px; width: 600px;"-->
-                    <!--src="https://matomo.silas.link/index.php?module=CoreAdminHome&action=optOut&language=de&backgroundColor=&fontColor=&fontSize=&fontFamily="-->
+            <!--style="border: 0; height: 200px; width: 600px;"-->
+            <!--src="https://matomo.silas.link/index.php?module=CoreAdminHome&action=optOut&language=de&backgroundColor=&fontColor=&fontSize=&fontFamily="-->
             <!--&gt;</iframe>-->
 
 

src/module/Application/pwa/js/Fragment/WordRotatorSettingFragment.js

@@ -39,8 +39,7 @@ export class WordRotatorSettingFragment extends LocalStorageSettingsFragment {
         let themeNameElem = this.findBy("#theme-name");
         themeNameElem.removeAllChildren().appendChild(Translator.makePersistentTranslation(currentThemeName));
         this.findBy("#theme-chooser").addEventListener("click", async () => {
-            console.log("clicked");
-            let newTheme = (new ChooseThemeDialog()).show();
+            let newTheme = await (new ChooseThemeDialog()).show();
             if (Helper.isNotNull(newTheme)){
                 SettingsManager.getInstance().setSetting("theme", newTheme);
                 ThemeManager.changeCurrentTheme(newTheme);

src/module/Application/pwa/js/dialog/ChooseThemeDialog.js

@@ -4,11 +4,12 @@ export class ChooseThemeDialog extends Dialog {
 
     constructor() {
         let viewPromise = ViewInflater.inflate("html/application/dialog/chooseTheme.html").then(view => {
+
             let template = view.querySelector("#choose-theme-template");
             template.remove();
             template.id = null;
 
-            let themeTemplateContainer = template.querySelector("#theme-choose-container");
+            let themeTemplateContainer = view.querySelector("#theme-choose-container");
 
             for (let i = 0; i < ThemeManager.themes.length; i++) {
                 let themeElem = Helper.cloneNode(template);

src/module/Application/pwa/translations/de.json

@@ -18,11 +18,12 @@
 
   "dark":"Dunkel",
   "theme":"Theme:",
-  "sound":"Sound",
-  "music":"Musik",
+  "sound":"Sound:",
+  "music":"Musik:",
   "credits":"Credits",
   "privacy-policy":"Datenschutzbestimmungen",
   "impressum":"Impressum",
-  "track":"Anonymisierte Nutzungsdaten senden",
-  ">":">"
+  "track":"Anonymisierte Nutzungsdaten senden:",
+  ">":">",
+  "choose-theme-dialog-title":"Theme auswählen:"
 }

src/scss/_wordrotatorTheme.scss

@@ -76,6 +76,10 @@ body {
     #site-content > :not(.won) .segment.locked.layer-2 {
       border-color: #565656;
     }
+    .modal{
+      border: 1px solid white;
+      border-radius: 2px;
+    }
   }
   &.black{
     #site-content > :not(.won) .segment.locked {

src/scss/wordRotator.scss

@@ -353,4 +353,8 @@ body {
   content: "";
   max-width: 1.4em;
   background: url('../img/speaker.svg')
+}
+
+.clickable{
+  cursor: pointer;
 }