Skip to content

Commit

Permalink
#136 added button alignment and size dialog/styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@smcgrath0
smcgrath0 committed Aug 24, 2020
1 parent f247851 commit 9c24c09
Show file tree
Hide file tree
Showing 9 changed files with 278 additions and 5 deletions.
66 changes: 66 additions & 0 deletions core/src/main/java/com/themecleanflex/models/FormModel.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,52 @@
"x-form-type": "text",
"x-default": "Submit"
},
"submitsize": {
"type": "string",
"x-source": "inject",
"x-form-label": "Submit button size",
"x-form-type": "materialselect",
"x-default": "normal",
"properties": {
"section": {
"x-form-name": "normal",
"x-form-value": "normal"
},
"sm": {
"x-form-name": "sm",
"x-form-value": "sm"
},
"lg": {
"x-form-name": "lg",
"x-form-value": "lg"
},
"full": {
"x-form-name": "full width",
"x-form-value": "full"
}
}
},
"submitalignment": {
"type": "string",
"x-source": "inject",
"x-form-label": "Submit button alignment",
"x-form-type": "materialselect",
"x-default": "start",
"properties": {
"start": {
"x-form-name": "start",
"x-form-value": "start"
},
"center": {
"x-form-name": "center",
"x-form-value": "center"
},
"end": {
"x-form-name": "end",
"x-form-value": "end"
}
}
},
"failmessage": {
"type": "string",
"x-source": "inject",
Expand Down Expand Up @@ -360,6 +406,16 @@ public class FormModel extends AbstractComponent {
@Default(values ="Submit")
private String submittext;

/* {"type":"string","x-source":"inject","x-form-label":"Submit button size","x-form-type":"materialselect","x-default":"normal","properties":{"section":{"x-form-name":"normal","x-form-value":"normal"},"sm":{"x-form-name":"sm","x-form-value":"sm"},"lg":{"x-form-name":"lg","x-form-value":"lg"},"full":{"x-form-name":"full width","x-form-value":"full"}}} */
@Inject
@Default(values ="normal")
private String submitsize;

/* {"type":"string","x-source":"inject","x-form-label":"Submit button alignment","x-form-type":"materialselect","x-default":"start","properties":{"start":{"x-form-name":"start","x-form-value":"start"},"center":{"x-form-name":"center","x-form-value":"center"},"end":{"x-form-name":"end","x-form-value":"end"}}} */
@Inject
@Default(values ="start")
private String submitalignment;

/* {"type":"string","x-source":"inject","x-form-label":"Failure Message","x-form-type":"text","x-default":"Error processing form"} */
@Inject
@Default(values ="Error processing form")
Expand Down Expand Up @@ -490,6 +546,16 @@ public String getSubmittext() {
return submittext;
}

/* {"type":"string","x-source":"inject","x-form-label":"Submit button size","x-form-type":"materialselect","x-default":"normal","properties":{"section":{"x-form-name":"normal","x-form-value":"normal"},"sm":{"x-form-name":"sm","x-form-value":"sm"},"lg":{"x-form-name":"lg","x-form-value":"lg"},"full":{"x-form-name":"full width","x-form-value":"full"}}} */
public String getSubmitsize() {
return submitsize;
}

/* {"type":"string","x-source":"inject","x-form-label":"Submit button alignment","x-form-type":"materialselect","x-default":"start","properties":{"start":{"x-form-name":"start","x-form-value":"start"},"center":{"x-form-name":"center","x-form-value":"center"},"end":{"x-form-name":"end","x-form-value":"end"}}} */
public String getSubmitalignment() {
return submitalignment;
}

/* {"type":"string","x-source":"inject","x-form-label":"Failure Message","x-form-type":"text","x-default":"Error processing form"} */
public String getFailmessage() {
return failmessage;
Expand Down
13 changes: 13 additions & 0 deletions fragments/form/hatch.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,26 @@ module.exports = {
const submit = $.find('input').first()
f.bindAttribute(submit,'value','model.submittext')

const formContainer = $.find('form').eq(0);
let formContainerClasses = `{
'justify-button-start': model.submitalignment === 'start',
'justify-button-center': model.submitalignment === 'center',
'justify-button-end': model.submitalignment === 'end',
'normal-button': model.submitsize === 'normal',
'sm-button': model.submitsize === 'sm',
'lg-button': model.submitsize === 'lg',
'full-button': model.submitsize === 'full',
}`
f.bindAttribute(formContainer, 'class', formContainerClasses, false);

const div2 = $.find('div').eq(1)
f.replace(div2, '<vue-form-generator></vue-form-generator>')

const formEl = $.find('form')
f.bindEvent(formEl,'submit.prevent.stop','onSubmit')

const form = $.find('vue-form-generator').first()
f.bindAttribute(form,'class','w-full', false)
f.bindAttribute(form,'model','formModel')
f.bindAttribute(form,'schema','schema')
f.bindAttribute(form,'options','formOptions')
Expand Down
46 changes: 46 additions & 0 deletions fragments/form/model.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,52 @@
"x-form-type": "text",
"x-default": "Submit"
},
"submitsize": {
"type": "string",
"x-source": "inject",
"x-form-label": "Submit button size",
"x-form-type": "materialselect",
"x-default": "normal",
"properties":{
"section": {
"x-form-name": "normal",
"x-form-value": "normal"
},
"sm": {
"x-form-name": "sm",
"x-form-value": "sm"
},
"lg": {
"x-form-name": "lg",
"x-form-value": "lg"
},
"full": {
"x-form-name": "full width",
"x-form-value": "full"
}
}
},
"submitalignment": {
"type": "string",
"x-source": "inject",
"x-form-label": "Submit button alignment",
"x-form-type": "materialselect",
"x-default": "start",
"properties":{
"start": {
"x-form-name": "start",
"x-form-value": "start"
},
"center": {
"x-form-name": "center",
"x-form-value": "center"
},
"end": {
"x-form-name": "end",
"x-form-value": "end"
}
}
},
"failmessage": {
"type": "string",
"x-source": "inject",
Expand Down
2 changes: 1 addition & 1 deletion fragments/form/template.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<p class="ml-2"></p>
</div>
</transition>
<form class="w-full">
<form class="w-full flex flex-col">
<div></div>
<input class="btn m-4 mt-0" type="submit">
</form>
Expand Down
13 changes: 11 additions & 2 deletions fragments/form/template.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,17 @@
<p class="ml-2" data-per-inline="schemaError" v-if="schemaError">{{schemaError}}</p>
</div>
</transition>
<form class="w-full" v-on:submit.prevent.stop="onSubmit">
<vue-form-generator v-bind:model="formModel" v-bind:schema="schema" v-bind:options="formOptions"></vue-form-generator>
<form class="w-full flex flex-col" v-bind:class="{
'justify-button-start': model.submitalignment === 'start',
'justify-button-center': model.submitalignment === 'center',
'justify-button-end': model.submitalignment === 'end',
'normal-button': model.submitsize === 'normal',
'sm-button': model.submitsize === 'sm',
'lg-button': model.submitsize === 'lg',
'full-button': model.submitsize === 'full',
}" v-on:submit.prevent.stop="onSubmit">
<vue-form-generator v-bind:class="w-full" v-bind:model="formModel" v-bind:schema="schema"
v-bind:options="formOptions"></vue-form-generator>
<input class="btn m-4 mt-0" type="submit" v-bind:value="model.submittext">
</form>
</div>
Expand Down
44 changes: 44 additions & 0 deletions ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/form/dialog.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,50 @@
"label": "Submit Button Text",
"model": "submittext"
},
{
"type": "material-select",
"values": [
{
"name": "normal",
"value": "normal"
},
{
"name": "sm",
"value": "sm"
},
{
"name": "lg",
"value": "lg"
},
{
"name": "full width",
"value": "full"
}
],
"placeholder": "submitsize",
"label": "Submit button size",
"model": "submitsize"
},
{
"type": "material-select",
"values": [
{
"name": "start",
"value": "start"
},
{
"name": "center",
"value": "center"
},
{
"name": "end",
"value": "end"
}
],
"placeholder": "submitalignment",
"label": "Submit button alignment",
"model": "submitalignment"
},
{
"type": "input",
"inputType": "text",
Expand Down
13 changes: 11 additions & 2 deletions ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/form/template.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,17 @@
<p class="ml-2" data-per-inline="schemaError" v-if="schemaError">{{schemaError}}</p>
</div>
</transition>
<form class="w-full" v-on:submit.prevent.stop="onSubmit">
<vue-form-generator v-bind:model="formModel" v-bind:schema="schema" v-bind:options="formOptions"></vue-form-generator>
<form class="w-full flex flex-col" v-bind:class="{
'justify-button-start': model.submitalignment === 'start',
'justify-button-center': model.submitalignment === 'center',
'justify-button-end': model.submitalignment === 'end',
'normal-button': model.submitsize === 'normal',
'sm-button': model.submitsize === 'sm',
'lg-button': model.submitsize === 'lg',
'full-button': model.submitsize === 'full',
}" v-on:submit.prevent.stop="onSubmit">
<vue-form-generator v-bind:class="w-full" v-bind:model="formModel" v-bind:schema="schema"
v-bind:options="formOptions"></vue-form-generator>
<input class="btn m-4 mt-0" type="submit" v-bind:value="model.submittext">
</form>
</div>
Expand Down
52 changes: 52 additions & 0 deletions ui.apps/src/main/content/jcr_root/etc/felibs/themecleanflex/css/build.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1762,6 +1762,58 @@ p {
align-items: center;
}

[class$="components-form"] .normal-button input[type="submit"]{
width: min-content;
}

[class$="components-form"] .lg-button input[type="submit"]{
width: min-content;
padding-top: var(--spacing-4);
padding-bottom: var(--spacing-4);
padding-left: var(--spacing-5);
padding-right: var(--spacing-5);
font-size: var(--font-size-lg)
}

[class$="components-form"] .sm-button input[type="submit"]{
width: min-content;
padding-top: var(--spacing-2);
padding-bottom: var(--spacing-2);
padding-left: var(--spacing-2);
padding-right: var(--spacing-2);
font-size: var(--font-size-sm)
}

[class$="components-form"] .full-button input[type="submit"]{
width: 100%;
margin-left: 0;
margin-right: 0;
}

[class$="components-form"] .justify-button-start{
align-items: flex-start;
}

[class$="components-form"] .justify-button-start .field-submit > div{
justify-content: flex-start;
}

[class$="components-form"] .justify-button-center{
align-items: center;
}

[class$="components-form"] .justify-button-center .field-submit > div{
justify-content: center;
}

[class$="components-form"] .justify-button-end{
align-items: flex-end;
}

[class$="components-form"] .justify-button-end .field-submit > div{
justify-content: flex-end;
}

/* purgecss end ignore */

@media (min-width: 640px) {
Expand Down
34 changes: 34 additions & 0 deletions ui.apps/src/main/content/jcr_root/etc/felibs/themecleanflex/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -336,4 +336,38 @@ p {
align-items: center;
}

[class$="components-form"] .normal-button input[type="submit"]{
width: min-content;
}
[class$="components-form"] .lg-button input[type="submit"]{
width: min-content;
@apply py-4 px-5 text-lg
}
[class$="components-form"] .sm-button input[type="submit"]{
width: min-content;
@apply py-2 px-2 text-sm
}
[class$="components-form"] .full-button input[type="submit"]{
width: 100%;
margin-left: 0;
margin-right: 0;
}
[class$="components-form"] .justify-button-start{
align-items: flex-start;
}
[class$="components-form"] .justify-button-start .field-submit > div{
justify-content: flex-start;
}
[class$="components-form"] .justify-button-center{
align-items: center;
}
[class$="components-form"] .justify-button-center .field-submit > div{
justify-content: center;
}
[class$="components-form"] .justify-button-end{
align-items: flex-end;
}
[class$="components-form"] .justify-button-end .field-submit > div{
justify-content: flex-end;
}
/* purgecss end ignore */

0 comments on commit 9c24c09

Please sign in to comment.