Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adds tycho templates for singleSelect and multiSelect forms #878

Merged
merged 7 commits into from
Jul 2, 2021
Merged

Adds tycho templates for singleSelect and multiSelect forms #878

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
0df983b
Corrects attribute name
Jul 1, 2021
6166d0a
Creates tycho templates for singleSelect and multiSelect tags
Jul 1, 2021
d75c25d
Adds a scss file for form styles
Jul 1, 2021
b6e67c9
Merge remote-tracking branch 'origin/develop' into meg/SIRI-327
Jul 1, 2021
267798c
Corrects the font color in wondergem suggestions
Jul 1, 2021
944a578
Adds some styles to improve singleSelect and multiSelect display
Jul 1, 2021
11f2a81
small style updates
Jul 1, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 35 additions & 0 deletions src/main/resources/default/assets/tycho/styles/forms.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
/*!
* Made with all the love in the world
* by scireum in Remshalden, Germany
*
* Copyright by scireum GmbH
* http://www.scireum.de - info@scireum.de
*/

// --------------------------
// Token Autocomplete
// --------------------------

.form-control.token-autocomplete-container {
align-content: center;
}

.token-autocomplete-container .token-autocomplete-token {
border-radius: 0;
}


.form-control.token-autocomplete-container.token-autocomplete-singleselect.optional-singleselect-with-value {
.token-autocomplete-input:after {
right: -10px;
}

.token-singleselect-token-delete {
padding-bottom: 0px;
border: none;
background-color: transparent;
top: 6px;
font-weight: 700;
right: 30px;
}
}
1 change: 1 addition & 0 deletions src/main/resources/default/assets/tycho/styles/tycho.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
@import "/assets/tycho/styles/tag";
@import "/assets/tycho/styles/card";
@import "/assets/tycho/styles/buttons";
@import "/assets/tycho/styles/forms";
@import "/assets/tycho/styles/sidebar";
@import "/assets/tycho/styles/typeface";
@import "/assets/tycho/styles/border";
Expand Down
5 changes: 3 additions & 2 deletions src/main/resources/default/assets/wondergem/stylesheets/forms.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -245,10 +245,10 @@ label .help-inline {
overflow-y: scroll;
}

.form-control.token-autocomplete-container .token-autocomplete-suggestions {
.form-control.token-autocomplete-container .token-autocomplete-suggestions li {
color: #555;

li.token-autocomplete-suggestion-active {
&.token-autocomplete-suggestion-active {
background-color: #ededed;
border-top: 1px solid #d9d9d9;
border-bottom: 1px solid #d9d9d9;
Expand Down Expand Up @@ -283,6 +283,7 @@ label .help-inline {
border-width: 5px 4px 0 4px;
top: 9px;
right: 0px;

&:hover {
border-color: #555;
}
Expand Down
54 changes: 54 additions & 0 deletions src/main/resources/default/taglib/t/multiSelect.html.pasta
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<i:arg name="id" type="String" default="@generateId('singleselect-%s')"/>
<i:arg name="class" type="String" default="" description="Lists additional CSS classes to apply to the field."/>
<i:arg name="name" type="String"/>
<i:arg name="labelKey" type="String" default=""/>
<i:arg name="label" type="String" default="@i18n(labelKey)"/>
<i:arg name="helpKey" type="String" default=""/>
<i:arg name="help" type="String" default="@i18n(helpKey)"/>
<i:arg name="placeholderKey" type="String" default="template.html.selects.selection" />
<i:arg name="placeholder" type="String" default="@i18n(placeholderKey)" />
<i:arg name="readonly" type="boolean" default="false"/>
<i:arg name="optional" type="boolean" default="false"/>
<i:arg name="allowCustomEntries" type="boolean" default="false" />
<i:arg name="suggestionUri" type="String" default=""/>

<i:pragma name="description">
Renders a select field for a multiple value using the given parameters. Note that additional flags can be set via CSS
classes
(i.e. "required", "admin-only").
</i:pragma>

<div class="form-group @UserContext.get().signalFieldError(name) @class">
<i:if test="isFilled(label)">
<label><span>@label</span></label>
</i:if>
<div @id="@id" name="@name" class="form-control input-block-level">
<i:render name="body"/>
</div>

<i:if test="isFilled(help)">
<small class="form-text text-muted">
<i:raw>@expandMessage(help)</i:raw>
</small>
</i:if>
<i:if test="UserContext.get().hasError(name)">
<small class="error-block form-text">@UserContext.get().getFieldErrorMessage(name)</small>
</i:if>
</div>
<script>
sirius.ready(function () {
new TokenAutocomplete({
selector: '#@id',
name: '@name',
selectMode: SelectModes.MULTI,
minCharactersForSuggestion: 0,
allowCustomEntries: @allowCustomEntries,
readonly: @readonly,
optional: @optional,
enableTabulator: false,
noMatchesText: '@i18n("template.html.selects.noMatches")',
placeholderText: '@placeholder',
suggestionsUri: '@suggestionUri'
});
});
</script>
53 changes: 53 additions & 0 deletions src/main/resources/default/taglib/t/singleSelect.html.pasta
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<i:arg name="id" type="String" default="@generateId('singleselect-%s')"/>
<i:arg name="class" type="String" default="" description="Lists additional CSS classes to apply to the field."/>
<i:arg name="name" type="String"/>
<i:arg name="labelKey" type="String" default=""/>
<i:arg name="label" type="String" default="@i18n(labelKey)"/>
<i:arg name="helpKey" type="String" default=""/>
<i:arg name="help" type="String" default="@i18n(helpKey)"/>
<i:arg name="placeholderKey" type="String" default="template.html.selects.selection" />
<i:arg name="placeholder" type="String" default="@i18n(placeholderKey)" />
<i:arg name="readonly" type="boolean" default="false"/>
<i:arg name="optional" type="boolean" default="false"/>
<i:arg name="allowCustomEntries" type="boolean" default="false" />
<i:arg name="suggestionUri" type="String" default=""/>

<i:pragma name="description">
Renders a select field for a single value using the given parameters. Note that additional flags can be set via CSS
classes
(i.e. "required", "admin-only").
</i:pragma>

<div class="form-group @UserContext.get().signalFieldError(name) @class">
<i:if test="isFilled(label)">
<label><span>@label</span></label>
</i:if>
<div @id="@id" name="@name" class="form-control input-block-level">
<i:render name="body"/>
</div>

<i:if test="isFilled(help)">
<small class="form-text text-muted">
<i:raw>@expandMessage(help)</i:raw>
</small>
</i:if>
<i:if test="UserContext.get().hasError(name)">
<small class="error-block form-text">@UserContext.get().getFieldErrorMessage(name)</small>
</i:if>
</div>
<script>
sirius.ready(function () {
new TokenAutocomplete({
selector: '#@id',
name: '@name',
selectMode: SelectModes.SINGLE,
allowCustomEntries: @allowCustomEntries,
readonly: @readonly,
optional: @optional,
enableTabulator: false,
noMatchesText: '@i18n("template.html.selects.noMatches")',
placeholderText: '@placeholder',
suggestionsUri: '@suggestionUri'
});
});
</script>
2 changes: 1 addition & 1 deletion src/main/resources/default/taglib/t/textarea.html.pasta
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<i:arg name="id" type="String" default="" />
<i:arg name="class" type="String" default="Lists additional CSS classes to apply to the field."/>
<i:arg name="class" type="String" default="" description="Lists additional CSS classes to apply to the field."/>
<i:arg name="rows" type="int" default="3" />
<i:arg name="name" type="String" />
<i:arg name="value" type="String" />
Expand Down