From c6c9fa85d9f3550c2b875ab6aa7ab868c6d55424 Mon Sep 17 00:00:00 2001 From: David Botton Date: Sat, 27 Nov 2021 22:57:06 -0500 Subject: [PATCH] Added tutorial 27 - Panel Box Layouts --- README.md | 3 ++- source/clog-element.lisp | 25 +++++++++++++++-------- source/clog-panel.lisp | 18 ++++++++-------- tutorial/27-tutorial.lisp | 43 +++++++++++++++++++++++++++++++++++++++ tutorial/README.md | 1 + 5 files changed, 72 insertions(+), 18 deletions(-) create mode 100644 tutorial/27-tutorial.lisp diff --git a/README.md b/README.md index fcef2a3..15dc7d5 100644 --- a/README.md +++ b/README.md @@ -218,6 +218,7 @@ Tutorial Summary - [24-tutorial.lisp](tutorial/24-tutorial.lisp) - CLOG WEB containers - [25-tutorial.lisp](tutorial/25-tutorial.lisp) - A "local" web app using CLOG WEB - [26-tutorial.lisp](tutorial/26-tutorial.lisp) - A web page and form with CLOG WEB +- [27-tutorial.lisp](tutorial/27-tutorial.lisp) - Panel Box Layouts Demo Summary @@ -225,7 +226,7 @@ Demo Summary - [02-demo.lisp](demos/02-demo.lisp) - Chat - Private instant messenger - [03-demo.lisp](demos/03-demo.lisp) - IDE - A very simple common lisp IDE (see source if editor dosen't load) -- [04-demo.lisp](demos/04-demo.lisp) - CMS Website - A very simple database driver website +- [04-demo.lisp](demos/04-demo.lisp) - CMS Website - A very simple database driven website Tool Summary diff --git a/source/clog-element.lisp b/source/clog-element.lisp index 1daa7b0..5e9359c 100644 --- a/source/clog-element.lisp +++ b/source/clog-element.lisp @@ -1385,17 +1385,23 @@ parent in the DOM.")) ;; set-geometry ;; ;;;;;;;;;;;;;;;;;; -(defgeneric set-geometry (clog-element &key x y width height units) - (:documentation "Change the geometry :X :Y :WIDTH :HEIGHT each optional +(defgeneric set-geometry (clog-element &key left top right bottom width height units) + (:documentation "Change the geometry :LEFT :TOP :RIGHT :BOTTOM :WIDTH :HEIGHT each optional in UNITS (default :px)")) -(defmethod set-geometry ((obj clog-element) &key x y width height (units :px)) - (jquery-execute obj (format nil "css({~A~A~A~A})" - (if x - (format nil "'left':'~A~A'," x units) +(defmethod set-geometry ((obj clog-element) &key left top right bottom width height (units :px)) + (jquery-execute obj (format nil "css({~A~A~A~A~A~A})" + (if left + (format nil "'left':'~A~A'," left units) "") - (if y - (format nil "'top':'~A~A'," y 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 width (format nil "'width':'~A~A'," width units) @@ -2112,7 +2118,8 @@ A list of standard cursor types can be found at: '(member :baseline :sub :super :text-top :text-bottom :middle :top :bottom)) (defgeneric vertical-align (clog-element) - (:documentation "Get/Setf vertical-align.")) + (:documentation "Get/Setf vertical-align in table cells or if display +is set to :table-cell or for labels on form elements.")) (defmethod vertical-align ((obj clog-element)) (style obj "vertical-align")) diff --git a/source/clog-panel.lisp b/source/clog-panel.lisp index c240611..d4c0083 100644 --- a/source/clog-panel.lisp +++ b/source/clog-panel.lisp @@ -67,7 +67,7 @@ nil. Resizable only works if overflow is set to :SCROLL")) (class nil) (html-id nil) (auto-place t)) - (create-child obj (format nil "~A" + (create-child obj (format nil "~A" (if class (format nil " class='~A'" (escape-string class)) "") @@ -199,20 +199,22 @@ nil. Resizable only works if overflow is set to :SCROLL")) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;; (defun create-panel-box-layout (clog-obj &key (top-height 50) (left-width 50) - (bottom-height 50) (right-width 50)) + (bottom-height 50) (right-width 50) + (units "px")) + "Create a five panel app layout that fills entire contents of CLOG-OBJ." (let ((panel-box (make-instance 'clog-panel-box-layout))) (setf (top-panel panel-box) - (create-panel clog-obj :left 0 :top 0 :right 0 :height top-height)) - (setf (bottom-panel panel-box) - (create-panel clog-obj :left 0 :bottom 0 :right 0 :height bottom-height)) + (create-panel clog-obj :left 0 :top 0 :right 0 :height top-height :units units)) (setf (left-panel panel-box) (create-panel clog-obj :left 0 :top 0 :bottom 0 :width left-width - :margin-top top-height :margin-bottom bottom-height)) + :margin-top top-height :margin-bottom bottom-height :units units)) (setf (right-panel panel-box) (create-panel clog-obj :right 0 :top 0 :bottom 0 :width right-width - :margin-top top-height :margin-bottom bottom-height)) + :margin-top top-height :margin-bottom bottom-height :units units)) (setf (center-panel panel-box) (create-panel clog-obj :left 0 :top 0 :right 0 :bottom 0 :margin-left left-width :margin-top top-height - :margin-right right-width :margin-bottom bottom-height)) + :margin-right right-width :margin-bottom bottom-height :units units)) + (setf (bottom-panel panel-box) + (create-panel clog-obj :left 0 :bottom 0 :right 0 :height bottom-height :units units)) panel-box)) diff --git a/tutorial/27-tutorial.lisp b/tutorial/27-tutorial.lisp new file mode 100644 index 0000000..1cab20a --- /dev/null +++ b/tutorial/27-tutorial.lisp @@ -0,0 +1,43 @@ +(defpackage #:clog-user + (:use #:cl #:clog) + (:export start-tutorial)) + +(in-package :clog-user) + +(defun on-new-window (body) + (let* ((console (create-panel-box-layout body :left-width 200 :right-width 0)) + (head (create-div (top-panel console) :content "Image Viewer")) + (lbox (create-select (left-panel console))) + (viewer (create-img (center-panel console))) + (footer (create-div (bottom-panel console) + :content "(c) 2021 David Botton - BSD 3 Lic."))) + (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) + (setf (color head) :white) + ;; Setup viewer + (setf (width viewer) "100%") + ;; Setup File List + (setf (background-color (left-panel console)) :grey) + (setf (positioning lbox) :absolute) + (setf (size lbox) 2) ;; A size above 1 needed to get listbox + (set-geometry lbox :left 0 :top 0 :bottom 0 :width 200) + (add-select-options lbox '("kiarash-mansouri-fzoSNcxqtp8-unsplash.jpg" + "windmills.jpg" + "yellow-clogs.jpg" + "clogicon.png")) + (set-on-change lbox (lambda (obj) + (declare (ignore obj)) + (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) + (run body))) + +(defun start-tutorial () + (initialize 'on-new-window) + (open-browser)) diff --git a/tutorial/README.md b/tutorial/README.md index 6bec878..02a560f 100644 --- a/tutorial/README.md +++ b/tutorial/README.md @@ -59,3 +59,4 @@ Tutorial Summary - 24-tutorial.lisp - CLOG WEB containers - 25-tutorial.lisp - A "local" web app using CLOG WEB - 26-tutorial.lisp - A web page and form with CLOG WEB +- 27-tutorial.lisp - Panel Box Layouts