From 42edc011a9c34a12741993fb5bff46f1c40c9e4a Mon Sep 17 00:00:00 2001 From: Tim Berners-Lee Date: Tue, 30 Nov 2021 21:25:36 +0000 Subject: [PATCH 1/8] tweaks to broken style --- src/style.js | 4 ++-- src/widgets/forms/basic.ts | 20 ++++---------------- src/widgets/forms/fieldParams.ts | 7 ++++--- 3 files changed, 10 insertions(+), 21 deletions(-) diff --git a/src/style.js b/src/style.js index 7895a4e53..b8507011f 100644 --- a/src/style.js +++ b/src/style.js @@ -21,13 +21,13 @@ export const style = { // styleModule textInputStyle: 'background-color: #eef; padding: 0.5em; border: .05em solid #88c; border-radius:0.2em; font-size: 100%; margin:0.2em;', textInputStyleUneditable: // Color difference only - 'background-color: white; padding: 0.5em; border: .05em solid white; border-radius:0.2em; font-size: 100%; margin:0.2em; ', + 'background-color: white; padding: 0.5em; border: .05em solid white; border-radius:0.2em; font-size: 100%; margin:0.2em;', textInputSize: 20, // Default text input size in characters roughly buttonStyle: 'background-color: #fff; padding: 0.7em; border: .01em solid white; border-radius:0.2em; font-size: 100%; margin: 0.3em;', // 'background-color: #eef; commentStyle: 'padding: 0.7em; border: none; font-size: 100%; white-space: pre-wrap;', iconStyle: 'width: 3em; height: 3em; margin: 0.1em; border-radius: 1em;', - smallButtonStyle: 'margin: 0.2em; width: 1em; height:1em', + smallButtonStyle: 'margin: 0.2em; width: 1em; height:1em;', classIconStyle: 'width: 3em; height: 3em; margin: 0.1em; border-radius: 0.2em; border: 0.1em solid green; padding: 0.2em; background-color: #efe;', // combine with buttonStyle confirmPopupStyle: 'padding: 0.7em; border-radius: 0.2em; border: 0.1em solid orange; background-color: white; box-shadow: 0.5em 0.9em #888;', tabBorderRadius: '0.2em', diff --git a/src/widgets/forms/basic.ts b/src/widgets/forms/basic.ts index 72744cb62..ba6369f4a 100644 --- a/src/widgets/forms/basic.ts +++ b/src/widgets/forms/basic.ts @@ -120,28 +120,16 @@ export function basicField ( ) } const rhs = renderNameValuePair(dom, kb, box, form) - /* - box.style.display = 'flex' - box.style.flexDirection = 'row' - const lhs = box.appendChild(dom.createElement('div')) - lhs.style.width = formFieldNameBoxWidth - const rhs = box.appendChild(dom.createElement('div')) - lhs.appendChild(fieldLabel(dom, property as NamedNode, form)) - lhs.setAttribute('class', 'formFieldName') - lhs.setAttribute('style', formFieldNameBoxStyle) - rhs.setAttribute('class', 'formFieldValue') - */ // It can be cleaner to just remove empty fields if you can't edit them anyway const suppressEmptyUneditable = kb.anyJS(form, ns.ui('suppressEmptyUneditable'), null, formDoc) const uri = mostSpecificClassURI(form) let params = fieldParams[uri] - if (params === undefined) params = {} // non-bottom field types can do this - const style = params.style || textInputStyle - // box.appendChild(dom.createTextNode(' uri='+uri+', pattern='+ params.pattern)) + if (params === undefined) params = { style: '' } // non-bottom field types can do this + const style = textInputStyle + params.style const field = dom.createElement('input') - ;(field as any).style = textInputStyle // Do we have to override length etc? + ;(field as any).style = style rhs.appendChild(field) field.setAttribute('type', params.type ? params.type : 'text') @@ -171,7 +159,7 @@ export function basicField ( } if (!kb.updater.editable((doc as NamedNode).uri)) { field.readOnly = true // was: disabled. readOnly is better - ;(field as any).style = textInputStyleUneditable + ;(field as any).style = textInputStyleUneditable + params.style // backgroundColor = textInputBackgroundColorUneditable if (suppressEmptyUneditable && field.value === '') { box.style.display = 'none' // clutter diff --git a/src/widgets/forms/fieldParams.ts b/src/widgets/forms/fieldParams.ts index 72cef7c9d..6f64b7b46 100644 --- a/src/widgets/forms/fieldParams.ts +++ b/src/widgets/forms/fieldParams.ts @@ -28,6 +28,7 @@ export const fieldParams: { [ fieldUri: string ]: FieldParamsObject } = { [ns.ui('ColorField').uri]: { size: 9, type: 'color', + style: 'height: 1.5em;', dt: 'color', pattern: /^\s*#[0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f]([0-9a-f][0-9a-f])?\s*$/ }, // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color @@ -55,21 +56,21 @@ export const fieldParams: { [ fieldUri: string ]: FieldParamsObject } = { [ns.ui('IntegerField').uri]: { size: 12, - style: 'text-align: right', + style: 'text-align: right;', dt: 'integer', pattern: /^\s*-?[0-9]+\s*$/ }, [ns.ui('DecimalField').uri]: { size: 12, - style: 'text-align: right', + style: 'text-align: right;', dt: 'decimal', pattern: /^\s*-?[0-9]*(\.[0-9]*)?\s*$/ }, [ns.ui('FloatField').uri]: { size: 12, - style: 'text-align: right', + style: 'text-align: right;', dt: 'float', pattern: /^\s*-?[0-9]*(\.[0-9]*)?((e|E)-?[0-9]*)?\s*$/ }, From d0428aed6412dd3069c2d9e0b3ffb65d16ad6d1e Mon Sep 17 00:00:00 2001 From: Tim Berners-Lee Date: Tue, 30 Nov 2021 23:20:48 +0000 Subject: [PATCH 2/8] style tweaks --- src/style.js | 2 +- src/widgets/forms.js | 11 +++++------ src/widgets/forms/basic.ts | 9 +++++---- src/widgets/forms/fieldParams.ts | 2 +- 4 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/style.js b/src/style.js index b8507011f..02279cd8a 100644 --- a/src/style.js +++ b/src/style.js @@ -13,7 +13,7 @@ const formFieldNameBoxWidth = '8em' // The fixed amount to get form fields to li export const style = { // styleModule checkboxStyle: 'colour: black; font-size: 100%; padding-left: 0.5 em; padding-right: 0.5 em;', - checkboxInputStyle: 'font-size: 150%; height: 1.2em; width: 1.2em; background-color: #eef; margin: 0.1em', + checkboxInputStyle: 'font-size: 150%; height: 1.2em; width: 1.2em; background-color: #eef; border-radius:0.2em; margin: 0.1em', fieldLabelStyle: 'color: #3B5998; text-decoration: none;', formSelectSTyle: diff --git a/src/widgets/forms.js b/src/widgets/forms.js index b5838a5bf..80f1a27b9 100644 --- a/src/widgets/forms.js +++ b/src/widgets/forms.js @@ -1587,9 +1587,8 @@ export function buildCheckboxForm (dom, kb, lab, del, ins, form, dataDoc, trista const editable = kb.updater.editable(dataDoc.uri) const input = dom.createElement('button') - const colorCarrier = input // Which element changes color to flag changed/saving/saved? + const colorCarrier = input input.style = style.checkboxInputStyle - // colorCarrier.style = style.checkboxStyle rhs.appendChild(input) function fix (x) { @@ -1644,7 +1643,7 @@ export function buildCheckboxForm (dom, kb, lab, del, ins, form, dataDoc, trista if (!editable) return box const boxHandler = function (_e) { - colorCarrier.style.color = '#bbb;' // grey -- not saved yet + colorCarrier.style.color = '#bbb' // grey -- not saved yet const toDelete = input.state === true ? ins : input.state === false ? del : [] input.newState = input.state === null @@ -1676,8 +1675,8 @@ export function buildCheckboxForm (dom, kb, lab, del, ins, form, dataDoc, trista debug.log(' @@@@@ weird if 409 - does hold statement') } } - colorCarrier.style.color = 'color: #black;' - colorCarrier.style.backgroundColor = '#fee;' + colorCarrier.style.color = '#000' + colorCarrier.style.backgroundColor = '#fee' box.appendChild( errorMessageBlock( dom, @@ -1687,7 +1686,7 @@ export function buildCheckboxForm (dom, kb, lab, del, ins, form, dataDoc, trista ) ) } else { - colorCarrier.style = 'color: #black;' + colorCarrier.style.color = '#000' input.state = input.newState input.textContent = { true: checkMarkCharacter, diff --git a/src/widgets/forms/basic.ts b/src/widgets/forms/basic.ts index ba6369f4a..72e78395f 100644 --- a/src/widgets/forms/basic.ts +++ b/src/widgets/forms/basic.ts @@ -1,7 +1,7 @@ import { st, BlankNode, Literal, Node, NamedNode, Variable, Store } from 'rdflib' import { solidLogicSingleton } from '../../logic' import * as ns from '../../ns' -import { textInputStyle, textInputStyleUneditable, formFieldNameBoxWidth, formFieldNameBoxStyle } from '../../style' +import { textInputSize, textInputStyle, textInputStyleUneditable, formFieldNameBoxWidth, formFieldNameBoxStyle } from '../../style' import { label } from '../../utils' import { errorMessageBlock } from '../error' import { mostSpecificClassURI } from './fieldFunction' @@ -127,13 +127,14 @@ export function basicField ( const uri = mostSpecificClassURI(form) let params = fieldParams[uri] if (params === undefined) params = { style: '' } // non-bottom field types can do this - const style = textInputStyle + params.style + const paramStyle = params.style || '' + const style = textInputStyle + paramStyle const field = dom.createElement('input') ;(field as any).style = style rhs.appendChild(field) field.setAttribute('type', params.type ? params.type : 'text') - const size = kb.anyJS(form, ns.ui('size')) || style.textInputSize || 20 + const size = kb.anyJS(form, ns.ui('size')) || textInputSize || 20 field.setAttribute('size', size) const maxLength = kb.any(form, ns.ui('maxLength')) @@ -159,7 +160,7 @@ export function basicField ( } if (!kb.updater.editable((doc as NamedNode).uri)) { field.readOnly = true // was: disabled. readOnly is better - ;(field as any).style = textInputStyleUneditable + params.style + ;(field as any).style = textInputStyleUneditable + paramStyle // backgroundColor = textInputBackgroundColorUneditable if (suppressEmptyUneditable && field.value === '') { box.style.display = 'none' // clutter diff --git a/src/widgets/forms/fieldParams.ts b/src/widgets/forms/fieldParams.ts index 6f64b7b46..a3e40b93c 100644 --- a/src/widgets/forms/fieldParams.ts +++ b/src/widgets/forms/fieldParams.ts @@ -28,7 +28,7 @@ export const fieldParams: { [ fieldUri: string ]: FieldParamsObject } = { [ns.ui('ColorField').uri]: { size: 9, type: 'color', - style: 'height: 1.5em;', + style: 'height: 3em;', // around 1.5em is padding dt: 'color', pattern: /^\s*#[0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f]([0-9a-f][0-9a-f])?\s*$/ }, // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color From 37229b7af888b750dad02582f2675e97f2a54b0f Mon Sep 17 00:00:00 2001 From: Tim Berners-Lee Date: Tue, 30 Nov 2021 23:35:50 +0000 Subject: [PATCH 3/8] fix test --- test/unit/widgets/forms/basic.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/unit/widgets/forms/basic.test.ts b/test/unit/widgets/forms/basic.test.ts index 5433a3605..a3977d428 100644 --- a/test/unit/widgets/forms/basic.test.ts +++ b/test/unit/widgets/forms/basic.test.ts @@ -647,7 +647,7 @@ describe('basicField', () => { callbackFunction ) const style = (result.childNodes[1].childNodes[0] as HTMLInputElement).getAttribute('style') - expect(style).toEqual('text-align: right') + expect(style).toEqual('background-color: #eef; padding: 0.5em; border: .05em solid #88c; border-radius:0.2em; font-size: 100%; margin:0.2em;text-align: right;') }) it('Defaults to textInputStyle', () => { From 0a0922a24cf57677b43e3c3d2ecbf0994d9db51c Mon Sep 17 00:00:00 2001 From: Tim Berners-Lee Date: Wed, 1 Dec 2021 22:37:49 +0000 Subject: [PATCH 4/8] add missing to doc, link talk to doc --- Documentation/forms-intro.html | 70 +++++++++++++++++++++++++----- Documentation/talks/FormsTalk.html | 51 +++++++++++++--------- 2 files changed, 90 insertions(+), 31 deletions(-) diff --git a/Documentation/forms-intro.html b/Documentation/forms-intro.html index 63a9a7be1..5396e0c63 100644 --- a/Documentation/forms-intro.html +++ b/Documentation/forms-intro.html @@ -93,9 +93,11 @@ } table.parameters { background-color: #dddddd; + margin-left: 4em; } /* background-color: #ddddff; */ table.properties { background-color: #ddddff; + margin-left: 4em; } /* background-color: #ddddff; */ td { padding: 0.5em; @@ -399,6 +401,24 @@

Group

the same as for Form.

+ + + + + + + + + + + + +
weightxsd:integer0:lighter than normal, 1: Normal, 2,3: heavier than normal
partsrdf:Collection + The form fields, forms, in the group +
+ + +

Choice

The user choses an item from a class.

@@ -425,9 +445,7 @@

Choice

canMintNew - xsd:Boolean - If the user doesn't find the thing they want, can they introduce an item of that class by filling in a form about it? [Boolean] @@ -435,8 +453,8 @@

Choice

- If a new thing is minted, that will be done with a form which is a - ui:creationForm for the class. +

If a new thing is minted, that will be done with a form which is a + ui:creationForm for the class.

Multiple

@@ -454,6 +472,37 @@

Multiple

form. It is the field, or the address, and so on.

+ + + + + + + + + + + + + + + + + + + + + + +
orderedBooleanIf true, the user has an ordered array of things, and the data is in an RDF collection. + If false, the UI is irrelevant and the data is a series of arcs.
propertyrdf:PropertyThe API details or query endpint and query details to be usde to search of the itemn in + the databasse.
reverseBooleanIf set, the form will write data triple like X P S instead of the normal S P X. +
partFormThe form to be used for each one. +
+ + + +

Classifier

@@ -468,7 +517,7 @@

Classifier

- +

This form field leverages the ontology heavily. It pulls the subclasses of the given class, and makes a pop-up menu for the user to chose one. If and only if the ontology says that the class is a disjoint union @@ -477,7 +526,7 @@

Classifier

shows that that subclass has its own subclasses, then the user will be prompted to pick one of those, to (if they like) further refine the selection. And so on. - +

The classifier pops a menu to allow the user to select a set of values to classify the subject. @@ -517,7 +566,7 @@

Options

- and for each case: +

and for each case:

@@ -565,15 +614,12 @@

Autocomplete

- + - - - @@ -634,9 +680,11 @@

Conclusion

daily life at home and at work. It can be vary efficient as developers can reuse material between forms. Users can even generate their own forms.

+

Future directions include separate implementations of the form UI code in for various platforms, and using various UI frameworks. There may also be extensions of the system with new field types, more options for setting style from various sources, etc. +

diff --git a/Documentation/talks/FormsTalk.html b/Documentation/talks/FormsTalk.html index 0d3618d91..c8737e128 100644 --- a/Documentation/talks/FormsTalk.html +++ b/Documentation/talks/FormsTalk.html @@ -165,10 +165,10 @@

Single Line Text field

Examples of other form fields

    -
  1. Examples of individual Form Fields
    2. -
  2. Examples of structures in forms: Groups
    3. -
  3. Selection, Options, Autocomplete
    4. -
  4. Examples of a Solid profile editing form
    5. +
  5. Examples of individual Form Fields
    6. +
  6. Examples of structures in forms: Groups
    7. +
  7. Selection, Options, Autocomplete
    8. +
  8. Examples of a Solid profile editing form
labelPropertyStringrdf:Property The property which will be used to store the name of the selected thing as a separate triple
dataSourceDataSourceThe API details or query endpint and query details to be usde to search of the itemn in the databasse.