From 7c22a2a2f3568841b0830e4339bdb6f8ec69262f Mon Sep 17 00:00:00 2001
From: ulrich
Date: Wed, 07 Apr 2021 10:39:57 +0000
Subject: [PATCH] Piktogramme in Media-Inhalten, Tool-Tipps, Auswahl in Media-Inhalten
---
src/de/uhilger/mediaz/store/StorageFile.java | 2 +
/dev/null | 0
www/ui/app.css | 32 +++++++++++++++-
www/ui/data/tpl/form_ablageort.tpl | 2
www/ui/data/tpl/ablageort_liste.tpl | 2
www/ui/data/tpl/katalog_root_liste.tpl | 2
www/ui/js/app.js | 14 +++++++
src/de/uhilger/mediaz/api/ListFileHandler.java | 11 ++++-
www/ui/index.html | 20 ++-------
www/ui/data/tpl/katalog_inhalt_liste.tpl | 2
10 files changed, 64 insertions(+), 23 deletions(-)
diff --git a/src/de/uhilger/mediaz/api/ListFileHandler.java b/src/de/uhilger/mediaz/api/ListFileHandler.java
index f04db2b..ac53618 100644
--- a/src/de/uhilger/mediaz/api/ListFileHandler.java
+++ b/src/de/uhilger/mediaz/api/ListFileHandler.java
@@ -42,11 +42,18 @@
if(files != null) {
for(File file : files) {
StorageFile sf = new StorageFile();
- sf.setName(file.getName());
+ String fname = file.getName();
+ sf.setName(fname);
if(file.isDirectory()) {
sf.setTyp(StorageFile.TYP_FOLDER);
} else {
- sf.setTyp(StorageFile.TYP_FILE);
+ if(fname.endsWith(".mp3")) {
+ sf.setTyp(StorageFile.TYP_AUDIO);
+ } else if(fname.endsWith(".mp4") || fname.endsWith(".m4v")) {
+ sf.setTyp(StorageFile.TYP_VIDEO);
+ } else {
+ sf.setTyp(StorageFile.TYP_FILE);
+ }
}
list.add(sf);
}
diff --git a/src/de/uhilger/mediaz/store/StorageFile.java b/src/de/uhilger/mediaz/store/StorageFile.java
index d62df2f..a5d8b52 100644
--- a/src/de/uhilger/mediaz/store/StorageFile.java
+++ b/src/de/uhilger/mediaz/store/StorageFile.java
@@ -13,6 +13,8 @@
public static final String TYP_FOLDER = "folder";
public static final String TYP_FILE = "file";
+ public static final String TYP_AUDIO = "audio";
+ public static final String TYP_VIDEO = "video";
private String name;
private String typ;
diff --git a/www/ui/app.css b/www/ui/app.css
index 3587412..2ace15c 100644
--- a/www/ui/app.css
+++ b/www/ui/app.css
@@ -150,7 +150,7 @@
}
.entity-element:hover {
- background-color: background;
+ background-color: #ececec;
}
.entity-liste {
@@ -169,9 +169,37 @@
background-color: background;
}
+.entity-typ-folder:before {
+ font-family: "pikto";
+ content: '\f114';
+ padding-right: 0.3rem;
+}
+
+.entity-typ-audio:before {
+ font-family: "pikto";
+ content: '\e817'; /* icon-music */
+ padding-right: 0.3rem;
+}
+
+.entity-typ-video:before {
+ font-family: "pikto";
+ content: '\e816'; /* icon-video */
+ padding-right: 0.3rem;
+}
+
+.entity-typ-file:before {
+ font-family: "pikto";
+ content: '\e805'; /* icon-doc */
+ padding-right: 0.3rem;
+}
+
.form-button-footer {
display: flex;
flex-flow: row;
+}
+
+.selected {
+ background-color: #ececec;
}
.dlg-btn {
@@ -200,7 +228,7 @@
display: inline-block;
height: 2rem;
/* padding: 0 30px; */
- color: #555;
+ color: black;
text-align: center;
font-weight: 600;
line-height: 2rem;
diff --git a/www/ui/data/tpl/ablageort_liste.tpl b/www/ui/data/tpl/ablageort_liste.tpl
index c7d5e1d..85edeb6 100644
--- a/www/ui/data/tpl/ablageort_liste.tpl
+++ b/www/ui/data/tpl/ablageort_liste.tpl
@@ -1,7 +1,7 @@
<div class='entity-formular'>
<div class='entity-liste-kopf'>
- Ablageorte
+ Kataloge
<button class='ctrl-btn' id='neu-btn' title='Neu'><i class='icon-doc'></i></button>
</div>
<ul class='entity-liste'>
diff --git a/www/ui/data/tpl/form_ablageort.tpl b/www/ui/data/tpl/form_ablageort.tpl
index 4ccc8a6..6abd924 100644
--- a/www/ui/data/tpl/form_ablageort.tpl
+++ b/www/ui/data/tpl/form_ablageort.tpl
@@ -1,5 +1,5 @@
<div class="entity-formular">
- Ablageort
+ Katalog
<input class="entity-element" type="text" id="ablageort-name" placeholder="Name" value="{{name}}" />
<input class="entity-element" type="text" id="ablageort-ort" placeholder="Pfad" value="{{ort}}" />
diff --git a/www/ui/data/tpl/katalog_inhalt_liste.tpl b/www/ui/data/tpl/katalog_inhalt_liste.tpl
index bca65d5..9b05c0b 100644
--- a/www/ui/data/tpl/katalog_inhalt_liste.tpl
+++ b/www/ui/data/tpl/katalog_inhalt_liste.tpl
@@ -1,6 +1,6 @@
<div class='entity-formular'>
<div class='entity-liste-kopf'>
- Media-Liste
+ Media-Inhalte
<button class='ctrl-btn' id='zurueck-btn'><i class='icon-up-open'></i></button>
</div>
<ul class='entity-liste'>
diff --git a/www/ui/data/tpl/katalog_root_liste.tpl b/www/ui/data/tpl/katalog_root_liste.tpl
index 500e6b8..ec4280e 100644
--- a/www/ui/data/tpl/katalog_root_liste.tpl
+++ b/www/ui/data/tpl/katalog_root_liste.tpl
@@ -1,7 +1,7 @@
<div class='entity-formular'>
<div class='entity-liste-kopf'>
- Media-Liste
+ Media-Inhalte
<!-- <button class='button' id='neu-btn'>Neu</button> -->
</div>
<ul class='entity-liste'>
diff --git a/www/ui/font/pikto-alt.ttf b/www/ui/font/pikto-alt.ttf
deleted file mode 100644
index 4be0bcb..0000000
--- a/www/ui/font/pikto-alt.ttf
+++ /dev/null
Binary files differ
diff --git a/www/ui/index.html b/www/ui/index.html
index c81f404..a5b5e4d 100644
--- a/www/ui/index.html
+++ b/www/ui/index.html
@@ -41,26 +41,16 @@
<span id="app-titel">Mediazentrale</span>
</div>
<div class="top-btn-area">
- <!-- <button type="button" title="Speichern" class="top-btn" id="top-speichern-btn"><i class="icon-floppy"></i></button> -->
- <!-- <button type="button" title="Schließen" class="top-btn" id="top-close-btn"><i class="icon-cancel"></i></button> -->
<div class="dropdown">
<button class="top-btn"><i class="icon-down-dir"></i></button>
<div class="dropdown-content">
- <!--
- <a id="mi-ansehen"><i class="icon-eye"></i> Ansehen</a>
- <a id="mi-duplizieren"><i class="icon-docs"></i> Duplizieren</a>
- <a id="mi-umbenennen"><i class="icon-pencil"></i> Umbenennen</a>
- <a id="mi-neuer-ordner"><i class="icon-folder-empty"></i> Neuer Ordner</a>
- <a id="mi-neuer-text"><i class="icon-doc"></i> Neuer Text</a>
- <a id="mi-neues-dok"><i class="icon-doc-text"></i> Neues Dokument</a>
- <a id="mi-abmelden"><i class="icon-logout"></i> Abmelden</a>
- -->
- <a id="mi-katalog"><i class="icon-music"></i> Media</a>
- <a id="mi-orte"><i class="icon-database"></i> Orte</a>
- <a id="mi-list"><i class="icon-list"></i> Playlist</a>
+ <a id="mi-katalog"><i class="icon-music"></i> Media-Inhalte</a>
+ <a id="mi-list"><i class="icon-list"></i> Abspiellisten</a>
+ <a id="mi-orte"><i class="icon-database"></i> Kataloge</a>
+ <a id="mi-player"><i class="icon-play"></i> Abspieler</a>
+ <a id="mi-radio"><i class="icon-ellipsis-vert"></i> Radio</a>
</div>
</div>
-
</div>
</div>
<div class="inhalt">
diff --git a/www/ui/js/app.js b/www/ui/js/app.js
index c5637bc..a1fbec4 100644
--- a/www/ui/js/app.js
+++ b/www/ui/js/app.js
@@ -45,6 +45,8 @@
self.media_liste();
} else {
console.log("Media-Inhalt auswaehlen oder abspielen");
+ self.removeClassMulti('selected');
+ t.classList.add('selected');
}
});
self.addEvtListener('#zurueck-btn', 'click', function (event) {
@@ -137,6 +139,15 @@
});
};
+ this.addEvtListener = function(selector, eventName, func) {
+ document.querySelectorAll(selector).forEach(elem => { elem.addEventListener(eventName, func); });
+ };
+
+ this.removeClassMulti = function(selector) {
+ document.querySelectorAll('.' + selector).forEach(elem => { elem.classList.remove(selector); });
+ };
+
+ /*
this.addEvtListener = function (selector, eventName, func) {
var elems = document.querySelectorAll(selector);
var index;
@@ -144,6 +155,9 @@
elems[index].addEventListener(eventName, func);
}
};
+ */
+
+ // document.querySelectorAll(selector).forEach(elem => { elem.addEventListener(eventName, func); });
/* asynchroner HTTP Client */
--
Gitblit v1.9.3