Piktogramme in Media-Inhalten, Tool-Tipps, Auswahl in Media-Inhalten

ulrich

2021-04-07 7c22a2a2f3568841b0830e4339bdb6f8ec69262f

Piktogramme in Media-Inhalten, Tool-Tipps, Auswahl in Media-Inhalten

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

 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;

 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;

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

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

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

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

 www/ui/font/pikto-alt.ttf

Binary files differ

 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&szlig;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">

 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 */