Info-Dialog

ulrich@undisclosed

2020-05-09 e86f3c41186ab42109aa8e19697a56b38a3ef0df

Info-Dialog

 web/ui2/data/menu/hauptmenue.json

@@ -21,6 +21,11 @@
        "titel": "Nutzer",
        "umenue": true,
        "verweis": "nutzer.json"
      },
      {
        "titel": "Info",
        "umenue": false,
        "funktion": "app.info_dialog_zeigen"
      }
    ]
  }

 web/ui2/data/tpl/dlg-info.tpl

@@ -1,8 +1,8 @@
<div class="dlg-info">
  <span class="close-btn pointer-cursor">&#10006;</span>
  <div class="dlg-behaelter">
    <div class="dlg-info-app-titel">app-vorlage</div>
    <div class="dlg-info-app-info">Eine Vorlage f&uuml;r Apps von <a href='https://uhilger.de'>Ulrich Hilger</a>.</div>
    <div class="dlg-info-app-info">Weitere Infos im <a href='/gitblit/docs/web!app-vorlage.git'>Code-Repository</a>.</div>
    <div class="dlg-info-app-titel">Nutzerverwaltung</div>
    <div class="dlg-info-app-info">von <a href='https://uhilger.de'>Ulrich Hilger</a>.</div>
    <div class="dlg-info-app-info">Weitere Infos im <a href='/gitblit/docs/um.git'>Code-Repository</a>.</div>
  </div>
</div>

 web/ui2/index.html

@@ -31,10 +31,12 @@
        <!-- Einblendbereich -->
        <div class="dialog"></div>
        <!-- Breadcrumb -->
        <!--
        <div class="breadcrumb">
          <a class="bc-link">Ordner 1</a> / 
          <a class="bc-link">Ordner 2</a>
        </div>
        -->
        <!-- zentraler Inhaltsbereich -->
        <div class="zentrum">
          <div class="zentraler-inhalt">

 web/ui2/js/app.js

@@ -7,12 +7,6 @@
  var pfad = '';
  var loc;
  var modus = 'kacheln';
  var PERS_DIR = "Persoenlich";
  var PUB_DIR = "Oeffentlich";
  var DAV_DIR = "Austausch";
  var BASE_DIR = "$basis";
  var DATA_DIR = "$daten";
  var WWW_DIR = "www";

  this.datei_neuer_text = function () {
    self.meldung_mit_timeout("Neuer Text", 1500);
@@ -32,6 +26,9 @@
    document.querySelector('.hamburger').addEventListener('click', function (e) {
      self.menue_umschalten();
    });
    var dlg = document.querySelector(".dialog");
    dlg.style.flexBasis = '0em';
    self.seitenleiste_umschalten();
    self.um_get_login();
    self.um_get_user_list();
    self.loc = window.location.protocol + '//' + window.location.host;
@@ -119,21 +116,19 @@
            vurl,
            inhalt,
            function (html) {
              //dlg.html(html);
              dlg.style.height = '5em';
              dlg.style.flexBasis = '6em';
              setTimeout(function () {
              dlg.innerHTML = html;
              document.querySelector('.close-btn').addEventListener('click', self.dialog_schliessen);
              //dlg.slideDown(300);
              }, 300);
            });
  };

  this.dialog_schliessen = function () {
    document.querySelector('.close-btn').removeEventListener('click', self.dialog_schliessen);
    //$('.dialog').slideUp(300);
    var dlg = document.querySelector('.dialog');
    //dlg.style.display = "none";
    dlg.style.height = '0';
    dlg.innerHTML = '';
    dlg.style.flexBasis = '0em';
  };

  /* API functions */
@@ -142,7 +137,7 @@
    //var m = 'getUserNameList';
    var m = 'getUserNameList';
    var u = '../svc/' + m;
    self.fm_get(u, "json", function (antwort) {
    self.um_get(u, "json", function (antwort) {
    self.vorlagen.html_erzeugen(
      'data/tpl/inhalt.tpl',
      JSON.parse(antwort),
@@ -158,7 +153,7 @@
  this.um_get_login = function() {
    var m = '?c=de.uhilger.um.pub.SessionManager&m=getSessionUser';
    var u = '../pub' + m;
    self.fm_get(u, "text", function (resp) {
    self.um_get(u, "text", function (resp) {
      self.userid = resp;
      self.login_zeigen();
      //document.querySelector("#userMenu").textContent = resp;
@@ -168,7 +163,7 @@
  this.um_logout = function() {
    var m = '?c=de.uhilger.um.pub.SessionManager&m=expireSession';
    var u = '../pub' + m;
    self.fm_get(u, "text", function (resp) {
    self.um_get(u, "text", function (resp) {
      //$('#userMenu').text('nicht angemeldet');
      window.location.href = '../logout.html';
    });
@@ -176,7 +171,7 @@

  /* -------- ajax helper functions ----------- */

  this.fm_get = function (u, dtype, scallback) {    
  this.um_get = function (u, dtype, scallback) {    
    var xmlhttp = new XMLHttpRequest();
    var url = u;
    xmlhttp.onreadystatechange = function() {

 web/ui2/stile.css

@@ -64,6 +64,7 @@
  display: flex;
  flex-flow: column;
  /* background-color: #eaeaea; */
  height: 100%;
  width: 100%;
}

@@ -103,21 +104,29 @@
}

.dialog {
  display: flex;
  flex-flow: column;
  position: relative;
  /* height: 0.1em; */
  transition: all 0.3s ease-in;
  /* white-space: nowrap; */
}

.dlg-behaelter {
  line-height: 1.6;
  display: flex;
  flex-flow: column;
  /* line-height: 1.6; */
  height: 100%;
  padding: 0.4em;
}

.dlg-info {
  display: flex;
  flex-flow: column;
  background-color: #dcf2fb; /* blau */ 
  padding: 0.4em;
}


/*
  Close Button