mirror of
https://github.com/google/nomulus.git
synced 2025-05-01 12:37:52 +02:00
67d3538fdb
Added a separator between the fields, and marked required fields as "required", so you can't submit without them Also - changed from base64 to base58 in for the auto-generated password. It's conceivable that someone might need to read it outloud to someone else - and not having "visually similar" characters (like O and 0) can be helpful. ------------- Created by MOE: https://github.com/google/moe MOE_MIGRATED_REVID=228810158
337 lines
9.3 KiB
Text
337 lines
9.3 KiB
Text
// Copyright 2017 The Nomulus Authors. All Rights Reserved.
|
|
//
|
|
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
// you may not use this file except in compliance with the License.
|
|
// You may obtain a copy of the License at
|
|
//
|
|
// http://www.apache.org/licenses/LICENSE-2.0
|
|
//
|
|
// Unless required by applicable law or agreed to in writing, software
|
|
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
// See the License for the specific language governing permissions and
|
|
// limitations under the License.
|
|
|
|
{namespace registry.soy.forms}
|
|
|
|
|
|
/**
|
|
* Input field.
|
|
*/
|
|
{template .inputField}
|
|
{@param name: ?} /** Input field name. */
|
|
{@param? item: ?} /** This will be used to set default value with $item[$name]. */
|
|
{@param? label: ?} /** Input field label. */
|
|
{@param? placeholder: ?} /** Placeholder text. */
|
|
<label for="{$name}">
|
|
{if isNonnull($label)}
|
|
{$label}
|
|
{else}
|
|
{$name}
|
|
{/if}
|
|
</label>
|
|
<input id="{$name}"
|
|
name="{$name}"
|
|
{if isNonnull($item) and isNonnull($item[$name])}
|
|
value="{$item[$name]}"
|
|
{/if}
|
|
{if isNonnull($placeholder)}
|
|
placeholder="{$placeholder}"
|
|
{/if}>
|
|
{/template}
|
|
|
|
|
|
/**
|
|
* Input field in a table row.
|
|
*/
|
|
{template .inputFieldRow}
|
|
{@param name: ?} /** Input field name. */
|
|
{@param? item: ?} /** This will be used to set default value with $item[$name]. */
|
|
{@param? itemPrefix: ?}
|
|
{@param? namePrefix: ?}
|
|
{@param? label: ?} /** Input field label. */
|
|
{@param? description: ?} /** Input field description. */
|
|
{@param? placeholder: ?} /** Placeholder text. */
|
|
{@param? readonly: ?}
|
|
<tr class="{css('kd-settings-pane-section')}">
|
|
<td>
|
|
<label for="{if isNonnull($namePrefix)}{$namePrefix + $name}{else}{$name}{/if}"
|
|
class="{css('setting-label')}">
|
|
{if isNonnull($label)}
|
|
{$label}
|
|
{else}
|
|
{$name}
|
|
{/if}
|
|
</label>
|
|
{if isNonnull($description)}
|
|
<span class="{css('description')}">{$description}</span>
|
|
{/if}
|
|
</td>
|
|
<td class="{css('setting')}">
|
|
<input id="{if isNonnull($namePrefix)}{$namePrefix + $name}{else}{$name}{/if}"
|
|
name="{if isNonnull($namePrefix)}{$namePrefix + $name}{else}{$name}{/if}"
|
|
{if isNonnull($item)}
|
|
{if isNonnull($itemPrefix) and isNonnull($item[$itemPrefix + $name])}
|
|
value="{$item[$itemPrefix + $name]['keyValue'] ?: $item[$itemPrefix + $name]}"
|
|
{elseif isNonnull($item[$name])}
|
|
value="{$item[$name]['keyValue'] ?: $item[$name]}"
|
|
{/if}
|
|
{/if}
|
|
{if isNonnull($placeholder) and not $readonly}
|
|
placeholder="{$placeholder}"
|
|
{/if}
|
|
{if $readonly}
|
|
readonly
|
|
{/if}>
|
|
</td>
|
|
</tr>
|
|
{/template}
|
|
|
|
|
|
/* XXX: Should move other impls in this file to use this. */
|
|
/** Input field label. */
|
|
{template .inputFieldLabel}
|
|
{@param label: string}
|
|
{@param? forId: string}
|
|
{@param? description: string}
|
|
<label {if isNonnull($forId)}for="{$forId}"{/if} class="{css('setting-label')}">
|
|
{$label}
|
|
</label>
|
|
{if isNonnull($description)}
|
|
<span class="{css('description')}">{$description}</span>
|
|
{/if}
|
|
{/template}
|
|
|
|
|
|
/** Input field value. */
|
|
{template .inputFieldValue}
|
|
{@param name: string}
|
|
{@param? readonly: bool}
|
|
{@param? required: bool}
|
|
{@param? value: ?}
|
|
{@param? namePrefix: string}
|
|
{@param? placeholder: string}
|
|
{@param? clazz: string}
|
|
{let $forId: isNonnull($namePrefix) ? $namePrefix + $name : $name /}
|
|
<input name="{$forId}"
|
|
id="{$forId}"
|
|
value="{if isNonnull($value)}{$value['keyValue'] ?: $value}{/if}"
|
|
{if isNonnull($clazz)}class="{$clazz}"{/if}
|
|
{if isNonnull($placeholder) and not $readonly}
|
|
placeholder="{$placeholder}"
|
|
{/if}
|
|
{if $required}required{/if}
|
|
{if $readonly}readonly{/if}>
|
|
{/template}
|
|
|
|
|
|
/** Input field in a table row. */
|
|
{template .inputFieldRowWithValue}
|
|
{@param label: string}
|
|
{@param name: string}
|
|
{@param? readonly: bool}
|
|
{@param? required: bool}
|
|
{@param? namePrefix: string}
|
|
{@param? value: ?}
|
|
{@param? description: string}
|
|
{@param? placeholder: string}
|
|
{@param? clazz: string}
|
|
{let $forId: isNonnull($namePrefix) ? $namePrefix + $name : $name /}
|
|
<tr class="{css('kd-settings-pane-section')}">
|
|
<td>
|
|
{call .inputFieldLabel data="all"}
|
|
{param forId: $forId /}
|
|
{/call}
|
|
</td>
|
|
<td class="{css('setting')}">
|
|
{call .inputFieldValue data="all" /}
|
|
</td>
|
|
</tr>
|
|
{/template}
|
|
|
|
|
|
/**
|
|
* Form input row for a table.
|
|
*/
|
|
{template .textareaFieldRow}
|
|
{@param name: ?} /** Input field name. */
|
|
{@param? item: ?} /** This will be used to set default value with $item[$name]. */
|
|
{@param? itemPrefix: ?}
|
|
{@param? namePrefix: ?}
|
|
{@param? label: ?} /** Input field label. */
|
|
{@param? readonly: ?}
|
|
<tr>
|
|
<td>
|
|
<label for="{if isNonnull($namePrefix)}{$namePrefix + $name}{else}{$name}{/if}">
|
|
{if isNonnull($label)}
|
|
{$label}
|
|
{else}
|
|
{$name}
|
|
{/if}
|
|
</label>
|
|
</td>
|
|
<td>
|
|
<textarea id="{$name}"
|
|
name="{if isNonnull($namePrefix)}{$namePrefix + $name}{else}{$name}{/if}"
|
|
{if $readonly}
|
|
readonly
|
|
{/if}
|
|
>{if isNonnull($item)}
|
|
{if isNonnull($itemPrefix) and isNonnull($item[$itemPrefix + $name])}
|
|
{$item[$itemPrefix + $name]}
|
|
{elseif isNonnull($item[$name])}
|
|
{$item[$name]}
|
|
{/if}
|
|
{/if}</textarea>
|
|
</td>
|
|
</tr>
|
|
{/template}
|
|
|
|
|
|
/**
|
|
* Form input row for a table.
|
|
*/
|
|
{template .textareaFieldRowWithValue}
|
|
{@param name: ?} /** Input field name. */
|
|
{@param value: ?}
|
|
{@param? namePrefix: ?}
|
|
{@param? label: ?} /** Input field label. */
|
|
{@param? readonly: ?}
|
|
<tr>
|
|
<td>
|
|
<label for="{if isNonnull($namePrefix)}{$namePrefix + $name}{else}{$name}{/if}">
|
|
{if isNonnull($label)}
|
|
{$label}
|
|
{else}
|
|
{$name}
|
|
{/if}
|
|
</label>
|
|
</td>
|
|
<td>
|
|
<textarea id="{$name}"
|
|
name="{if isNonnull($namePrefix)}{$namePrefix + $name}{else}{$name}{/if}"
|
|
{if $readonly}
|
|
readonly
|
|
{/if}
|
|
>{if isNonnull($value) and isNonnull($value['keyValue'])}
|
|
{$value['keyValue']}
|
|
{/if}</textarea>
|
|
</td>
|
|
</tr>
|
|
{/template}
|
|
|
|
|
|
/**
|
|
* Select control.
|
|
*/
|
|
{template .selectRow}
|
|
{@param name: ?} /** Input field name. */
|
|
{@param options: ?} /** Items listed in the selector. */
|
|
{@param selected: ?} /** Name of the selected option. */
|
|
{@param? namePrefix: ?}
|
|
{@param? label: ?} /** Input field label. */
|
|
{@param? readonly: ?}
|
|
{let $forId: isNonnull($namePrefix) ? $namePrefix + $name : $name /}
|
|
<tr>
|
|
<td>
|
|
<label for="{$forId}">
|
|
{if isNonnull($label)}
|
|
{$label}
|
|
{else}
|
|
{$name}
|
|
{/if}
|
|
</label>
|
|
</td>
|
|
<td>
|
|
<select id="{$name}"
|
|
name="{$name}"
|
|
class="{css('kd-button')} {css('reg-select')}"
|
|
{if $readonly}disabled{/if}>
|
|
{for $option in $options}
|
|
<option value="{$option}" {if $selected == $option}selected{/if}>
|
|
{$option}
|
|
</option>
|
|
{/for}
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
{/template}
|
|
|
|
|
|
{template .inputRadioWithValue}
|
|
{@param name: ?}
|
|
{@param values: ?}
|
|
{@param? checkedValue: ?} /** the default checked value. */
|
|
<tr>
|
|
<td colspan="2">
|
|
{for $value in $values}
|
|
<input type="radio"
|
|
name="{$name}"
|
|
value="{$value}"
|
|
{if $checkedValue == $value}checked{/if}>
|
|
{/for}
|
|
</td>
|
|
</tr>
|
|
{/template}
|
|
|
|
|
|
/** Checkbox with label. */
|
|
{template .inputCheckboxRow}
|
|
{@param name: string}
|
|
{@param? checked: bool}
|
|
{@param? label: string}
|
|
{@param? description: string}
|
|
<tr>
|
|
<td>
|
|
{call .inputFieldLabel data="all"}
|
|
{param label: $label ? $label : $name /}
|
|
{param forId: $name /}
|
|
{/call}
|
|
</td>
|
|
<td>
|
|
<input id="{$name}"
|
|
type="checkbox"
|
|
name="{$name}"
|
|
value="{$name}"
|
|
{if isNonnull($checked) and $checked}checked{/if}>
|
|
</td>
|
|
</tr>
|
|
{/template}
|
|
|
|
/** Submit button. */
|
|
{template .submitRow}
|
|
{@param label: string}
|
|
<tr>
|
|
<td></td>
|
|
<td>
|
|
<input
|
|
id="submit-button"
|
|
type="submit"
|
|
value="{$label}"
|
|
class="{css('kd-button')} {css('kd-button-submit')}">
|
|
</td>
|
|
</tr>
|
|
{/template}
|
|
|
|
|
|
/** Drop-down select button widget. */
|
|
{template .menuButton}
|
|
{@param id: string} /** ID for button. */
|
|
{@param selected: string} /** Selected item. */
|
|
{@param items: list<string>} /** Selectable items. */
|
|
<div id="{$id}" class="{css('kd-button')} {css('kd-menubutton')} {css('kd-select')}">
|
|
<span class="{css('label')}">
|
|
{$selected}
|
|
</span>
|
|
<span class="{css('kd-disclosureindicator')}"></span>
|
|
<ul class="{css('kd-menulist')}">
|
|
{for $item in $items}
|
|
<li class="{css('kd-menulistitem')}
|
|
{if $item == $selected}
|
|
{sp}{css('selected')}
|
|
{/if}">
|
|
{$item}
|
|
{/for}
|
|
</ul>
|
|
</div>
|
|
{/template}
|