v3.7.3 beta (Dashticz#758)

* redesign domoticz block framework * improved popup consistency
sammyke007 · Jan 25, 2021 · cc4e220 · cc4e220
1 parent 386a00a
commit cc4e220
Show file tree

Hide file tree

Showing 33 changed files with 1,235 additions and 893 deletions.
diff --git a/css/creative.css b/css/creative.css
@@ -311,19 +311,18 @@
   background-color: #555;
 }
 
-.modal-header {
-  border-bottom: 0px !important;
+.modal-dialog-custom .modal-content:not(.modal-url) .close {
+  color: white;
+  opacity: 0.7;
 }
 
-.graphclose .close{
+.modal-dialog-custom .modal-content:not(.modal-url) .close:focus, .modal-dialog-custom .modal-content:not(.modal-url) .close:hover {
   color: white;
-  opacity: 0.7
- }
+  opacity: 1;
+}
+
+
 
- .graphclose .close:focus, .graphclose .close:hover {
-  color: white;
-  opacity: 1
- }
 
 /*
 next css sets the default height of the frame popup
@@ -394,8 +393,25 @@ next css sets the default height of the frame popup
   width: 80%;
   height: 80%;
   margin: auto;
+  margin: 5px;
 }
 
+.modal-dialog-custom .modal-content:not(.modal-url) {
+  background-color: #222;
+  color: white;
+}
+
+.modal-header {
+  border-bottom: 0px !important;
+}
+
+.modal-content.url {
+  background-color: white;
+  color: black;
+}
+
+
+
 .material-switch>input[type='checkbox'] {
   display: none;
 }
@@ -448,9 +464,11 @@ next css sets the default height of the frame popup
 /* END || Popup modal settings (need to sort and arrange first) */
 
 .containslog .items {
-  height: 154px;
   overflow: auto;
-  width: calc(100% - 40px);
+}
+
+.containslog:not(.popup) .items {
+  height: 154px;
 }
 
 .containslog .items .level0 {
@@ -465,16 +483,17 @@ next css sets the default height of the frame popup
   color: #ffffff;
 }
 
-.containslog .items .level0.popup {
-  color: #c70626;
+.containslog.popup .items .level2 {
+  color: #727272;
 }
 
-.containslog .items .level1.popup {
-  color: #067676;
+.containslog .items .timestamp {
+  white-space: nowrap;
+  vertical-align: top;
 }
 
-.containslog .items .level2.popup {
-  color: #727272;
+.containslog .items .sep {
+  width: 5px
 }
 
 .containsicalendar table.calendar {
@@ -497,7 +516,7 @@ next css sets the default height of the frame popup
 }
 
 .containslog.popup .items {
-  min-height: 300px;
+
 }
 
 .colbar.transbg {
@@ -779,14 +798,17 @@ a.playlist {
 }
 
 .modal-body {
-  height: 100%
+  height: 100%;
+  min-height: 1px
 }
 
-.modal.opengraph .modal-content {
-  background-color: #222;
-  color: white;
+/*
+.modal.openpopup .frameclose {
+  background-color: #fff;
+  color: black;
   margin: 5px;
 }
+*/
 
 .graphcontent {
   height: 100%;
@@ -1135,6 +1157,10 @@ p {
   background-clip: padding-box;
 }
 
+.dt_block.popup {
+  background:unset;
+}
+
 .weatherfull .transbg {
   padding-top: 9px !important;
   padding-bottom: 10px !important;
@@ -3051,7 +3077,7 @@ td.agenda-title {
 }
 
 .dt_content .dial {
-  position: absolute;
+  position: relative;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);

diff --git a/docs/blocks/buttons.rst b/docs/blocks/buttons.rst
@@ -56,6 +56,8 @@ Parameters
     - ``1..99999``: Refresh time of the button image in seconds. There is no maximum. The default is 60 (=1 minute).
   * - url
     - ``'<url>'``: URL of the page to open in a popup window on click. 
+  * - popup
+    - ``'mypopup'``: Opens the  'mypopup' block in a new window on click.
   * - forceheight
     - | Set the height of the image in a button
       | ``'200px'``: Set image height to 200px. 
@@ -72,9 +74,6 @@ Parameters
   * - refreshiframe
     - | ``0``: No automatic refresh of a button popup frame (default)
       | ``1..99999``: Refresh time of the button popup frame in sec. There is no maximum. The default is 60 (=1 minute).   
-  * - log
-    - | ``true`` Button will show the Domoticz log info
-      | ``false`` Default
   * - level
     - Domoticz log level used by the log-button.
   * - newwindow
@@ -83,6 +82,11 @@ Parameters
       | ``2``: open in new frame (default, to prevent a breaking change in default behavior)
       | ``3``: no new window/frame (for intent handling, api calls). HTTP get request.
       | ``4``: no new window/frame (for intent handling, api calls). HTTP post request. (forcerefresh not supported)
+      | ``5``: open in a new browser tab
+  * - auto_close
+    - Closes the opened window after a certain period of time (only applicable when newwindow is 1,2 or 5)
+    - | ``0``: (=Default) No auto close
+      | ``5``: Closes the popup window after 5 seconds.
   * - password
     - | Password protect switches, buttons, thermostats, sliders, blinds
       | ``'secret'``: Password to use
@@ -135,26 +139,6 @@ Example on how to use menu buttons::
       columns: ['menu', 5,6]  
     }
 
-
-.. _logbutton :
-
-Domoticz log button
-~~~~~~~~~~~~~~~~~~~
-
-With a log-button you can show the Domoticz log in a popup window::
-
-    var buttons = {}
-    buttons.log = {
-      key:'log',
-      width:12,
-      icon:'fas fa-microchip',
-      title: 'Domoticz Log',
-      log:true,
-      level: 2
-    }
-
-It's also possible to show the Domoticz log directly in the Dashticz dashboard. See :ref:`customlog`
-
 .. _forcerefresh:
 
 forcerefresh

diff --git a/docs/blocks/specials/calendar.rst b/docs/blocks/specials/calendar.rst
@@ -1,5 +1,7 @@
 .. _customcalendar :
 
+.. note :: From 3.7.3 onwards only the 'new calendar' block is supported.
+
 Calendar 
 ########
 

diff --git a/docs/blocks/specials/domoticzlog.rst b/docs/blocks/specials/domoticzlog.rst
@@ -10,6 +10,3 @@ You can add the Domoticz log to a column as follows::
     }
 
 .. image :: domoticzlog.png
-
-It's also possible to show the Domoticz log in a popup window after pressing a button.
-See :ref:`logbutton` 
diff --git a/docs/blocks/specials/moon.rst b/docs/blocks/specials/moon.rst
@@ -3,21 +3,17 @@
 Moon 
 ####
 
-Via a special button definition you can add a picture of the current moon phase
+With the moon block you can add a picture of the current moon phase
 to your dashboard. Use the following code::
 
-    buttons = {}
-    buttons.moon = {
-      width:12,
-      refresh: 3600,
-      btnimage: 'moon'
-    }
     columns[2] = {}
-    columns[2]['blocks'] = [ buttons.moon]
+    columns[2]['blocks'] = [ 'moon']
 
-As you can see it's in fact a normal button, but with image name ``'moon'``.
-Dashticz will automatically use the correct image for the current moon phase from the folder
-``<dashticz>/img/moon``
+If needed you can change the width::
+
+  blocks['moon'] = {
+    width: 6
+  }
 
 We have 100 moon images. A moon cycle takes approximately 28 days.
 That means that the moon picture will refresh approximately 4 times a day.

diff --git a/docs/customcss/customcss.rst b/docs/customcss/customcss.rst
@@ -499,3 +499,33 @@ Change size and color of Standby Screen items
       font-size:80px !important;
       color: #4E585B !important;
    }
+
+.. _popupstyling:
+
+Popup windows
+-------------
+
+Popup windows have the following class attached to it: ``modal-dialog-custom``.
+
+The popup window contains a div with the class ``modal-content``. Depending on the popup type, the following classes will be applied as well:
+
+* ``modal-url`` For an url opened in a popup window
+* ``modal-graph`` For a graph opened in a popup window
+* ``modal-popup`` For a popup created from the ``popup`` block parameter, except when the ``popup`` parameter refers to a graph block. In the latter case, the ``modal-graph`` parameter will be applied.
+
+A ``modal-url`` popup window, will have a white background, white border, and black 'close' button.
+
+The other popup windows will have a black background, and a white 'close' button.
+
+The default styling is a black background, with white 'close' button.
+
+As an example, to give url-popups a green backgrond with a red close button::
+
+   .modal-content.modal-url {
+      background-color: green
+   }
+
+   .modal-content.modal-url .close {
+      color: red;
+      opacity: 1;
+   }
diff --git a/docs/develop/code.rst b/docs/develop/code.rst
@@ -128,6 +128,17 @@ An example of a more extensive implementation::
 
 Add ``'myblock'`` to the components variable at the start of ``js/dashticz.js``
 
+The following key words are reserved and should not be modified in ``me`` or ``block``:
+
+* key
+* mountPoint
+* type
+* name
+
+And specifically for ``me``:
+
+* block 
+
 Github workflow
 ---------------
 

diff --git a/docs/releasenotes/releasenotes.rst b/docs/releasenotes/releasenotes.rst
@@ -5,8 +5,16 @@ For Dashticz's **beta** version Release Notes go to: https://dashticz.readthedoc
 
 For Dashticz's **master** version Release Notes go to: https://dashticz.readthedocs.io/en/master/releasenotes/index.html
 
-Recent changes
---------------
+v3.7.3 beta (24-1-2021)
+-----------------------
+
+.. note :: Make a backup of CONFIG.js, custom.css and custom.js
+
+Code
+~~~~
+
+* Redesign internal block framework
+* Removed old calendar block 'icalendar' and calendarurl config setting
 
 Enhancements
 ~~~~~~~~~~~~

diff --git a/docs/releasenotes/upgrading/upgrading.rst b/docs/releasenotes/upgrading/upgrading.rst
@@ -4,6 +4,7 @@ Upgrade instructions
 .. toctree::
    :maxdepth: 2
 
+   v373
    v349
    v341
    v320
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,6 +4,7 @@ Upgrade instructions @@
     .. toctree::
        :maxdepth: 2
+       v373
        v349
        v341
        v320
@@ Expand Down @@