diff --git a/source/clog-panel.lisp b/source/clog-panel.lisp index 18aec56..cfea91d 100644 --- a/source/clog-panel.lisp +++ b/source/clog-panel.lisp @@ -9,6 +9,7 @@ ;;; CLOG-PANELs are for doing layouts, base class for pluggins and custom ;;; widgets and is the base class for CLOG Builder's panels. +;;; Various layout functions for use on panels and divs ;;; CLOG-PANEL-BOXes are to layout a classic 5 panel layout in a panel ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; @@ -139,6 +140,27 @@ nil. Resizable only works if overflow is set to :SCROLL")) :html-id html-id :auto-place auto-place)) +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; +;; Implementation - Layout tools for panels, divs, etc +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; + +;;;;;;;;;;;;;;;;;;;; +;; envelope-panel ;; +;;;;;;;;;;;;;;;;;;;; + +(defgeneric envelope-panel (clog-element panel width height &key units) + (:documentation "Create a panel of WIDTH and HEIGHT with :relative +positioning to envelope PANEL. This allows any type of clog-panel (including +those created by CLOG Builder, to be positioned within :flex layouts or +otherwise treat the panel as an inline object.")) + +(defmethod envelope-panel ((obj clog-element) (panel clog-element) + width height &key (units :px)) + (place-inside-top-of + (create-div obj :style (format nil "position:relative;width:~A~A;height:~A~A" + width units height units)) + panel)) + ;;;;;;;;;;;;;;;;;;;;; ;; center-children ;; ;;;;;;;;;;;;;;;;;;;;; @@ -146,13 +168,15 @@ nil. Resizable only works if overflow is set to :SCROLL")) (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. Note: if children of clog-element are using -:absolute positioning they will not flow with flex and will not be -centered. Using :relative wrapped in div with :static positioning will -work. For example in CLOG Builder the panel is created in a static -positioning panel, if all the contents are positioning in a div -aboslute and that div is relative the expected bahvior of a centered -panel will happen.")) +CLOG-ELEMENT to :FLEX. + +Note: if children of CLOG-ELEMENT are using :absolute positioning they will +not flow with flex and will not be centered. Instead use :relative positioning. + +Note: to use with CLOG Buider Panels - use ENVELOPE-PANEL or in the builder +create a div at top:0 left:0 and size the div to be the boundaries of your panel +to be centered, then set the positioning on the panel to :relative. +Add all controls as child of that div.")) (defmethod center-children ((obj clog-element) &key (vertical t) (horizontal t)) (set-styles obj `(("display" "flex") diff --git a/source/clog.lisp b/source/clog.lisp index 6402e36..729e27d 100644 --- a/source/clog.lisp +++ b/source/clog.lisp @@ -642,6 +642,7 @@ embedded in a native template application.)" "CLOG-Panel-Box-Layout" (clog-panel-box-layout class) + (envelope-panel generic-function) (center-children generic-function) (create-panel-box-layout function) (center-panel generic-function) diff --git a/tools/clog-builder-eval.lisp b/tools/clog-builder-eval.lisp index f49102d..c282076 100644 --- a/tools/clog-builder-eval.lisp +++ b/tools/clog-builder-eval.lisp @@ -178,4 +178,4 @@ provide an interactive console.)")) (if *clogframe-mode* (open-browser :url (format nil "http://127.0.0.1:~A/test" *clog-port*)) (open-window (window (connection-body obj)) "/test"))) - (on-open-file obj :title-class "w3-yellow" :title "test eval" :text result))) + (on-open-file obj :title-class "w3-yellow" :title "Eval Results" :text result :has-time-out *editor-delay-on-eval-panels*))) diff --git a/tools/clog-builder-panels.lisp b/tools/clog-builder-panels.lisp index 3f27682..8713a74 100644 --- a/tools/clog-builder-panels.lisp +++ b/tools/clog-builder-panels.lisp @@ -554,6 +554,7 @@ not a temporarily attached one when using select-control." (btn-del (create-img tool-bar :alt-text "delete" :url-src img-btn-del :class btn-class)) ;;(btn-undo (create-img tool-bar :alt-text "undo" :url-src img-btn-undo :class btn-class)) ;;(btn-redo (create-img tool-bar :alt-text "redo" :url-src img-btn-redo :class btn-class)) + (btn-eval (create-img tool-bar :alt-text "evaluate" :url-src img-btn-sim :class btn-class)) (btn-test (create-img tool-bar :alt-text "test" :url-src img-btn-test :class btn-class)) (btn-rndr (create-img tool-bar :alt-text "render" :url-src img-btn-rndr :class btn-class)) (btn-save (create-img tool-bar :alt-text "save" :url-src img-btn-save :class btn-class)) @@ -582,6 +583,7 @@ not a temporarily attached one when using select-control." (setf (advisory-title btn-del) "delete") ;;(setf (advisory-title btn-undo) "undo") ;;(setf (advisory-title btn-redo) "redo") + (setf (advisory-title btn-eval) "evaluate") (setf (advisory-title btn-test) "test") (setf (advisory-title btn-rndr) "render to lisp - shift-click render as...") (setf (advisory-title btn-save) "save - shift-click save as...") @@ -594,6 +596,7 @@ not a temporarily attached one when using select-control." (setf (height btn-del) "12px") ;;(setf (height btn-undo) "12px") ;;(setf (height btn-redo) "12px") + (setf (height btn-eval) "12px") (setf (height btn-test) "12px") (setf (height btn-rndr) "12px") (setf (height btn-save) "12px") @@ -973,6 +976,8 @@ not a temporarily attached one when using select-control." (save obj nil)) (window-close win) (on-new-builder-panel obj :open-file file-name))) + (set-on-click btn-eval (lambda (obj) + (eval-test obj :test nil))) (set-on-click m-eval (lambda (obj) (eval-test obj :test nil))) (set-on-click btn-test #'eval-test) diff --git a/tools/clog-builder-render.lisp b/tools/clog-builder-render.lisp index e941372..6d9e840 100644 --- a/tools/clog-builder-render.lisp +++ b/tools/clog-builder-render.lisp @@ -93,13 +93,13 @@ \(let \(\(panel \(change-class \(clog:create-div clog-obj :content \"~A\" :hidden hidden :class class :html-id html-id :auto-place auto-place\) \'~A\)\)\) ~{~A~}~{~A~}~{~A~} panel\)\)~%" - (string-downcase package) + (string-downcase package) cname ;;defclass cmembers cname ;;defun (ppcre:regex-replace-all "\"" - (js-query content - (format nil + (js-query content + (format nil "var z=~a.clone();~ z.find('*').each(function(){~ var m=$(this).attr('data-clog-name'); diff --git a/tools/clog-builder-settings.lisp b/tools/clog-builder-settings.lisp index 19afd80..a576a3a 100644 --- a/tools/clog-builder-settings.lisp +++ b/tools/clog-builder-settings.lisp @@ -48,6 +48,7 @@ enableBasicAutocompletion: true, enableLiveAutocompletion : true") (defparameter *editor-delay-on-eval-sel* 15) +(defparameter *editor-delay-on-eval-panels* 30) (defparameter *editor-delay-on-eval-form* 30) (defparameter *editor-delay-on-eval-file* 60) diff --git a/tools/preferences.lisp.sample b/tools/preferences.lisp.sample index f0a2bd4..04debaa 100644 --- a/tools/preferences.lisp.sample +++ b/tools/preferences.lisp.sample @@ -76,8 +76,10 @@ showGutter : true, enableBasicAutocompletion: true, enableLiveAutocompletion : true") -;; Delay to automaticly close result windows + +;; Delay to automaticly close result windows - nil no auto close (setf *editor-delay-on-eval-sel* 15) +(setf *editor-delay-on-eval-panels* 30) (setf *editor-delay-on-eval-form* 30) (setf *editor-delay-on-eval-file* 60) @@ -92,7 +94,7 @@ ;; eval on main thread so (break) works for sbcl. (setf *clog-repl-eval-on-main-thread* nil) -;; CLOG Panel Builder +;; CLOG Panel Rendering (setf *builder-render-right-margin* 80) (setf *builder-render-case* :downcase)