From a121985d1176238847a7245d7e7f20f60105e472 Mon Sep 17 00:00:00 2001 From: Sean DeNigris Date: Wed, 28 Feb 2024 23:16:56 -0500 Subject: [PATCH] [Doc]: Bloc Form UX Lepiter Page --- lepiter/3pc995dl252amolepioa9xo7v.lepiter | 875 ++++++++++++++++++++++ 1 file changed, 875 insertions(+) create mode 100644 lepiter/3pc995dl252amolepioa9xo7v.lepiter diff --git a/lepiter/3pc995dl252amolepioa9xo7v.lepiter b/lepiter/3pc995dl252amolepioa9xo7v.lepiter new file mode 100644 index 00000000..90adbedd --- /dev/null +++ b/lepiter/3pc995dl252amolepioa9xo7v.lepiter @@ -0,0 +1,875 @@ +{ + "__schema" : "4.1", + "__type" : "page", + "uid" : { + "__type" : "uuid", + "uuid" : "db09346a-89cd-0d00-aeba-24dd0d38903e" + }, + "pageType" : { + "__type" : "namedPage", + "title" : "Bloc Forms - UX" + }, + "children" : { + "__type" : "snippets", + "items" : [ + { + "__type" : "textSnippet", + "children" : { + "__type" : "snippets", + "items" : [ ] + }, + "createEmail" : { + "__type" : "email", + "emailString" : "" + }, + "createTime" : { + "__type" : "time", + "time" : { + "__type" : "dateAndTime", + "dateAndTimeString" : "2024-02-11T23:26:13.290817-05:00" + } + }, + "editEmail" : { + "__type" : "email", + "emailString" : "" + }, + "editTime" : { + "__type" : "time", + "time" : { + "__type" : "dateAndTime", + "dateAndTimeString" : "2024-02-11T23:28:26.911026-05:00" + } + }, + "uid" : { + "__type" : "uid", + "uidString" : "WrM0aonNDQCuuy/uDTiQPg==" + }, + "paragraphStyle" : { + "__type" : "textStyle" + }, + "string" : "Right now, there is no feedback on data validity except at the end when the form is submitted. The confusion is accentuated because the error message is delivered via GT notification, spatially far from the form." + }, + { + "__type" : "textSnippet", + "children" : { + "__type" : "snippets", + "items" : [ + { + "__type" : "textSnippet", + "children" : { + "__type" : "snippets", + "items" : [ + { + "__type" : "textSnippet", + "children" : { + "__type" : "snippets", + "items" : [ ] + }, + "createEmail" : { + "__type" : "email", + "emailString" : "" + }, + "createTime" : { + "__type" : "time", + "time" : { + "__type" : "dateAndTime", + "dateAndTimeString" : "2024-02-11T23:33:04.731732-05:00" + } + }, + "editEmail" : { + "__type" : "email", + "emailString" : "" + }, + "editTime" : { + "__type" : "time", + "time" : { + "__type" : "dateAndTime", + "dateAndTimeString" : "2024-02-11T23:33:16.900517-05:00" + } + }, + "uid" : { + "__type" : "uid", + "uidString" : "j4I8eInNDQC66UYODTiQPg==" + }, + "paragraphStyle" : { + "__type" : "textStyle" + }, + "string" : "- can the input be written to the memento without error?" + }, + { + "__type" : "textSnippet", + "children" : { + "__type" : "snippets", + "items" : [ ] + }, + "createEmail" : { + "__type" : "email", + "emailString" : "" + }, + "createTime" : { + "__type" : "time", + "time" : { + "__type" : "dateAndTime", + "dateAndTimeString" : "2024-02-11T23:33:29.311015-05:00" + } + }, + "editEmail" : { + "__type" : "email", + "emailString" : "" + }, + "editTime" : { + "__type" : "time", + "time" : { + "__type" : "dateAndTime", + "dateAndTimeString" : "2024-02-11T23:33:52.96664-05:00" + } + }, + "uid" : { + "__type" : "uid", + "uidString" : "lMoxhInNDQC8mXdZDTiQPg==" + }, + "paragraphStyle" : { + "__type" : "textStyle" + }, + "string" : "- validation; ideally there would be a way to get as much or as little detail as the user wants" + } + ] + }, + "createEmail" : { + "__type" : "email", + "emailString" : "" + }, + "createTime" : { + "__type" : "time", + "time" : { + "__type" : "dateAndTime", + "dateAndTimeString" : "2024-02-11T23:30:19.91909-05:00" + } + }, + "editEmail" : { + "__type" : "email", + "emailString" : "" + }, + "editTime" : { + "__type" : "time", + "time" : { + "__type" : "dateAndTime", + "dateAndTimeString" : "2024-02-11T23:32:34.475249-05:00" + } + }, + "uid" : { + "__type" : "uid", + "uidString" : "S+fneInNDQC6/eeVDTiQPg==" + }, + "paragraphStyle" : { + "__type" : "textStyle" + }, + "string" : "In text editors, on each keystroke, validate the following. If so, do nothing. If not, display a subtle warning, like maybe a small orange triangle next to the label" + } + ] + }, + "createEmail" : { + "__type" : "email", + "emailString" : "" + }, + "createTime" : { + "__type" : "time", + "time" : { + "__type" : "dateAndTime", + "dateAndTimeString" : "2024-02-11T23:28:36.689268-05:00" + } + }, + "editEmail" : { + "__type" : "email", + "emailString" : "" + }, + "editTime" : { + "__type" : "time", + "time" : { + "__type" : "dateAndTime", + "dateAndTimeString" : "2024-02-11T23:28:45.17737-05:00" + } + }, + "uid" : { + "__type" : "uid", + "uidString" : "r/xrconNDQC1kz1BDTiQPg==" + }, + "paragraphStyle" : { + "__type" : "textStyle" + }, + "string" : "Possible behavior" + }, + { + "__type" : "textSnippet", + "children" : { + "__type" : "snippets", + "items" : [ ] + }, + "createEmail" : { + "__type" : "email", + "emailString" : "" + }, + "createTime" : { + "__type" : "time", + "time" : { + "__type" : "dateAndTime", + "dateAndTimeString" : "2024-02-16T06:29:26.302763-05:00" + } + }, + "editEmail" : { + "__type" : "email", + "emailString" : "" + }, + "editTime" : { + "__type" : "time", + "time" : { + "__type" : "dateAndTime", + "dateAndTimeString" : "2024-02-16T06:32:52.878812-05:00" + } + }, + "uid" : { + "__type" : "uid", + "uidString" : "Nsocy9/NDQCmnyH4AJUTjg==" + }, + "paragraphStyle" : { + "__type" : "textStyle" + }, + "string" : "Implementation challenge: we need the text editor, if there is one, to send event notifications, but where? This needs to be set up once per field, so that seems to rule out using the builder - how would you map back to fields?" + }, + { + "__type" : "textSnippet", + "children" : { + "__type" : "snippets", + "items" : [ ] + }, + "createEmail" : { + "__type" : "email", + "emailString" : "" + }, + "createTime" : { + "__type" : "time", + "time" : { + "__type" : "dateAndTime", + "dateAndTimeString" : "2024-02-16T06:33:44.796592-05:00" + } + }, + "editEmail" : { + "__type" : "email", + "emailString" : "" + }, + "editTime" : { + "__type" : "time", + "time" : { + "__type" : "dateAndTime", + "dateAndTimeString" : "2024-02-16T06:35:00.691722-05:00" + } + }, + "uid" : { + "__type" : "uid", + "uidString" : "4hqF2t/NDQCsBApbAJUTjg==" + }, + "paragraphStyle" : { + "__type" : "textStyle" + }, + "string" : "The editor element gets passed to {{gtMethod:MAElementBuilder>>using:addInputField:}} as a valuable. So the only place you really know whether there is a text editor, is when the valuable is created" + }, + { + "__type" : "textSnippet", + "children" : { + "__type" : "snippets", + "items" : [ ] + }, + "createEmail" : { + "__type" : "email", + "emailString" : "" + }, + "createTime" : { + "__type" : "time", + "time" : { + "__type" : "dateAndTime", + "dateAndTimeString" : "2024-02-17T21:41:52.716468-05:00" + } + }, + "editEmail" : { + "__type" : "email", + "emailString" : "" + }, + "editTime" : { + "__type" : "time", + "time" : { + "__type" : "dateAndTime", + "dateAndTimeString" : "2024-02-17T21:42:17.723346-05:00" + } + }, + "uid" : { + "__type" : "uid", + "uidString" : "3yQYqADODQC1fykjCLhBSg==" + }, + "paragraphStyle" : { + "__type" : "textStyle" + }, + "string" : "# Icons, Dynamic" + }, + { + "__type" : "textSnippet", + "children" : { + "__type" : "snippets", + "items" : [ ] + }, + "createEmail" : { + "__type" : "email", + "emailString" : "" + }, + "createTime" : { + "__type" : "time", + "time" : { + "__type" : "dateAndTime", + "dateAndTimeString" : "2024-02-17T21:42:17.865844-05:00" + } + }, + "editEmail" : { + "__type" : "email", + "emailString" : "" + }, + "editTime" : { + "__type" : "time", + "time" : { + "__type" : "dateAndTime", + "dateAndTimeString" : "2024-02-17T21:42:44.202295-05:00" + } + }, + "uid" : { + "__type" : "uid", + "uidString" : "ROeXqQDODQC1+5JuCLhBSg==" + }, + "paragraphStyle" : { + "__type" : "textStyle" + }, + "string" : "In this case, we'd like to show a warning triangle, checkmark, or nothing depending on the validation result of a field." + }, + { + "__type" : "textSnippet", + "children" : { + "__type" : "snippets", + "items" : [ ] + }, + "createEmail" : { + "__type" : "email", + "emailString" : "" + }, + "createTime" : { + "__type" : "time", + "time" : { + "__type" : "dateAndTime", + "dateAndTimeString" : "2024-02-17T22:18:34.591613-05:00" + } + }, + "editEmail" : { + "__type" : "email", + "emailString" : "" + }, + "editTime" : { + "__type" : "time", + "time" : { + "__type" : "dateAndTime", + "dateAndTimeString" : "2024-02-17T22:35:22.792672-05:00" + } + }, + "uid" : { + "__type" : "uid", + "uidString" : "oRlWKwHODQCSaZuxCLhBSg==" + }, + "paragraphStyle" : { + "__type" : "textStyle" + }, + "string" : "Since the basic requirement is just a triangle, why don't we natively create one in GT? Doing a global search for \"triangle\" leads to a page in the GT book about geometry that references {{gtMethod:BlGeometryVisualAndLayoutBoundsExamples>>trianglePolygon}}. This can easily be adapted to the size and shape we are looking for:" + }, + { + "__type" : "pharoSnippet", + "children" : { + "__type" : "snippets", + "items" : [ ] + }, + "createEmail" : { + "__type" : "email", + "emailString" : "" + }, + "createTime" : { + "__type" : "time", + "time" : { + "__type" : "dateAndTime", + "dateAndTimeString" : "2024-02-17T22:19:15.495081-05:00" + } + }, + "editEmail" : { + "__type" : "email", + "emailString" : "" + }, + "editTime" : { + "__type" : "time", + "time" : { + "__type" : "dateAndTime", + "dateAndTimeString" : "2024-02-17T22:21:05.081988-05:00" + } + }, + "uid" : { + "__type" : "uid", + "uidString" : "1zrGLQHODQCV8dEGCLhBSg==" + }, + "code" : "geometry := BlPolygon\r\t\tvertices:\r\t\t\t{(8 @ 0).\r\t\t\t(16 @ 16).\r\t\t\t(0 @ 16)}.\rBlElement new\r\tgeometry: geometry;\r\tbackground: Color orange;\r\tyourself." + }, + { + "__type" : "textSnippet", + "children" : { + "__type" : "snippets", + "items" : [ ] + }, + "createEmail" : { + "__type" : "email", + "emailString" : "" + }, + "createTime" : { + "__type" : "time", + "time" : { + "__type" : "dateAndTime", + "dateAndTimeString" : "2024-02-17T22:29:45.048181-05:00" + } + }, + "editEmail" : { + "__type" : "email", + "emailString" : "" + }, + "editTime" : { + "__type" : "time", + "time" : { + "__type" : "dateAndTime", + "dateAndTimeString" : "2024-02-17T22:30:54.421449-05:00" + } + }, + "uid" : { + "__type" : "uid", + "uidString" : "x2hMUwHODQCdXntaCLhBSg==" + }, + "paragraphStyle" : { + "__type" : "textStyle" + }, + "string" : "But browsing the geometry class hierarchy, we find there is a ready-made {{gtClass:BlTriangleGeometry}}, et voila!" + }, + { + "__type" : "pharoSnippet", + "children" : { + "__type" : "snippets", + "items" : [ ] + }, + "createEmail" : { + "__type" : "email", + "emailString" : "" + }, + "createTime" : { + "__type" : "time", + "time" : { + "__type" : "dateAndTime", + "dateAndTimeString" : "2024-02-17T22:26:45.556375-05:00" + } + }, + "editEmail" : { + "__type" : "email", + "emailString" : "" + }, + "editTime" : { + "__type" : "time", + "time" : { + "__type" : "dateAndTime", + "dateAndTimeString" : "2024-02-17T22:50:27.012021-05:00" + } + }, + "uid" : { + "__type" : "uid", + "uidString" : "RKGZSAHODQCYOxzaCLhBSg==" + }, + "code" : "icon := BlElement new\r\tgeometry: BlTriangleGeometry new beTop;\r\tsize: 16@16;\r\tbackground: Color orange;\r\tyourself.\r\t\rlabel := BrLabel new\r\taptitude: BrGlamorousLabelAptitude;\r\ttext: 'Label'.\r\rBrHorizontalPane new\r\tfitContent;\r\taddChild: label;\r\taddChild: (icon asScalableElement \r\t\tconstraintsDo: [ :c | \r\t\t\tc horizontal fitContent ]);\r\tyourself." + }, + { + "__type" : "textSnippet", + "children" : { + "__type" : "snippets", + "items" : [ + { + "__type" : "textSnippet", + "children" : { + "__type" : "snippets", + "items" : [ ] + }, + "createEmail" : { + "__type" : "email", + "emailString" : "" + }, + "createTime" : { + "__type" : "time", + "time" : { + "__type" : "dateAndTime", + "dateAndTimeString" : "2024-02-17T21:43:41.979871-05:00" + } + }, + "editEmail" : { + "__type" : "email", + "emailString" : "" + }, + "editTime" : { + "__type" : "time", + "time" : { + "__type" : "dateAndTime", + "dateAndTimeString" : "2024-02-17T21:44:02.097853-05:00" + } + }, + "uid" : { + "__type" : "uid", + "uidString" : "IF6brgDODQC4f7L1CLhBSg==" + }, + "paragraphStyle" : { + "__type" : "textStyle" + }, + "string" : "We start with an icon:" + }, + { + "__type" : "pharoSnippet", + "children" : { + "__type" : "snippets", + "items" : [ ] + }, + "createEmail" : { + "__type" : "email", + "emailString" : "" + }, + "createTime" : { + "__type" : "time", + "time" : { + "__type" : "dateAndTime", + "dateAndTimeString" : "2024-02-17T21:44:12.82399-05:00" + } + }, + "editEmail" : { + "__type" : "email", + "emailString" : "" + }, + "editTime" : { + "__type" : "time", + "time" : { + "__type" : "dateAndTime", + "dateAndTimeString" : "2024-02-17T22:04:11.616993-05:00" + } + }, + "uid" : { + "__type" : "uid", + "uidString" : "BQdysADODQC5LPvZCLhBSg==" + }, + "code" : "icon := BrGlamorousVectorIcons warning." + }, + { + "__type" : "textSnippet", + "children" : { + "__type" : "snippets", + "items" : [ ] + }, + "createEmail" : { + "__type" : "email", + "emailString" : "" + }, + "createTime" : { + "__type" : "time", + "time" : { + "__type" : "dateAndTime", + "dateAndTimeString" : "2024-02-17T21:53:13.635393-05:00" + } + }, + "editEmail" : { + "__type" : "email", + "emailString" : "" + }, + "editTime" : { + "__type" : "time", + "time" : { + "__type" : "dateAndTime", + "dateAndTimeString" : "2024-02-17T22:00:05.061031-05:00" + } + }, + "uid" : { + "__type" : "uid", + "uidString" : "gxuu0ADODQC94ZZACLhBSg==" + }, + "paragraphStyle" : { + "__type" : "textStyle" + }, + "string" : "To fit the icon into the particular space we have, we look for inspiration from {{gtClass:BrGlamorousVectorIcons|show=gtIconsFor:|label=GT's icon browser view}}. Here, icons of differing sizes (like smaller than average {{gtMethod:BrGlamorousVectorIcons class>>smallUpwards}} all appear uniformly. Exploring the view's source, the trick seems to be `asScalableElement`, which returns a {{gtClass:BlScalableElement}}. Checking that class's comment reveals that it is a helper to keep an element scaled exactly to its size." + }, + { + "__type" : "textSnippet", + "children" : { + "__type" : "snippets", + "items" : [ ] + }, + "createEmail" : { + "__type" : "email", + "emailString" : "" + }, + "createTime" : { + "__type" : "time", + "time" : { + "__type" : "dateAndTime", + "dateAndTimeString" : "2024-02-17T21:49:12.147753-05:00" + } + }, + "editEmail" : { + "__type" : "email", + "emailString" : "" + }, + "editTime" : { + "__type" : "time", + "time" : { + "__type" : "dateAndTime", + "dateAndTimeString" : "2024-02-17T22:00:22.550068-05:00" + } + }, + "uid" : { + "__type" : "uid", + "uidString" : "MVVJwgDODQC6DXFlCLhBSg==" + }, + "paragraphStyle" : { + "__type" : "textStyle" + }, + "string" : "One interesting for SVG icon creation is that if the element size does not match the SVG \"viewbox\", the icon is clipped if it is scaled:" + }, + { + "__type" : "pharoSnippet", + "children" : { + "__type" : "snippets", + "items" : [ ] + }, + "createEmail" : { + "__type" : "email", + "emailString" : "" + }, + "createTime" : { + "__type" : "time", + "time" : { + "__type" : "dateAndTime", + "dateAndTimeString" : "2024-02-17T21:49:05.765772-05:00" + } + }, + "editEmail" : { + "__type" : "email", + "emailString" : "" + }, + "editTime" : { + "__type" : "time", + "time" : { + "__type" : "dateAndTime", + "dateAndTimeString" : "2024-02-17T21:52:00.405427-05:00" + } + }, + "uid" : { + "__type" : "uid", + "uidString" : "p/XnwQDODQC6CZliCLhBSg==" + }, + "code" : "(icon size: 32@32) asScalableElement size: 64@64" + }, + { + "__type" : "textSnippet", + "children" : { + "__type" : "snippets", + "items" : [ ] + }, + "createEmail" : { + "__type" : "email", + "emailString" : "" + }, + "createTime" : { + "__type" : "time", + "time" : { + "__type" : "dateAndTime", + "dateAndTimeString" : "2024-02-17T22:00:42.011546-05:00" + } + }, + "editEmail" : { + "__type" : "email", + "emailString" : "" + }, + "editTime" : { + "__type" : "time", + "time" : { + "__type" : "dateAndTime", + "dateAndTimeString" : "2024-02-17T22:03:50.161763-05:00" + } + }, + "uid" : { + "__type" : "uid", + "uidString" : "JdNn6wDODQCKZGF9CLhBSg==" + }, + "paragraphStyle" : { + "__type" : "textStyle" + }, + "string" : "We want the icon to be part of the label (come right after it actually), and be scaled to match the text height. Let's play a bit..." + }, + { + "__type" : "pharoSnippet", + "children" : { + "__type" : "snippets", + "items" : [ ] + }, + "createEmail" : { + "__type" : "email", + "emailString" : "" + }, + "createTime" : { + "__type" : "time", + "time" : { + "__type" : "dateAndTime", + "dateAndTimeString" : "2024-02-17T22:01:07.833041-05:00" + } + }, + "editEmail" : { + "__type" : "email", + "emailString" : "" + }, + "editTime" : { + "__type" : "time", + "time" : { + "__type" : "dateAndTime", + "dateAndTimeString" : "2024-02-17T22:02:25.843298-05:00" + } + }, + "uid" : { + "__type" : "uid", + "uidString" : "stLx7ADODQCMXLU/CLhBSg==" + }, + "code" : "label := BrLabel new\r\taptitude: BrGlamorousLabelAptitude;\r\ttext: 'Label'." + }, + { + "__type" : "pharoSnippet", + "children" : { + "__type" : "snippets", + "items" : [ ] + }, + "createEmail" : { + "__type" : "email", + "emailString" : "" + }, + "createTime" : { + "__type" : "time", + "time" : { + "__type" : "dateAndTime", + "dateAndTimeString" : "2024-02-17T22:02:28.613633-05:00" + } + }, + "editEmail" : { + "__type" : "email", + "emailString" : "" + }, + "editTime" : { + "__type" : "time", + "time" : { + "__type" : "dateAndTime", + "dateAndTimeString" : "2024-02-17T22:36:07.844039-05:00" + } + }, + "uid" : { + "__type" : "uid", + "uidString" : "r3HC8QDODQCNNdxlCLhBSg==" + }, + "code" : "BrHorizontalPane new\r\t\t\tfitContent;\r\t\t\taddChild: label;\r\t\t\taddChild: (icon create asScalableElement \r\t\t\t\tscaleStrategy: BlScalableFitHeightStrategy new;\r\t\t\t\tconstraintsDo: [ :c | \r\t\t\t\t\t\tc horizontal fitContent ]);\r\t\t\tyourself." + }, + { + "__type" : "textSnippet", + "children" : { + "__type" : "snippets", + "items" : [ ] + }, + "createEmail" : { + "__type" : "email", + "emailString" : "" + }, + "createTime" : { + "__type" : "time", + "time" : { + "__type" : "dateAndTime", + "dateAndTimeString" : "2024-02-17T22:35:22.788872-05:00" + } + }, + "editEmail" : { + "__type" : "email", + "emailString" : "" + }, + "editTime" : { + "__type" : "time", + "time" : { + "__type" : "dateAndTime", + "dateAndTimeString" : "2024-02-17T22:35:22.788872-05:00" + } + }, + "uid" : { + "__type" : "uid", + "uidString" : "TPRtZwHODQCgDNAhCLhBSg==" + }, + "paragraphStyle" : { + "__type" : "textStyle" + }, + "string" : "Let's scrap this for now. Too complex for little benefit. " + } + ] + }, + "createEmail" : { + "__type" : "email", + "emailString" : "" + }, + "createTime" : { + "__type" : "time", + "time" : { + "__type" : "dateAndTime", + "dateAndTimeString" : "2024-02-17T22:34:34.67225-05:00" + } + }, + "editEmail" : { + "__type" : "email", + "emailString" : "" + }, + "editTime" : { + "__type" : "time", + "time" : { + "__type" : "dateAndTime", + "dateAndTimeString" : "2024-02-17T22:34:45.841938-05:00" + } + }, + "uid" : { + "__type" : "uid", + "uidString" : "jcKPZAHODQCfpgyPCLhBSg==" + }, + "paragraphStyle" : { + "__type" : "textStyle" + }, + "string" : "## SVG Icon" + } + ] + }, + "createEmail" : { + "__type" : "email", + "emailString" : "" + }, + "createTime" : { + "__type" : "time", + "time" : { + "__type" : "dateAndTime", + "dateAndTimeString" : "2024-02-11T23:26:13.247838-05:00" + } + }, + "editEmail" : { + "__type" : "email", + "emailString" : "" + }, + "editTime" : { + "__type" : "time", + "time" : { + "__type" : "dateAndTime", + "dateAndTimeString" : "2024-02-11T23:26:33.982729-05:00" + } + } +} \ No newline at end of file