Form Builder: 2nd iteration of streamlined UI

r3-fabian · Nov 24, 2022 · 9e2af27 · 9e2af27
1 parent 53e6d58
commit 9e2af27
Show file tree

Hide file tree

Showing 14 changed files with 225 additions and 193 deletions.
diff --git a/cache/captions/de_de b/cache/captions/de_de
@@ -676,7 +676,6 @@
 			"readonly":"Lesend",
 			"required":"Benötigt",
 			"scale":"UI-Skalierung",
-			"shortcuts":"Shortcuts",
 			"sidebarField":"{NAME}: Feldeinstellungen",
 			"sidebarFieldColumns":"Spalten",
 			"sidebarFieldColumnSettings":"Spalteneinstellungen",

diff --git a/cache/captions/en_us b/cache/captions/en_us
@@ -676,7 +676,6 @@
 			"readonly":"Read only",
 			"required":"Required",
 			"scale":"UI scale",
-			"shortcuts":"Shortcuts",
 			"sidebarField":"{NAME}: Field settings",
 			"sidebarFieldColumns":"Columns",
 			"sidebarFieldColumnSettings":"Column settings",

diff --git a/cache/captions/it_it b/cache/captions/it_it
@@ -676,7 +676,6 @@
 			"readonly":"Solo lettura",
 			"required":"Obbligatorio",
 			"scale":"UI scale",
-			"shortcuts":"Shortcuts",
 			"sidebarField":"{NAME}: Field settings",
 			"sidebarFieldColumns":"Columns",
 			"sidebarFieldColumnSettings":"Column settings",

diff --git a/cache/captions/ro_ro b/cache/captions/ro_ro
@@ -676,7 +676,6 @@
 			"readonly":"Numai citire",
 			"required":"Necesar",
 			"scale":"UI scale",
-			"shortcuts":"Shortcuts",
 			"sidebarField":"{NAME}: Field settings",
 			"sidebarFieldColumns":"Columns",
 			"sidebarFieldColumnSettings":"Column settings",

diff --git a/www/comps/app.css b/www/comps/app.css
@@ -60,11 +60,11 @@
 	--color-menu-border:hsl(0,0%,96%,1.00);
 	--color-navigation-default:#444;
 
-	--color-form-builder-actions:hsl(200,24%,56%);
-	--color-form-builder-actions-bg:hsl(200,37%,90%);
-	--color-form-builder-columns:hsl(353,15%,50%);
-	--color-form-builder-container:hsl(113,25%,60%);
-	--color-form-builder-selected:hsl(235,100%,50%);
+	--color-form-builder-actions:hsl(196deg 45% 86%);
+	--color-form-builder-actions-bg:hsl(200deg,37%,90%);
+	--color-form-builder-columns:hsl(247deg 32% 84%);
+	--color-form-builder-container:hsl(99deg 47% 83%);
+	--color-form-builder-selected:hsl(235deg,100%,50%);
 
 	/**/
 	/* images */
@@ -183,11 +183,11 @@ body                                         { --depth:6; }
 .builder .lookup                             { --depth:1; }
 .builder-icon-input .iconLine                { --depth:0; }
 .builder-icon-input .iconLine.disabled       { --depth:5; }
-.builder-form-content .container-nested      { --depth:1; }
 .builder-form-state                          { --depth:5; }
 .builder-form-state-effect                   { --depth:7; }
-.builder-field                               { --depth:5; }
-.builder-field .column                       { --depth:4; }
+.builder-field                               { --depth:9; }
+.builder-field .builder-columns              { --depth:1; }
+.builder-field .container-nested             { --depth:1; }
 .builder-modules .item-wrap                  { --depth:5; }
 .builder-menu                                { --depth:4; }
 .builder-articles-assign                     { --depth:2; }
@@ -655,6 +655,13 @@ table td.maximum{
 	min-width:300px;
 	max-width:600px;
 }
+.default-inputs input.dynamic,
+.default-inputs select.dynamic,
+.default-inputs textarea.dynamic,
+.default-inputs .input-custom.dynamic{
+	min-width:unset;
+	max-width:unset;
+}
 .default-inputs input:focus,
 .default-inputs select:focus,
 .default-inputs textarea:focus,

diff --git a/www/comps/builder/builder.css b/www/comps/builder/builder.css
@@ -472,7 +472,7 @@
 	padding:2px 2px 2px 6px;
 	line-height:24px;
 	display:flex;
-	flex-flow:row wrap;
+	flex-flow:row nowrap;
 	align-items:center;
 	overflow:visible;
 	color:var(--color-bg-font);
@@ -513,9 +513,17 @@
 	outline:3px solid var(--color-form-builder-selected);
 }
 .builder-drag-item .title{
+	flex:1 0 auto;
 	padding:0px 3px;
-	word-wrap:anywhere;
+	/*word-wrap:anywhere;*/
 	font-size:95%;
+
+	/* auto cutting text */
+	width:100px;
+	min-width:0px;
+	text-overflow:ellipsis;
+	white-space:nowrap;
+	overflow:hidden;
 }
 .builder-drag-item .reference{
 	margin-right:6px;

diff --git a/www/comps/builder/builderCaption.js b/www/comps/builder/builderCaption.js
@@ -9,13 +9,13 @@ let MyBuilderCaption = {
 		<template v-if="!richtext">
 			<input v-model="valueInput"
 				v-if="!multiLine"
-				:class="{ long:longInput }"
+				:class="{ dynamic:dynamicSize, long:longInput }"
 				:disabled="readonly"
 				:placeholder="placeholder"
 			/>
 			<textarea v-model="valueInput"
 				v-else
-				:class="{ long:longInput }"
+				:class="{ dynamic:dynamicSize, long:longInput }"
 				:disabled="readonly"
 				:placeholder="placeholder"
 			></textarea>
@@ -30,6 +30,7 @@ let MyBuilderCaption = {
 	</div>`,
 	props:{
 		contentName:{ type:String,  required:false, default:'' },
+		dynamicSize:{ type:Boolean, required:false, default:false },
 		language:   { type:String,  required:true },
 		longInput:  { type:Boolean, required:false, default:false },
 		modelValue: { type:Object,  required:true },

diff --git a/www/comps/builder/builderColumnOptions.js b/www/comps/builder/builderColumnOptions.js
@@ -1,4 +1,5 @@
-import MyBuilderQuery from './builderQuery.js';
+import MyBuilderCaption from './builderCaption.js';
+import MyBuilderQuery   from './builderQuery.js';
 import {
 	getIndexAttributeIdsByJoins,
 	isAttributeFiles,
@@ -12,10 +13,13 @@ export {MyBuilderColumnOptions as default};
 
 let MyBuilderColumnOptions = {
 	name:'my-builder-column-options',
-	components:{MyBuilderQuery},
+	components:{
+		MyBuilderCaption,
+		MyBuilderQuery
+	},
 	template:`<div class="builder-column-options">
 		<table class="fullWidth default-inputs"><tbody>
-			<tr v-if="displayOptions">
+			<tr>
 				<td>{{ capApp.onMobile }}</td>
 				<td>
 					<my-bool
@@ -24,7 +28,17 @@ let MyBuilderColumnOptions = {
 					/>
 				</td>
 			</tr>
-			<tr v-if="displayOptions">
+			<tr v-if="hasCaptions">
+				<td>{{ capGen.title }}</td>
+				<td>
+					<my-builder-caption
+						@update:modelValue="set('captions',{columnTitle:$event})"
+						:language="builderLanguage"
+						:modelValue="column.captions.columnTitle"
+					/>
+				</td>
+			</tr>
+			<tr>
 				<td>{{ capApp.columnSize }}</td>
 				<td>
 					<input
@@ -40,7 +54,7 @@ let MyBuilderColumnOptions = {
 					/>
 				</td>
 			</tr>
-			<tr v-if="displayOptions">
+			<tr>
 				<td>{{ capApp.columnLength }}</td>
 				<td>
 					<input
@@ -56,7 +70,7 @@ let MyBuilderColumnOptions = {
 					/>
 				</td>
 			</tr>
-			<tr v-if="displayOptions">
+			<tr>
 				<td>{{ capApp.columnWrap }}</td>
 				<td>
 					<my-bool
@@ -65,7 +79,7 @@ let MyBuilderColumnOptions = {
 					/>
 				</td>
 			</tr>
-			<tr v-if="displayOptions">
+			<tr>
 				<td>{{ capApp.columnClipboard }}</td>
 				<td>
 					<my-bool
@@ -74,7 +88,7 @@ let MyBuilderColumnOptions = {
 					/>
 				</td>
 			</tr>
-			<tr v-if="displayOptions">
+			<tr>
 				<td>{{ capApp.columnBatch }}</td>
 				<td>
 					<input
@@ -90,7 +104,7 @@ let MyBuilderColumnOptions = {
 					/>
 				</td>
 			</tr>
-			<tr v-if="displayOptions">
+			<tr>
 				<td>{{ capApp.display }}</td>
 				<td>
 					<select
@@ -169,11 +183,11 @@ let MyBuilderColumnOptions = {
 		</tbody></table>
 	</div>`,
 	props:{
-		builderLanguage:{ type:String, required:true },
-		column:         { type:Object, required:true },
-		displayOptions: { type:Boolean,required:true },
-		joins:          { type:Array,  required:false, default:() => [] },
-		moduleId:       { type:String, required:true }
+		builderLanguage:{ type:String,  required:true },
+		column:         { type:Object,  required:true },
+		hasCaptions:    { type:Boolean, required:true },
+		joins:          { type:Array,   required:false, default:() => [] },
+		moduleId:       { type:String,  required:true }
 	},
 	emits:['set'],
 	computed:{

diff --git a/www/comps/builder/builderColumns.js b/www/comps/builder/builderColumns.js
@@ -19,25 +19,35 @@ export let MyBuilderColumns = {
 		:group="group"
 	>
 		<template #item="{element,index}">
-	   	 	<div class="column-wrap dragAnchor">
-				<div class="builder-drag-item column">
-					<img class="action edit clickable" src="images/edit.png"
+	   	 	<div class="builder-field column column-wrap dragAnchor">
+				<div class="builder-field-header">
+					<img class="clickable" src="images/edit.png"
 						v-if="!isTemplate"
 						@click="$emit('column-id-show',element.id)"
 						:class="{ selected:columnIdShow === element.id }"
 					/>
 					
+					<!-- column title -->
+					<div class="title" :class="{ 'no-hover':hasCaptions }">
+						{{ getTitle(element) }}
+					</div>
+					<my-builder-caption class="on-hover"
+						v-if="hasCaptions"
+						@update:modelValue="propertySet(index,'captions',{columnTitle:$event})"
+						:contentName="getTitle(element)"
+						:language="builderLanguage"
+						:modelValue="element.captions.columnTitle"
+					/>
+					
 					<!-- toggle: show on mobile -->
-					<img class="action edit clickable"
+					<img class="clickable on-hover"
 						v-if="!isTemplate && displayOptions"
 						@click="propertySet(index,'onMobile',!element.onMobile)"
 						:src="element.onMobile ? 'images/smartphone.png' : 'images/smartphoneOff.png'"
 						:title="capApp.onMobile"
 					/>
 					
-					<div class="title">{{ getTitle(element) }}</div>
-					
-					<div class="part clickable"
+					<div class="clickable on-hover"
 						v-if="!isTemplate && displayOptions"
 						@click="propertySet(index,'basis',toggleSize(element.basis,25))"
 						@click.prevent.right="propertySet(index,'basis',toggleSize(element.basis,-25))"
@@ -46,7 +56,7 @@ export let MyBuilderColumns = {
 						<span>{{ getFlexBasis(element.basis) }}</span>
 					</div>
 					
-					<div class="title clickable"
+					<div class="on-hover clickable"
 						v-if="!isTemplate && displayOptions"
 						@click="batchSet(index,1)"
 						@click.right.prevent="batchSet(index,-1)"
@@ -55,21 +65,11 @@ export let MyBuilderColumns = {
 						{{ element.batch === null ? 'B-' : 'B'+element.batch }}
 					</div>
 					
-					<img class="action end clickable" src="images/cancel.png"
+					<img class="end on-hover clickable" src="images/cancel.png"
 						v-if="!isTemplate"
 						@click="remove(index)"
 					/>
 				</div>
-				
-				<!-- caption inputs -->
-				<div v-if="hasCaptions && showShortcuts" class="captionInputs">
-				
-					<my-builder-caption
-						@update:modelValue="propertySet(index,'captions',{columnTitle:$event})"
-						:language="builderLanguage"
-						:modelValue="element.captions.columnTitle"
-					/>
-				</div>
 			</div>
 		</template>
 	</draggable>`,
@@ -82,8 +82,7 @@ export let MyBuilderColumns = {
 		hasCaptions:    { type:Boolean, required:true },
 		isTemplate:     { type:Boolean, required:true },
 		joins:          { type:Array,   required:false, default:() => [] },
-		moduleId:       { type:String,  required:true },
-		showShortcuts:  { type:Boolean, required:false, default:false }
+		moduleId:       { type:String,  required:true }
 	},
 	emits:['column-id-show','columns-set'],
 	computed:{