From cf48218eafd77c5a0bf9b2c1aa90abd240f22f0f Mon Sep 17 00:00:00 2001 From: David Botton Date: Sun, 28 Nov 2021 12:13:27 -0500 Subject: [PATCH] Added CENTER-CHILDREN --- source/clog-element.lisp | 8 +- source/clog-panel.lisp | 153 +++++++++++++++++++++----------------- source/clog.lisp | 1 + tutorial/27-tutorial.lisp | 7 +- 4 files changed, 92 insertions(+), 77 deletions(-) diff --git a/source/clog-element.lisp b/source/clog-element.lisp index 5e9359c..6a63257 100644 --- a/source/clog-element.lisp +++ b/source/clog-element.lisp @@ -128,9 +128,11 @@ must be in DOM, ie placed or auto-placed.")) (jquery-execute obj (format nil "css({~{~A~}})" (mapcar (lambda (n) - (format nil "'~A':'~A'," - (first n) - (second n))) + (if n + (format nil "'~A':'~A'," + (first n) + (second n)) + "")) style-list)))) ;;;;;;;;;;;;;;; diff --git a/source/clog-panel.lisp b/source/clog-panel.lisp index d4c0083..e4ea963 100644 --- a/source/clog-panel.lisp +++ b/source/clog-panel.lisp @@ -67,75 +67,90 @@ nil. Resizable only works if overflow is set to :SCROLL")) (class nil) (html-id nil) (auto-place t)) - (create-child obj (format nil "~A" - (if class - (format nil " class='~A'" (escape-string class)) - "") - (if style - (format nil "~A;" (escape-string style)) - "") - (if left - (format nil "left:~A~A;" left units) - "") - (if top - (format nil "top:~A~A;" top units) - "") - (if right - (format nil "right:~A~A;" right units) - "") - (if bottom - (format nil "bottom:~A~A;" bottom units) - "") - (if margin-left - (format nil "margin-left:~A~A;" margin-left units) - "") - (if margin-top - (format nil "margin-top:~A~A;" margin-top units) - "") - (if margin-right - (format nil "margin-right:~A~A;" margin-right units) - "") - (if margin-bottom - (format nil "margin-bottom:~A~A;" margin-bottom units) - "") - (if width - (format nil "width:~A~A;" width units) - "") - (if height - (format nil "height:~A~A;" height units) - "") - (if border-style - (format nil "border-style:~A;" border-style) - "") - (if border-width - (format nil "border-width:~A;" border-width) - "") - (if border-color - (format nil "border-color:~A;" border-color) - "") - (if background-color - (format nil "background-color:~A;" background-color) - "") - (if overflow - (format nil "overflow:~A;" overflow) - "") - (if display - (format nil "display:~A;" display) - "") - (if resizable - (format nil "resize:~A;" resizable) - "") - (if positioning - (format nil "position:~A;" - (escape-string positioning)) - "") - (if hidden - "visibility:hidden;" - "") - (escape-string content)) - :clog-type 'clog-panel - :html-id html-id - :auto-place auto-place)) + (create-child obj + (format nil "~A" + (if class + (format nil " class='~A'" (escape-string class)) + "") + (if style + (format nil "~A;" (escape-string style)) + "") + (if left + (format nil "left:~A~A;" left units) + "") + (if top + (format nil "top:~A~A;" top units) + "") + (if right + (format nil "right:~A~A;" right units) + "") + (if bottom + (format nil "bottom:~A~A;" bottom units) + "") + (if margin-left + (format nil "margin-left:~A~A;" margin-left units) + "") + (if margin-top + (format nil "margin-top:~A~A;" margin-top units) + "") + (if margin-right + (format nil "margin-right:~A~A;" margin-right units) + "") + (if margin-bottom + (format nil "margin-bottom:~A~A;" margin-bottom units) + "") + (if width + (format nil "width:~A~A;" width units) + "") + (if height + (format nil "height:~A~A;" height units) + "") + (if border-style + (format nil "border-style:~A;" border-style) + "") + (if border-width + (format nil "border-width:~A;" border-width) + "") + (if border-color + (format nil "border-color:~A;" border-color) + "") + (if background-color + (format nil "background-color:~A;" background-color) + "") + (if overflow + (format nil "overflow:~A;" overflow) + "") + (if display + (format nil "display:~A;" display) + "") + (if resizable + (format nil "resize:~A;" resizable) + "") + (if positioning + (format nil "position:~A;" + (escape-string positioning)) + "") + (if hidden + "visibility:hidden;" + "") + (escape-string content)) + :clog-type 'clog-panel + :html-id html-id + :auto-place auto-place)) + +;;;;;;;;;;;;;;;;;;;;; +;; center-children ;; +;;;;;;;;;;;;;;;;;;;;; + +(defgeneric center-children (clog-element &key vertical horizontal) + (:documentation "Align children of CLOG-ELEMENT VERTICAL (default t) +and/or HORIZONTAL (default t). This will set the DISPLAY property of +CLOG-ELEMENT to :FLEX.")) + +(defmethod center-children ((obj clog-element) &key (vertical t) (horizontal t)) + (set-styles obj `(("display" "flex") + ,(when vertical '("align-items" "center")) + ,(when horizontal '("justify-content" "center"))))) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; Implementation - clog-panel-box-layout diff --git a/source/clog.lisp b/source/clog.lisp index 462211c..3d3d2f2 100644 --- a/source/clog.lisp +++ b/source/clog.lisp @@ -474,6 +474,7 @@ embedded in a native template application.)" "CLOG-Panel-Box-Layout" (clog-panel-box-layout class) + (center-children generic-function) (create-panel-box-layout function) (center-panel generic-function) (top-panel generic-function) diff --git a/tutorial/27-tutorial.lisp b/tutorial/27-tutorial.lisp index 1cab20a..af6ff1a 100644 --- a/tutorial/27-tutorial.lisp +++ b/tutorial/27-tutorial.lisp @@ -14,9 +14,7 @@ (declare (ignore footer)) ;; Setup Top (setf (background-color (top-panel console)) :teal) - (setf (display (top-panel console)) :flex) - (setf (justify-content (top-panel console)) :center) - (setf (align-items (top-panel console)) :center) + (center-children (top-panel console)) (setf (color head) :white) ;; Setup viewer (setf (width viewer) "100%") @@ -34,8 +32,7 @@ (setf (url-src viewer) (format nil "/img/~A" (value lbox))))) ;; Setup Bottom - (setf (display (bottom-panel console)) :flex) - (setf (align-items (bottom-panel console)) :center) + (center-children (bottom-panel console) :horizontal nil) (run body))) (defun start-tutorial ()