Upd: add mode switch

docs/references/translating_status.md

@@ -1,14 +1,14 @@
-- bg-BG: 997 missing phrases
-- es-AR: 8 missing phrases
-- es-ES: 859 missing phrases
-- es-VE: 858 missing phrases
-- fi-FI: 855 missing phrases
-- fr-FR: 9 missing phrases
-- it-IT: 8 missing phrases
-- ja-JP: 20 missing phrases
-- ko-KR: 8 missing phrases
-- nl-NL: 9 missing phrases
-- pl-PL: 8 missing phrases
-- ru-RU: 82 missing phrases
-- zh-Hans: 8 missing phrases
-- zh-Hant: 8 missing phrases
+- bg-BG: 999 missing phrases
+- es-AR: 11 missing phrases
+- es-ES: 862 missing phrases
+- es-VE: 860 missing phrases
+- fi-FI: 857 missing phrases
+- fr-FR: 12 missing phrases
+- it-IT: 11 missing phrases
+- ja-JP: 23 missing phrases
+- ko-KR: 11 missing phrases
+- nl-NL: 12 missing phrases
+- pl-PL: 11 missing phrases
+- ru-RU: 85 missing phrases
+- zh-Hans: 11 missing phrases
+- zh-Hant: 11 missing phrases

htdocs/css/mympd.css

@@ -1122,6 +1122,8 @@ button.weekday {
 .dropdown-divider2 {
   height: 0;
   margin-top: 1.5rem;
+  margin-left: -1rem;
+  margin-right: -1rem;
   overflow: hidden;
   opacity: 1;
 }

htdocs/index.html

@@ -147,7 +147,7 @@ <h2 class="dropdown-header" data-phrase="Presets"></h2>
             </div>
           </div>
           <div class="btn-group me-2 featTags">
-            <button data-title-phrase="Display tags" data-contextmenu="columns" data-href='{"cmd": "showContextMenu", "options": ["event"]}' class="btn btn-secondary mi" type="button" data-bs-toggle="dropdown">settings</button>
+            <button data-title-phrase="View settings" data-contextmenu="viewSettings" data-href='{"cmd": "showContextMenu", "options": ["event"]}' class="btn btn-secondary mi" type="button" data-bs-toggle="dropdown">settings</button>
           </div>
         </div>
         <div class="container-fluid scrollContainer">
@@ -244,7 +244,7 @@ <h2 data-phrase="Action for selection" class="dropdown-header"></h2>
             </div>
           </div>
           <div class="btn-group me-2 featTags">
-            <button data-title-phrase="Display tags" data-contextmenu="columns" data-href='{"cmd": "showContextMenu", "options": ["event"]}' class="btn btn-secondary mi" type="button" data-bs-toggle="dropdown">settings</button>
+            <button data-title-phrase="View settings" data-contextmenu="viewSettings" data-href='{"cmd": "showContextMenu", "options": ["event"]}' class="btn btn-secondary mi" type="button" data-bs-toggle="dropdown">settings</button>
           </div>
           <div id="QueueCurrentPaginationTop" class="btn-group me-2 pagination"></div>
         </div>
@@ -306,7 +306,7 @@ <h2 data-phrase="Action for selection" class="dropdown-header"></h2>
             </div>
           </div>
           <div class="btn-group me-2 featTags">
-            <button data-title-phrase="Display tags" data-contextmenu="columns" data-href='{"cmd": "showContextMenu", "options": ["event"]}' class="btn btn-secondary mi" type="button" data-bs-toggle="dropdown">settings</button>
+            <button data-title-phrase="View settings" data-contextmenu="viewSettings" data-href='{"cmd": "showContextMenu", "options": ["event"]}' class="btn btn-secondary mi" type="button" data-bs-toggle="dropdown">settings</button>
           </div>
           <div id="QueueLastPlayedPaginationTop" class="btn-group me-2 pagination"></div>
         </div>
@@ -371,7 +371,7 @@ <h2 data-phrase="Action for selection" class="dropdown-header"></h2>
               </div>
             </div>
             <div class="btn-group me-2 featTags">
-              <button data-title-phrase="Display tags" data-contextmenu="columns" data-href='{"cmd": "showContextMenu", "options": ["event"]}' class="btn btn-secondary mi" type="button" data-bs-toggle="dropdown">settings</button>
+              <button data-title-phrase="View settings" data-contextmenu="viewSettings" data-href='{"cmd": "showContextMenu", "options": ["event"]}' class="btn btn-secondary mi" type="button" data-bs-toggle="dropdown">settings</button>
             </div>
             <div id="QueueJukeboxSongPaginationTop" class="btn-group me-2 pagination"></div>
           </div>
@@ -436,7 +436,7 @@ <h2 data-phrase="Action for selection" class="dropdown-header"></h2>
               </div>
             </div>
             <div class="btn-group me-2 featTags">
-              <button data-title-phrase="Display tags" data-contextmenu="columns" data-href='{"cmd": "showContextMenu", "options": ["event"]}' class="btn btn-secondary mi" type="button" data-bs-toggle="dropdown">settings</button>
+              <button data-title-phrase="View settings" data-contextmenu="viewSettings" data-href='{"cmd": "showContextMenu", "options": ["event"]}' class="btn btn-secondary mi" type="button" data-bs-toggle="dropdown">settings</button>
             </div>
             <div id="QueueJukeboxAlbumPaginationTop" class="btn-group me-2 pagination"></div>
           </div>
@@ -498,7 +498,7 @@ <h2 data-phrase="Action for selection" class="dropdown-header"></h2>
               </div>
             </div>
             <div class="btn-group me-2 featTags">
-              <button data-title-phrase="Display tags" data-contextmenu="columns" data-href='{"cmd": "showContextMenu", "options": ["event"]}' class="btn btn-secondary mi" type="button" data-bs-toggle="dropdown">settings</button>
+              <button data-title-phrase="View settings" data-contextmenu="viewSettings" data-href='{"cmd": "showContextMenu", "options": ["event"]}' class="btn btn-secondary mi" type="button" data-bs-toggle="dropdown">settings</button>
             </div>
             <div id="BrowsePlaylistListPaginationTop" class="btn-group me-2 pagination"></div>
           </div>
@@ -607,7 +607,7 @@ <h2 data-phrase="Action for selection" class="dropdown-header"></h2>
               </div>
             </div>
             <div class="btn-group me-2 featTags">
-              <button data-title-phrase="Display tags" data-contextmenu="columns" data-href='{"cmd": "showContextMenu", "options": ["event"]}' class="btn btn-secondary mi" type="button" data-bs-toggle="dropdown">settings</button>
+              <button data-title-phrase="View settings" data-contextmenu="viewSettings" data-href='{"cmd": "showContextMenu", "options": ["event"]}' class="btn btn-secondary mi" type="button" data-bs-toggle="dropdown">settings</button>
             </div>
             <div id="BrowsePlaylistDetailPaginationTop" class="btn-group me-2 pagination"></div>
           </div>
@@ -709,7 +709,7 @@ <h2 data-phrase="Action for selection" class="dropdown-header"></h2>
               </div>
             </div>
             <div class="btn-group me-2 featTags">
-              <button data-title-phrase="Display tags" data-contextmenu="columns" data-href='{"cmd": "showContextMenu", "options": ["event"]}' class="btn btn-secondary mi" type="button" data-bs-toggle="dropdown">settings</button>
+              <button data-title-phrase="View settings" data-contextmenu="viewSettings" data-href='{"cmd": "showContextMenu", "options": ["event"]}' class="btn btn-secondary mi" type="button" data-bs-toggle="dropdown">settings</button>
             </div>
             <div id="BrowseDatabaseAlbumListPaginationTop" class="btn-group me-2 pagination"></div>
           </div>
@@ -752,7 +752,7 @@ <h2 data-phrase="Action for selection" class="dropdown-header"></h2>
               </div>
             </div>
             <div class="btn-group me-2 featTags">
-              <button data-title-phrase="Display tags" data-contextmenu="columns" data-href='{"cmd": "showContextMenu", "options": ["event"]}' class="btn btn-secondary mi" type="button" data-bs-toggle="dropdown">settings</button>
+              <button data-title-phrase="View settings" data-contextmenu="viewSettings" data-href='{"cmd": "showContextMenu", "options": ["event"]}' class="btn btn-secondary mi" type="button" data-bs-toggle="dropdown">settings</button>
             </div>
           </div>
           <div class="table-responsive scrollContainer">
@@ -815,7 +815,7 @@ <h2 data-phrase="Action for selection" class="dropdown-header"></h2>
             </div>
           </div>
           <div class="btn-group me-2 featTags">
-            <button data-title-phrase="Display tags" data-contextmenu="columns" data-href='{"cmd": "showContextMenu", "options": ["event"]}' class="btn btn-secondary mi" type="button" data-bs-toggle="dropdown">settings</button>
+            <button data-title-phrase="View settings" data-contextmenu="viewSettings" data-href='{"cmd": "showContextMenu", "options": ["event"]}' class="btn btn-secondary mi" type="button" data-bs-toggle="dropdown">settings</button>
           </div>
           <div id="BrowseFilesystemPaginationTop" class="btn-group me-2 pagination"></div>
         </div>
@@ -926,7 +926,7 @@ <h2 data-phrase="Action for selection" class="dropdown-header"></h2>
               </div>
             </div>
             <div class="btn-group me-2 featTags">
-              <button data-title-phrase="Display tags" data-contextmenu="columns" data-href='{"cmd": "showContextMenu", "options": ["event"]}' class="btn btn-secondary mi" type="button" data-bs-toggle="dropdown">settings</button>
+              <button data-title-phrase="View settings" data-contextmenu="viewSettings" data-href='{"cmd": "showContextMenu", "options": ["event"]}' class="btn btn-secondary mi" type="button" data-bs-toggle="dropdown">settings</button>
             </div>
             <div id="BrowseRadioWebradiodbPaginationTop" class="btn-group me-2 pagination"></div>
           </div>
@@ -980,7 +980,7 @@ <h2 data-phrase="Action for selection" class="dropdown-header"></h2>
               </div>
             </div>
             <div class="btn-group me-2 featTags">
-              <button data-title-phrase="Display tags" data-contextmenu="columns" data-href='{"cmd": "showContextMenu", "options": ["event"]}' class="btn btn-secondary mi" type="button" data-bs-toggle="dropdown">settings</button>
+              <button data-title-phrase="View settings" data-contextmenu="viewSettings" data-href='{"cmd": "showContextMenu", "options": ["event"]}' class="btn btn-secondary mi" type="button" data-bs-toggle="dropdown">settings</button>
             </div>
             <div id="BrowseRadioRadiobrowserPaginationTop" class="btn-group me-2 pagination"></div>
           </div>
@@ -1047,7 +1047,7 @@ <h2 data-phrase="Action for selection" class="dropdown-header"></h2>
             </div>
           </div>
           <div class="btn-group me-2 featTags">
-            <button data-title-phrase="Display tags" data-contextmenu="columns" data-href='{"cmd": "showContextMenu", "options": ["event"]}' class="btn btn-secondary mi" type="button" data-bs-toggle="dropdown">settings</button>
+            <button data-title-phrase="View settings" data-contextmenu="viewSettings" data-href='{"cmd": "showContextMenu", "options": ["event"]}' class="btn btn-secondary mi" type="button" data-bs-toggle="dropdown">settings</button>
           </div>
           <div id="SearchPaginationTop" class="btn-group me-2 pagination"></div>
         </div>

htdocs/js/contextMenu.js

@@ -59,7 +59,26 @@ function showContextMenu(event) {
  * @param {HTMLElement} contextMenuBody element to append the menu item
  * @returns {void}
  */
-function createMenuColumns(target, contextMenuTitle, contextMenuBody) {
+function createMenuViewSettings(target, contextMenuTitle, contextMenuBody) {
+    if (app.id !== 'Playback' &&
+        app.id !== 'BrowseDatabaseAlbumDetail')
+    {
+        contextMenuBody.appendChild(
+            elCreateNodes('div', {'class': ['row']}, [
+                elCreateTextTn('label', {'class': ['col-4','col-form-label']}, 'Mode'),
+                elCreateNode('div', {'class': ['col-8']},
+                    elCreateNodes('div', {'class': ['btn-group', 'w-100'], "id": "viewSettingsMode"}, [
+                        elCreateTextTn('button', {"class": ["btn", "btn-secondary"], 'data-value': 'table'}, 'Table'),
+                        elCreateTextTn('button', {"class": ["btn", "btn-secondary"], 'data-value': 'grid'}, 'Grid')
+                    ])
+                )
+            ])
+        );
+        toggleBtnGroupValueId('viewSettingsMode', settings['view' + app.id].mode);
+        contextMenuBody.appendChild(
+            elCreateEmpty('div', {"class": ["dropdown-divider2", "mb-3"]})
+        );
+    }
     if (app.id === 'BrowseDatabaseAlbumDetail') {
         createMenuColumnsAppid(target, 'BrowseDatabaseAlbumDetailInfo', contextMenuTitle, contextMenuBody);
         contextMenuBody.appendChild(
@@ -85,7 +104,7 @@ function createMenuColumnsAppid(target, appid, contextMenuTitle, contextMenuBody
     setViewOptions(appid, menu);
     contextMenuBody.classList.add('px-3');
     contextMenuBody.appendChild(menu);
-    const applyEl = elCreateTextTn('button', {"class": ["btn", "btn-success", "btn-sm", "w-100", "mt-2"]}, 'Apply');
+    const applyEl = elCreateTextTn('button', {"class": ["btn", "btn-success", "w-100", "mt-2"]}, 'Apply');
     contextMenuBody.appendChild(applyEl);
     applyEl.addEventListener('click', function(eventClick) {
         eventClick.preventDefault();

htdocs/js/contextMenuOffcanvas.js

@@ -34,25 +34,25 @@ function showContextMenuOffcanvas(target, contextMenuType) {
     const contextMenu = BSN.Offcanvas.getInstance(contextMenuEl);
 
     switch (contextMenuType) {
-        case 'columns':
+        case 'viewSettings':
             //column select in table header
-            createContextMenuOffcanvas(target, contextMenuEl, 'cols', createMenuColumns, undefined);
+            createContextMenuOffcanvas(target, contextMenuEl, contextMenuType, createMenuViewSettings, undefined);
             break;
         case 'disc':
             //disc actions in album details view
-            createContextMenuOffcanvas(target, contextMenuEl, 'disc', addMenuItemsDiscActions, undefined);
+            createContextMenuOffcanvas(target, contextMenuEl, contextMenuType, addMenuItemsDiscActions, undefined);
             break;
         case 'home':
             //home card actions
             createContextMenuOffcanvas(target, contextMenuEl, '', createMenuHome, createMenuHomeSecondary);
             break;
         case 'webradio':
             //webradio favorite actions
-            createContextMenuOffcanvas(target, contextMenuEl, 'webradio', addMenuItemsWebradioFavoritesActions, undefined);
+            createContextMenuOffcanvas(target, contextMenuEl, contextMenuType, addMenuItemsWebradioFavoritesActions, undefined);
             break;
         case 'album':
             //album action in album list
-            createContextMenuOffcanvas(target, contextMenuEl, 'album', addMenuItemsAlbumActions, undefined);
+            createContextMenuOffcanvas(target, contextMenuEl, contextMenuType, addMenuItemsAlbumActions, undefined);
             break;
         default:
             createContextMenuOffcanvas(target, contextMenuEl, '', createMenuLists, createMenuListsSecondary);

htdocs/js/globales.js

@@ -1581,7 +1581,7 @@ const typeFriendly = {
     'view': 'View',
     'appGoto': 'View',
     'webradio': 'Webradio',
-    'cols': 'Columns',
+    'viewSettings': 'View settings',
     'disc': 'Disc'
 };
 

htdocs/js/tables.js

@@ -388,12 +388,12 @@ function createFieldItem(field) {
     const item = elCreateNodes('li', {"class": ["list-group-item", "clickable"], "draggable": "true", "data-field": field}, [
         document.createTextNode(tn(field)),
         elCreateNodes('div', {'class': ['btn-group', 'float-end', 'fieldsEnabledBtns']}, [
-            elCreateText('button', {"class": ["btn", "btn-sm", "btn-sm", "mi", "mi-sm", "pt-0", "pb-0"], 'data-action':'remove', 'title': tn('Remove')}, 'close'),
-            elCreateText('button', {"class": ["btn", "btn-sm", "btn-sm", "mi", "mi-sm", "pt-0", "pb-0"], 'data-action':'up', 'title': tn('Move up')}, 'arrow_upward'),
-            elCreateText('button', {"class": ["btn", "btn-sm", "btn-sm", "mi", "mi-sm", "pt-0", "pb-0"], 'data-action':'down', 'title': tn('Move down')}, 'arrow_downward'),
+            elCreateText('button', {"class": ["btn", "btn-sm", "mi", "mi-sm", "pt-0", "pb-0"], 'data-action':'remove', 'title': tn('Remove')}, 'close'),
+            elCreateText('button', {"class": ["btn", "btn-sm", "mi", "mi-sm", "pt-0", "pb-0"], 'data-action':'up', 'title': tn('Move up')}, 'arrow_upward'),
+            elCreateText('button', {"class": ["btn", "btn-sm", "mi", "mi-sm", "pt-0", "pb-0"], 'data-action':'down', 'title': tn('Move down')}, 'arrow_downward'),
         ]),
         elCreateNodes('div', {'class': ['btn-group', 'float-end', 'fieldsAvailableBtns']}, [
-            elCreateText('button', {"class": ["btn", "btn-sm", "btn-sm", "mi", "mi-sm", "pt-0", "pb-0"], 'data-action':'add', 'title': tn('Add')}, 'add')
+            elCreateText('button', {"class": ["btn", "btn-sm", "mi", "mi-sm", "pt-0", "pb-0"], 'data-action':'add', 'title': tn('Add')}, 'add')
         ])
     ]);
     return item;

src/i18n/json/bg-BG.json

@@ -230,7 +230,6 @@
     "Discnum": "",
     "Disconnected from myMPD": "",
     "Discs": "",
-    "Display tags": "",
     "Display tags in rows for small displays": "",
     "Do you really want to clear the playlist?": "",
     "Do you really want to clear the queue?": "",

src/i18n/json/de-DE.json

@@ -231,7 +231,6 @@
     "Discnum": "CD %{smart_count}",
     "Disconnected from myMPD": "Nicht mit myMPD verbunden",
     "Discs": "Discs",
-    "Display tags": "Tags zum Anzeigen",
     "Display tags in rows for small displays": "Zeige Tags in Zeilen für kleine Displays",
     "Do you really want to clear the playlist?": "Willst du wirklich die Wiedergabeliste \"%{playlist}\" leeren?",
     "Do you really want to clear the queue?": "Willst du die Warteschlange wirklich leeren?",
@@ -1152,5 +1151,8 @@
     "Move down": "Nach unten",
     "Move up": "Nach oben",
     "Selected": "Ausgewählt",
-    "Table": "Tabelle"
+    "Table": "Tabelle",
+    "Grid": "Grid",
+    "Mode": "Modus",
+    "View settings": "Anzeigeeinstellungen"
 }

src/i18n/json/es-AR.json

@@ -230,7 +230,6 @@
     "Discnum": "Disco %{smart_count}",
     "Disconnected from myMPD": "Desconectado de myMPD",
     "Discs": "Discos",
-    "Display tags": "Mostrar etiquetas",
     "Display tags in rows for small displays": "Mostrar etiquetas en filas para pantallas pequeñas",
     "Do you really want to clear the playlist?": "¿De verdad querés limpiar la lista de reproducción \"%{playlist}\"?",
     "Do you really want to clear the queue?": "¿De verdad querés limpiar la fila?",

src/i18n/json/es-ES.json

@@ -230,7 +230,6 @@
     "Discnum": "",
     "Disconnected from myMPD": "",
     "Discs": "",
-    "Display tags": "Mostrar etiquetas",
     "Display tags in rows for small displays": "Muestra etiquetas en filas para pantallas pequeñas",
     "Do you really want to clear the playlist?": "¿Deseas realmente limpiar la lista de reproducción?",
     "Do you really want to clear the queue?": "¿Deseas realmente limpiar la cola?",

src/i18n/json/es-VE.json

@@ -230,7 +230,6 @@
     "Discnum": "",
     "Disconnected from myMPD": "",
     "Discs": "",
-    "Display tags": "",
     "Display tags in rows for small displays": "",
     "Do you really want to clear the playlist?": "",
     "Do you really want to clear the queue?": "",

src/i18n/json/fi-FI.json

@@ -230,7 +230,6 @@
     "Discnum": "",
     "Disconnected from myMPD": "",
     "Discs": "",
-    "Display tags": "",
     "Display tags in rows for small displays": "",
     "Do you really want to clear the playlist?": "",
     "Do you really want to clear the queue?": "",

src/i18n/json/fr-FR.json

@@ -230,7 +230,6 @@
     "Discnum": "CD %{smart_count}",
     "Disconnected from myMPD": "Déconnecté de myMPD",
     "Discs": "Disques",
-    "Display tags": "Afficher les métadonnées ",
     "Display tags in rows for small displays": "Afficher les métadonnées en ligne pour petits écrans",
     "Do you really want to clear the playlist?": "Souhaitez-vous vraiment effacer la liste de lecture ?",
     "Do you really want to clear the queue?": "Souhaitez-vous vraiment effacer a file de lecture ?",