improved dialog scrolling

horchi · Feb 13, 2023 · c56a8bb · c56a8bb
1 parent 3e8c066
commit c56a8bb
Show file tree

Hide file tree

Showing 12 changed files with 220 additions and 178 deletions.
diff --git a/http/README b/http/README
@@ -14,21 +14,21 @@ das webIf basiert aktuell auf folgenden Frameworks und ist eine sogenannte Singl
          jquery.ui.touch-punch            http://touchpunch.furf.com/
    yaMD5                                  https://github.com/gorhill/yamd5.js
    fontello                               http://fontello.com/
-         
+
 Ordnerstruktur:
 http/
    3rdParty/                           Framework und Plugins von anderen Entwicklern
    tools/                              Werkzeuge zum compilieren von css und JS
    src/                                Die Quelldateien für das WebIf
-   
+
       css/
          theme/                        Hier können verschiedene themes definiert werden
-            default.less               Diese Datei ist der Startpunkt für ein theme und ist eine import-list von mehreren Stylesheetdateien, 
-                                       die per less zu eine gesamt-css-datei compiliert werden     
+            default.less               Diese Datei ist der Startpunkt für ein theme und ist eine import-list von mehreren Stylesheetdateien,
+                                       die per less zu eine gesamt-css-datei compiliert werden
          epgd.less                     Das ist das eigentliche css für das webIf
-         
+
       js/
-         0_translate.js                default-ressourcendatei; diese kann dann mal in mehreren Sprachen übersetzt werden und sollte dann 
+         0_translate.js                default-ressourcendatei; diese kann dann mal in mehreren Sprachen übersetzt werden und sollte dann
                                        unter www/lang abgelegt werden. Zur Zeit aber noch nicht implementiert
          main.js                       Haupdatei, die allgemeine Funktionen bereitstellt und die Seite initialisiert
          pages.editChannels.js         Bearbeiten der Kanallisten usw.
@@ -39,39 +39,36 @@ http/
          pages.search.js               Suchseite
          pages.timer.js                Timer erstellen und bearbeiten
          vdr.js                        Funktionen für den/die VDR
-         
+
       lang/                            Hier liegen für jede Sprache die Sprach-Ressourcendateien (de.js), die dann hinter her mal währen der Laufzeit
                                        gewechselt werden kann(noch nicht implementiert).
                                        Zusätzlich gibt es dann noch die Hilfe-Dateien (hilfe.html) pro Sprache.
 
       build.sh                         baut aus allen Files innerhalb von js/ eine gesamt Javascriptdatei -> www/epgd.js
       build-common.sh                  baut aus allen benötigten 3rdParty-scripten eine gesamt Javascriptdatei -> www/common.js
-      
+
    www/                                Diese Verzeichnis wird durch make normalerweise nach /var/epgd/www kopiert
       images/                          Bilder, die für das webIf benötigt werden, teilweise auch aus jquery-ui
       font/                            Font-dateien für die Icons
       lang/                            Sprachabhängige Dateien
          hilfe.html                    deutsche Hilfe Datei
          de.js                         deutsche Sprach-Ressourcendatei
-         
+
       common.js                        gemergte Datei aus 3rdParty-Scripten
       epgd.css                         compilierte Stylesheet-Datei
       epgd.js                          gemergte Datei aus allen src-js-scripten
       favicon.ico
       index.html                       Hauptdatei für das WebIf
-   
+
    custom.css                          optional, wenn diese Datei existiert, wird sie an die epgd.css angehangen. Darin kann dann css überschrieben werden.
                                        Achtung, bitte darauf achten, dass die Datei UTF OHNE BOM kodiert ist.
    dev-watch.sh                        Kann zum Entwickeln aufgerufen werden. Diese Datei überwacht per inotifywait die sourcen-Dateien auf Änderunegn
-                                       und compiliert/builded bei Änderungen die Dateien und kopiert die Dateien nach /var/epgd/www. 
+                                       und compiliert/builded bei Änderungen die Dateien und kopiert die Dateien nach /var/epgd/www.
                                        Vorraussetzung dafür ist ein installiertes Rhino.
-   
+
 Entwicklung:
 ============================================================================================================================
-Wenn Änderungen an den src/js Dateien gemacht werden, muss anschliessend immer "make core" aufgerufen werden 
-und dann die erstellte Datei www/epgd.js nach /var/epgd/www kopiert werden. 
+Wenn Änderungen an den src/js Dateien gemacht werden, muss anschliessend immer "make core" aufgerufen werden
+und dann die erstellte Datei www/epgd.js nach /var/epgd/www kopiert werden.
 Bei Änderungen an den less Dateien müssen diese compiliert werden "make style" und die dann die erstellte Datei www/epgd.css nach /var/epgd/www kopiert werden.
-Um den Entwicklungsprozess zu erleichtern, gibt es die Datei dev-watch.sh die man in einer Konsole aufrufen kann. 
-
-
-
+Um den Entwicklungsprozess zu erleichtern, gibt es die Datei dev-watch.sh die man in einer Konsole aufrufen kann.
diff --git a/http/src/css/dark.less b/http/src/css/dark.less
@@ -0,0 +1,63 @@
+/* Hier sind Variablen aus Jquery-ui. Sie werden folgendermass erstellt:
+    aus 3rdParty\jquery-ui-x:x.custom\development-bundle\themes\humanity\jquery-ui.css den Link kopieren und hier einfügen.
+    Dann diesen Link (nur Auswahl) per regulären Ausdruck
+       suchen "$([^=]+)=([^&]+)" und ersetzen "@$1: $2; "
+       suchen " ([a-f0-9]{6})" und ersetzen " #$1"
+*/
+@ui-fwDefault: normal;
+@ui-fsDefault: 1.1em;
+@ui-cornerRadius: 6px;
+@ui-bgColorHeader: #cb842e;
+@ui-bgTextureHeader: glass;
+@ui-bgImgOpacityHeader: 25;
+@ui-borderColorHeader: #d49768;
+@ui-fcHeader: #ffffff;
+@ui-iconColorHeader: #ffffff;
+@ui-bgColorContent: #f4f0ec;
+@ui-bgTextureContent: inset_soft;
+@ui-bgImgOpacityContent: 100;
+@ui-borderColorContent: #e0cfc2;
+@ui-fcContent: white;
+@ui-iconColorContent: #c47a23;
+@ui-bgColorDefault: #ede4d4;
+@ui-bgTextureDefault: glass;
+@ui-bgImgOpacityDefault: 70;
+@ui-borderColorDefault: #cdc3b7;
+@ui-fcDefault: #3f3731;
+@ui-iconColorDefault: #f08000;
+@ui-bgColorHover: #f5f0e5;
+@ui-bgTextureHover: glass;
+@ui-bgImgOpacityHover: 100;
+@ui-borderColorHover: #f5ad66;
+@ui-fcHover: #a46313;
+@ui-iconColorHover: #f08000;
+@ui-bgColorActive: #f4f0ec;
+@ui-bgTextureActive: highlight_hard;
+@ui-bgImgOpacityActive: 100;
+@ui-borderColorActive: #e0cfc2;
+@ui-fcActive: #b85700;
+@ui-iconColorActive: #f35f07;
+@ui-bgColorHighlight: #f5f5b5;
+@ui-bgTextureHighlight: highlight_hard;
+@ui-bgImgOpacityHighlight: 75;
+@ui-borderColorHighlight: #d9bb73;
+@ui-fcHighlight: #060200;
+@ui-iconColorHighlight: #cb672b;
+@ui-bgColorError: #fee4bd;
+@ui-bgTextureError: highlight_hard;
+@ui-bgImgOpacityError: 65;
+@ui-borderColorError: #f8893f;
+@ui-fcError: #592003;
+@ui-iconColorError: #ff7519;
+@ui-bgColorOverlay: #aaaaaa;
+@ui-bgTextureOverlay: flat;
+@ui-bgImgOpacityOverlay: 75;
+@ui-opacityOverlay: 30;
+@ui-bgColorShadow: #aaaaaa;
+@ui-bgTextureShadow: flat;
+@ui-bgImgOpacityShadow: 75;
+@ui-opacityShadow: 30;
+@ui-thicknessShadow: 8px;
+@ui-offsetTopShadow: -8px;
+@ui-offsetLeftShadow: -8px;
+@ui-cornerRadiusShadow: 8px;
diff --git a/http/src/css/default.less b/http/src/css/default.less
@@ -0,0 +1,63 @@
+/* Hier sind Variablen aus Jquery-ui. Sie werden folgendermass erstellt:
+    aus 3rdParty\jquery-ui-x:x.custom\development-bundle\themes\humanity\jquery-ui.css den Link kopieren und hier einfügen.
+    Dann diesen Link (nur Auswahl) per regulären Ausdruck
+       suchen "$([^=]+)=([^&]+)" und ersetzen "@$1: $2; "
+       suchen " ([a-f0-9]{6})" und ersetzen " #$1"
+*/
+@ui-fwDefault: normal;
+@ui-fsDefault: 1.1em;
+@ui-cornerRadius: 6px;
+@ui-bgColorHeader: #cb842e;
+@ui-bgTextureHeader: glass;
+@ui-bgImgOpacityHeader: 25;
+@ui-borderColorHeader: #d49768;
+@ui-fcHeader: #ffffff;
+@ui-iconColorHeader: #ffffff;
+@ui-bgColorContent: #f4f0ec;
+@ui-bgTextureContent: inset_soft;
+@ui-bgImgOpacityContent: 100;
+@ui-borderColorContent: #e0cfc2;
+@ui-fcContent: #1e1b1d;
+@ui-iconColorContent: #c47a23;
+@ui-bgColorDefault: #ede4d4;
+@ui-bgTextureDefault: glass;
+@ui-bgImgOpacityDefault: 70;
+@ui-borderColorDefault: #cdc3b7;
+@ui-fcDefault: #3f3731;
+@ui-iconColorDefault: #f08000;
+@ui-bgColorHover: #f5f0e5;
+@ui-bgTextureHover: glass;
+@ui-bgImgOpacityHover: 100;
+@ui-borderColorHover: #f5ad66;
+@ui-fcHover: #a46313;
+@ui-iconColorHover: #f08000;
+@ui-bgColorActive: #f4f0ec;
+@ui-bgTextureActive: highlight_hard;
+@ui-bgImgOpacityActive: 100;
+@ui-borderColorActive: #e0cfc2;
+@ui-fcActive: #b85700;
+@ui-iconColorActive: #f35f07;
+@ui-bgColorHighlight: #f5f5b5;
+@ui-bgTextureHighlight: highlight_hard;
+@ui-bgImgOpacityHighlight: 75;
+@ui-borderColorHighlight: #d9bb73;
+@ui-fcHighlight: #060200;
+@ui-iconColorHighlight: #cb672b;
+@ui-bgColorError: #fee4bd;
+@ui-bgTextureError: highlight_hard;
+@ui-bgImgOpacityError: 65;
+@ui-borderColorError: #f8893f;
+@ui-fcError: #592003;
+@ui-iconColorError: #ff7519;
+@ui-bgColorOverlay: #aaaaaa;
+@ui-bgTextureOverlay: flat;
+@ui-bgImgOpacityOverlay: 75;
+@ui-opacityOverlay: 30;
+@ui-bgColorShadow: #aaaaaa;
+@ui-bgTextureShadow: flat;
+@ui-bgImgOpacityShadow: 75;
+@ui-opacityShadow: 30;
+@ui-thicknessShadow: 8px;
+@ui-offsetTopShadow: -8px;
+@ui-offsetLeftShadow: -8px;
+@ui-cornerRadiusShadow: 8px;
diff --git a/http/src/css/epgd.less b/http/src/css/epgd.less
@@ -1,66 +1,3 @@
-/* Hier sind Variablen aus Jquery-ui. Sie werden folgendermass erstellt:
-    aus 3rdParty\jquery-ui-x:x.custom\development-bundle\themes\humanity\jquery-ui.css den Link kopieren und hier einfügen.
-    Dann diesen Link (nur Auswahl) per regulären Ausdruck
-       suchen "$([^=]+)=([^&]+)" und ersetzen "@$1: $2; "
-       suchen " ([a-f0-9]{6})" und ersetzen " #$1"
-*/
-@ui-fwDefault: normal;
-@ui-fsDefault: 1.1em;
-@ui-cornerRadius: 6px;
-@ui-bgColorHeader: #cb842e;
-@ui-bgTextureHeader: glass;
-@ui-bgImgOpacityHeader: 25;
-@ui-borderColorHeader: #d49768;
-@ui-fcHeader: #ffffff;
-@ui-iconColorHeader: #ffffff;
-@ui-bgColorContent: #f4f0ec;
-@ui-bgTextureContent: inset_soft;
-@ui-bgImgOpacityContent: 100;
-@ui-borderColorContent: #e0cfc2;
-@ui-fcContent: #1e1b1d;
-@ui-iconColorContent: #c47a23;
-@ui-bgColorDefault: #ede4d4;
-@ui-bgTextureDefault: glass;
-@ui-bgImgOpacityDefault: 70;
-@ui-borderColorDefault: #cdc3b7;
-@ui-fcDefault: #3f3731;
-@ui-iconColorDefault: #f08000;
-@ui-bgColorHover: #f5f0e5;
-@ui-bgTextureHover: glass;
-@ui-bgImgOpacityHover: 100;
-@ui-borderColorHover: #f5ad66;
-@ui-fcHover: #a46313;
-@ui-iconColorHover: #f08000;
-@ui-bgColorActive: #f4f0ec;
-@ui-bgTextureActive: highlight_hard;
-@ui-bgImgOpacityActive: 100;
-@ui-borderColorActive: #e0cfc2;
-@ui-fcActive: #b85700;
-@ui-iconColorActive: #f35f07;
-@ui-bgColorHighlight: #f5f5b5;
-@ui-bgTextureHighlight: highlight_hard;
-@ui-bgImgOpacityHighlight: 75;
-@ui-borderColorHighlight: #d9bb73;
-@ui-fcHighlight: #060200;
-@ui-iconColorHighlight: #cb672b;
-@ui-bgColorError: #fee4bd;
-@ui-bgTextureError: highlight_hard;
-@ui-bgImgOpacityError: 65;
-@ui-borderColorError: #f8893f;
-@ui-fcError: #592003;
-@ui-iconColorError: #ff7519;
-@ui-bgColorOverlay: #aaaaaa;
-@ui-bgTextureOverlay: flat;
-@ui-bgImgOpacityOverlay: 75;
-@ui-opacityOverlay: 30;
-@ui-bgColorShadow: #aaaaaa;
-@ui-bgTextureShadow: flat;
-@ui-bgImgOpacityShadow: 75;
-@ui-opacityShadow: 30;
-@ui-thicknessShadow: 8px;
-@ui-offsetTopShadow: -8px;
-@ui-offsetLeftShadow: -8px;
-@ui-cornerRadiusShadow: 8px;
 
 h5 {
     margin-bottom: 5px;
@@ -1242,6 +1179,11 @@ table.ui-datepicker-calendar {
     }
 }
 
+.searchForm {
+    overflow: auto;
+    height: 54vh;
+}
+
 .selMarkBlock {
     display: inline-block;
     text-align: center;

diff --git a/http/src/css/theme/default.less b/http/src/css/theme/default.less
@@ -3,5 +3,6 @@
 @import (inline) "../../../3rdParty/jquery-ui-1.11.4.custom/jquery-ui.min.css";
 @import (inline) "../../../3rdParty/jQuery-Timepicker-Addon-master/dist/jquery-ui-timepicker-addon.min.css";
 @import (inline) "../../../3rdParty/fontello/css/epgd.css";
+@import "../default.less";
 @import "../epgd.less";
 @import (inline ) "../../../3rdParty/boilerplate5/css/main_post.min.css";
diff --git a/http/src/js/5_timerDialog.js b/http/src/js/5_timerDialog.js
@@ -77,7 +77,7 @@ epgd.timerDialogBase.prototype = {
         for (i = 1; i < epgd.tr.dateTimePicker.dayNamesShort.length; i++)
             week += '<input name="tWeek" type="checkbox" />' + epgd.tr.dateTimePicker.dayNamesShort[i];
         week += '<input name="tWeek" type="checkbox" />' + epgd.tr.dateTimePicker.dayNamesShort[0];
-        this.$win = $('<div id="' + o.id + '" class="searchDialog"><form>'
+        this.$win = $('<div id="' + o.id + '" class="searchDialog"><form class="searchForm">'
          + '<div class="colBlock">'
             + '<div><label>&nbsp;</label><select id="tType"><option value="R">' + epgd.tr.pages.eventDetail.record + '</option><option value="V">' + epgd.tr.pages.eventDetail.ch_switch + '</option></select></div>'
             + '<div><label for="tSName">' + epgd.tr.pages.search.searchName + '</label><input type="text" id="tSName" /></div>'

diff --git a/http/www/epgd.css b/http/www/epgd.css
@@ -117,8 +117,8 @@
 .i-error:before { content: '\e82d'; } /* '' */
 .hidden{display:none !important;visibility:hidden}.visuallyhidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}.invisible{visibility:hidden}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}.clearfix{*zoom:1}@media print{*,*:before,*:after{background:transparent !important;color:#000 !important;box-shadow:none !important;text-shadow:none !important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}a[href^="#"]:after,a[href^="javascript:"]:after{content:""}pre,blockquote{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}tr,img{page-break-inside:avoid}img{max-width:100% !important}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}}
 /* Hier sind Variablen aus Jquery-ui. Sie werden folgendermass erstellt:
-    aus 3rdParty\jquery-ui-x:x.custom\development-bundle\themes\humanity\jquery-ui.css den Link kopieren und hier einf�gen.
-    Dann diesen Link (nur Auswahl) per regul�ren Ausdruck
+    aus 3rdParty\jquery-ui-x:x.custom\development-bundle\themes\humanity\jquery-ui.css den Link kopieren und hier einfügen.
+    Dann diesen Link (nur Auswahl) per regulären Ausdruck
        suchen "$([^=]+)=([^&]+)" und ersetzen "@$1: $2; "
        suchen " ([a-f0-9]{6})" und ersetzen " #$1"
 */
@@ -1138,6 +1138,10 @@ table.ui-datepicker-calendar {
 .searchDialog form.typeR .onlyTypeS {
   display: none;
 }
+.searchForm {
+  overflow: auto;
+  height: 54vh;
+}
 .selMarkBlock {
   display: inline-block;
   text-align: center;

diff --git a/http/www/epgd.js b/http/www/epgd.js
diff --git a/lib/common.c b/lib/common.c
@@ -51,8 +51,8 @@ const char* Elo::eloquences[] =
    "Detail",
    "Debug",
    "DebugDetail",
-   "WebSock",
-   "DebugWebSock",
+   "Web",
+   "DebugWeb",
    "Mqtt",
    "Db",
    "DebugDb",
@@ -61,6 +61,7 @@ const char* Elo::eloquences[] =
    "Curl",
    "CurlDebug",
    "EPG Plugins Detail",
+   "Search",
 
    nullptr
 };
@@ -129,11 +130,11 @@ void vtell(Eloquence elo, const char* format, va_list more)
    logMutex.Lock();
 
 #ifndef VDR_PLUGIN
-   static int init = no;
+   static bool init {false};
 
    if (!init)
    {
-      init = yes;
+      init = true;
       openlog(cEpgConfig::logName, LOG_CONS, cEpgConfig::logFacility);
    }
 #endif

diff --git a/lib/common.h b/lib/common.h
@@ -106,6 +106,7 @@ enum Eloquence
    eloCurl           = 0x01000,
    eloDebugCurl      = 0x02000,
    eloEpgPlgDetail   = 0x04000,
+   eloSearch         = 0x08000,
 
    eloNone = na
 };