Merge pull request #5801 from RocketChat/fix-input-admin
fix lag when typing on admin inputspull/3481/merge
commit
fd9f112af1
@ -1,241 +1,241 @@ |
||||
<template name="admin"> |
||||
<section class="page-container page-home page-static page-settings"> |
||||
<header class="fixed-title border-component-color"> |
||||
{{> burger}} |
||||
<h2> |
||||
<span class="room-title">{{#with group}}{{label}}{{/with}}</span> |
||||
</h2> |
||||
<div class="submit"> |
||||
{{#if hasChanges}} |
||||
<button class="button danger discard"><i class="icon-send"></i><span>{{_ "Cancel"}}</span></button> |
||||
{{/if}} |
||||
<button class="button primary save" disabled="{{not hasChanges}}"><i class="icon-send"></i><span>{{_ "Save_changes"}}</span></button> |
||||
</div> |
||||
</header> |
||||
{{#with group}} |
||||
<section class="page-container page-home page-static page-settings"> |
||||
<header class="fixed-title border-component-color"> |
||||
{{> burger}} |
||||
<h2> |
||||
<span class="room-title">{{label}}</span> |
||||
</h2> |
||||
<div class="submit"> |
||||
{{#if hasChanges}} |
||||
<button class="button danger discard"><i class="icon-send"></i><span>{{_ "Cancel"}}</span></button> |
||||
{{/if}} |
||||
<button class="button primary save" disabled="{{not hasChanges}}"><i class="icon-send"></i><span>{{_ "Save_changes"}}</span></button> |
||||
</div> |
||||
</header> |
||||
|
||||
<div class="content background-transparent-dark"> |
||||
{{#unless hasPermission 'view-privileged-setting'}} |
||||
<p>{{_ "You_are_not_authorized_to_view_this_page"}}</p> |
||||
{{else}} |
||||
{{#with group}} |
||||
<div class="content background-transparent-dark"> |
||||
{{#unless hasPermission 'view-privileged-setting'}} |
||||
<p>{{_ "You_are_not_authorized_to_view_this_page"}}</p> |
||||
{{else}} |
||||
{{#if description}} |
||||
<div class="info"> |
||||
<p class="settings-description">{{description}}</p> |
||||
</div> |
||||
{{/if}} |
||||
{{/with}} |
||||
<div class="rocket-form"> |
||||
{{#each sections}} |
||||
<div class="section {{#if section}}section-collapsed{{/if}}"> |
||||
{{#if section}} |
||||
<div class="section-title"> |
||||
<div class="section-title-text"> |
||||
{{translateSection section}} |
||||
</div> |
||||
<div class="section-title-right"> |
||||
<button class="button primary expand"><span>{{_ "Expand"}}</span></button> |
||||
</div> |
||||
</div> |
||||
{{/if}} |
||||
<div class="section-content border-component-color"> |
||||
<div class="rocket-form"> |
||||
{{#each sections}} |
||||
<div class="section {{#if section}}section-collapsed{{/if}}"> |
||||
{{#if section}} |
||||
{{#if sectionIsCustomOAuth section}} |
||||
<div class="section-helper"> |
||||
{{#with callbackURL section}} |
||||
{{{_ "Custom_oauth_helper" .}}} |
||||
{{/with}} |
||||
<div class="section-title"> |
||||
<div class="section-title-text"> |
||||
{{translateSection section}} |
||||
</div> |
||||
{{/if}} |
||||
<div class="section-title-right"> |
||||
<button class="button primary expand"><span>{{_ "Expand"}}</span></button> |
||||
</div> |
||||
</div> |
||||
{{/if}} |
||||
{{#each settings}} |
||||
<div class="input-line double-col {{#if changed}}setting-changed{{/if}}" {{isDisabled}}> |
||||
<label class="setting-label">{{label}}</label> |
||||
<div class="setting-field"> |
||||
{{#if $eq type 'string'}} |
||||
{{#if multiline}} |
||||
<textarea class="input-monitor" name="{{_id}}" rows="4" style="height: auto" {{isDisabled}}>{{value}}</textarea> |
||||
{{else}} |
||||
<input class="input-monitor" type="text" name="{{_id}}" value="{{value}}" placeholder="{{placeholder}}" {{isDisabled}}/> |
||||
{{/if}} |
||||
{{/if}} |
||||
|
||||
{{#if $eq type 'relativeUrl'}} |
||||
<input class="input-monitor" type="text" name="{{_id}}" value="{{relativeUrl value}}" placeholder="{{placeholder}}" {{isDisabled}} {{isReadonly}}/> |
||||
{{/if}} |
||||
|
||||
{{#if $eq type 'password'}} |
||||
<input class="input-monitor" type="password" name="{{_id}}" value="{{value}}" placeholder="{{placeholder}}" {{isDisabled}}/> |
||||
{{/if}} |
||||
|
||||
{{#if $eq type 'int'}} |
||||
<input class="input-monitor" type="number" name="{{_id}}" value="{{value}}" placeholder="{{placeholder}}" {{isDisabled}}/> |
||||
{{/if}} |
||||
|
||||
{{#if $eq type 'boolean'}} |
||||
<label><input class="input-monitor" type="radio" name="{{_id}}" value="1" checked="{{$eq value true}}" {{isDisabled}}/> {{_ "True"}}</label> |
||||
<label><input class="input-monitor" type="radio" name="{{_id}}" value="0" checked="{{$eq value false}}" {{isDisabled}}/> {{_ "False"}}</label> |
||||
{{/if}} |
||||
|
||||
{{#if $eq type 'select'}} |
||||
<div class="select-arrow"> |
||||
<i class="icon-down-open secondary-font-color"></i> |
||||
</div> |
||||
<select class="input-monitor" name="{{_id}}" {{isDisabled}}> |
||||
{{#each values}} |
||||
<option value="{{key}}" selected="{{selectedOption ../_id key}}">{{_ i18nLabel}}</option> |
||||
{{/each}} |
||||
</select> |
||||
{{/if}} |
||||
|
||||
{{#if $eq type 'language'}} |
||||
<div class="select-arrow"> |
||||
<i class="icon-down-open secondary-font-color"></i> |
||||
</div> |
||||
<select class="input-monitor" name="{{_id}}" {{isDisabled}}> |
||||
{{#each languages}} |
||||
<option value="{{key}}" selected="{{appLanguage key}}" dir="auto">{{name}}</option> |
||||
{{/each}} |
||||
</select> |
||||
{{/if}} |
||||
|
||||
{{#if $eq type 'color'}} |
||||
<div class="horizontal"> |
||||
{{#if $eq editor 'color'}} |
||||
<div class="flex-grow-1"> |
||||
<input class="input-monitor colorpicker-input" type="text" name="{{_id}}" value="{{value}}" autocomplete="off" {{isDisabled}}/> |
||||
<span class="colorpicker-swatch border-component-color" style="background-color: {{value}}"></span> |
||||
</div> |
||||
{{/if}} |
||||
{{#if $eq editor 'expression'}} |
||||
<div class="flex-grow-1"> |
||||
<input class="input-monitor" type="text" name="{{_id}}" value="{{value}}" {{isDisabled}}/> |
||||
</div> |
||||
<div class="section-content border-component-color"> |
||||
{{#if section}} |
||||
{{#if sectionIsCustomOAuth section}} |
||||
<div class="section-helper"> |
||||
{{#with callbackURL section}} |
||||
{{{_ "Custom_oauth_helper" .}}} |
||||
{{/with}} |
||||
</div> |
||||
{{/if}} |
||||
{{/if}} |
||||
{{#each settings}} |
||||
<div class="input-line double-col {{#if isSettingChanged _id}}setting-changed{{/if}}" {{isDisabled}}> |
||||
<label class="setting-label">{{label}}</label> |
||||
<div class="setting-field"> |
||||
{{#if $eq type 'string'}} |
||||
{{#if multiline}} |
||||
<textarea class="input-monitor" name="{{_id}}" rows="4" style="height: auto" {{isDisabled}}>{{value}}</textarea> |
||||
{{else}} |
||||
<input class="input-monitor" type="text" name="{{_id}}" value="{{value}}" placeholder="{{placeholder}}" {{isDisabled}}/> |
||||
{{/if}} |
||||
<div class="color-editor"> |
||||
<div class="select-arrow"> |
||||
<i class="icon-down-open secondary-font-color"></i> |
||||
</div> |
||||
<select name="color-editor"> |
||||
{{#each allowedTypes}} |
||||
<option value="{{.}}" selected="{{$eq ../editor .}}">{{_ .}}</option> |
||||
{{/each}} |
||||
</select> |
||||
{{/if}} |
||||
|
||||
{{#if $eq type 'relativeUrl'}} |
||||
<input class="input-monitor" type="text" name="{{_id}}" value="{{relativeUrl value}}" placeholder="{{placeholder}}" {{isDisabled}} {{isReadonly}}/> |
||||
{{/if}} |
||||
|
||||
{{#if $eq type 'password'}} |
||||
<input class="input-monitor" type="password" name="{{_id}}" value="{{value}}" placeholder="{{placeholder}}" {{isDisabled}}/> |
||||
{{/if}} |
||||
|
||||
{{#if $eq type 'int'}} |
||||
<input class="input-monitor" type="number" name="{{_id}}" value="{{value}}" placeholder="{{placeholder}}" {{isDisabled}}/> |
||||
{{/if}} |
||||
|
||||
{{#if $eq type 'boolean'}} |
||||
<label><input class="input-monitor" type="radio" name="{{_id}}" value="1" checked="{{$eq value true}}" {{isDisabled}}/> {{_ "True"}}</label> |
||||
<label><input class="input-monitor" type="radio" name="{{_id}}" value="0" checked="{{$eq value false}}" {{isDisabled}}/> {{_ "False"}}</label> |
||||
{{/if}} |
||||
|
||||
{{#if $eq type 'select'}} |
||||
<div class="select-arrow"> |
||||
<i class="icon-down-open secondary-font-color"></i> |
||||
</div> |
||||
</div> |
||||
<div class="settings-description">Variable name: {{getColorVariable _id}}</div> |
||||
{{/if}} |
||||
|
||||
{{#if $eq type 'font'}} |
||||
<input class="input-monitor" type="text" name="{{_id}}" value="{{value}}" {{isDisabled}}/> |
||||
{{/if}} |
||||
|
||||
{{#if $eq type 'code'}} |
||||
{{#if isDisabled.disabled}} |
||||
{{> CodeMirror name=_id options=(getEditorOptions true) code=(i18nDefaultValue) }} |
||||
{{else}} |
||||
<div class="code-mirror-box" data-editor-id="{{_id}}"> |
||||
<div class="title"> |
||||
{{label}} |
||||
</div> |
||||
{{> CodeMirror name=_id options=getEditorOptions code=value }} |
||||
{{setEditorOnBlur _id}} |
||||
<div class="buttons"> |
||||
<button class="button primary button-fullscreen">Full Screen</button> |
||||
<button class="button primary button-restore">Exit Full Screen</button> |
||||
<select class="input-monitor" name="{{_id}}" {{isDisabled}}> |
||||
{{#each values}} |
||||
<option value="{{key}}" selected="{{selectedOption ../_id key}}">{{_ i18nLabel}}</option> |
||||
{{/each}} |
||||
</select> |
||||
{{/if}} |
||||
|
||||
{{#if $eq type 'language'}} |
||||
<div class="select-arrow"> |
||||
<i class="icon-down-open secondary-font-color"></i> |
||||
</div> |
||||
<select class="input-monitor" name="{{_id}}" {{isDisabled}}> |
||||
{{#each languages}} |
||||
<option value="{{key}}" selected="{{appLanguage key}}" dir="auto">{{name}}</option> |
||||
{{/each}} |
||||
</select> |
||||
{{/if}} |
||||
|
||||
{{#if $eq type 'color'}} |
||||
<div class="horizontal"> |
||||
{{#if $eq editor 'color'}} |
||||
<div class="flex-grow-1"> |
||||
<input class="input-monitor colorpicker-input" type="text" name="{{_id}}" value="{{value}}" autocomplete="off" {{isDisabled}}/> |
||||
<span class="colorpicker-swatch border-component-color" style="background-color: {{value}}"></span> |
||||
</div> |
||||
{{/if}} |
||||
{{#if $eq editor 'expression'}} |
||||
<div class="flex-grow-1"> |
||||
<input class="input-monitor" type="text" name="{{_id}}" value="{{value}}" {{isDisabled}}/> |
||||
</div> |
||||
{{/if}} |
||||
<div class="color-editor"> |
||||
<div class="select-arrow"> |
||||
<i class="icon-down-open secondary-font-color"></i> |
||||
</div> |
||||
<select name="color-editor"> |
||||
{{#each allowedTypes}} |
||||
<option value="{{.}}" selected="{{$eq ../editor .}}">{{_ .}}</option> |
||||
{{/each}} |
||||
</select> |
||||
</div> |
||||
</div> |
||||
<div class="settings-description">Variable name: {{getColorVariable _id}}</div> |
||||
{{/if}} |
||||
{{/if}} |
||||
|
||||
{{#if $eq type 'action'}} |
||||
{{#if hasChanges section}} |
||||
<span style="line-height: 40px" class="secondary-font-color">{{_ "Save_to_enable_this_action"}}</span> |
||||
{{else}} |
||||
<button type="button" class="button primary action" data-setting="{{_id}}" data-action="{{value}}" {{isDisabled}}>{{_ actionText}}</button> |
||||
{{#if $eq type 'font'}} |
||||
<input class="input-monitor" type="text" name="{{_id}}" value="{{value}}" {{isDisabled}}/> |
||||
{{/if}} |
||||
{{/if}} |
||||
|
||||
{{#if $eq type 'asset'}} |
||||
{{#if value.url}} |
||||
<div class="settings-file-preview"> |
||||
<div class="preview" style="background-image:url({{value.url}}?_dc={{random}});"></div> |
||||
<div class="action"> |
||||
<button type="button" class="button danger delete-asset"><i class="icon-trash secondary-font-color"></i>{{_ 'Delete'}}</button> |
||||
|
||||
{{#if $eq type 'code'}} |
||||
{{#if isDisabled.disabled}} |
||||
{{> CodeMirror name=_id options=(getEditorOptions true) code=(i18nDefaultValue) }} |
||||
{{else}} |
||||
<div class="code-mirror-box" data-editor-id="{{_id}}"> |
||||
<div class="title"> |
||||
{{label}} |
||||
</div> |
||||
{{> CodeMirror name=_id options=getEditorOptions code=value }} |
||||
{{setEditorOnBlur _id}} |
||||
<div class="buttons"> |
||||
<button class="button primary button-fullscreen">Full Screen</button> |
||||
<button class="button primary button-restore">Exit Full Screen</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
{{else}} |
||||
<div class="settings-file-preview"> |
||||
<div class="preview no-file background-transparent-light secondary-font-color"><i class="icon-upload secondary-font-color"></i></div> |
||||
<div class="action"> |
||||
<div class="button primary">{{_ 'Select_file'}} |
||||
<input type="file" accept="{{assetAccept fileConstraints}}" /> |
||||
{{/if}} |
||||
{{/if}} |
||||
|
||||
{{#if $eq type 'action'}} |
||||
{{#if hasChanges section}} |
||||
<span style="line-height: 40px" class="secondary-font-color">{{_ "Save_to_enable_this_action"}}</span> |
||||
{{else}} |
||||
<button type="button" class="button primary action" data-setting="{{_id}}" data-action="{{value}}" {{isDisabled}}>{{_ actionText}}</button> |
||||
{{/if}} |
||||
{{/if}} |
||||
|
||||
{{#if $eq type 'asset'}} |
||||
{{#if value.url}} |
||||
<div class="settings-file-preview"> |
||||
<div class="preview" style="background-image:url({{value.url}}?_dc={{random}});"></div> |
||||
<div class="action"> |
||||
<button type="button" class="button danger delete-asset"><i class="icon-trash secondary-font-color"></i>{{_ 'Delete'}}</button> |
||||
</div> |
||||
</div> |
||||
{{else}} |
||||
<div class="settings-file-preview"> |
||||
<div class="preview no-file background-transparent-light secondary-font-color"><i class="icon-upload secondary-font-color"></i></div> |
||||
<div class="action"> |
||||
<div class="button primary">{{_ 'Select_file'}} |
||||
<input type="file" accept="{{assetAccept fileConstraints}}" /> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
{{/if}} |
||||
{{/if}} |
||||
|
||||
{{#if $eq type 'roomPick'}} |
||||
<div> |
||||
{{> inputAutocomplete settings=autocompleteRoom id=_id name=_id class="search autocomplete" autocomplete="off" disabled=isDisabled.disabled}} |
||||
<ul class="selected-rooms"> |
||||
{{#each selectedRooms}} |
||||
<li class="remove-room" data-setting={{../_id}}>{{name}} <i class="icon-cancel secondary-font-color"></i></li> |
||||
{{/each}} |
||||
</ul> |
||||
</div> |
||||
{{/if}} |
||||
{{/if}} |
||||
|
||||
{{#if $eq type 'roomPick'}} |
||||
<div> |
||||
{{> inputAutocomplete settings=autocompleteRoom id=_id name=_id class="search autocomplete" autocomplete="off" disabled=isDisabled.disabled}} |
||||
<ul class="selected-rooms"> |
||||
{{#each selectedRooms}} |
||||
<li class="remove-room" data-setting={{../_id}}>{{name}} <i class="icon-cancel secondary-font-color"></i></li> |
||||
{{/each}} |
||||
</ul> |
||||
</div> |
||||
{{/if}} |
||||
|
||||
{{#if description}} |
||||
<div class="settings-description">{{{RocketChatMarkdown description}}}</div> |
||||
{{/if}} |
||||
{{#if alert}} |
||||
<div class="settings-alert pending-color pending-background pending-border"><i class="icon-attention secondary-font-color"></i>{{{_ alert}}}</div> |
||||
{{/if}} |
||||
</div> |
||||
{{#unless $eq group._id 'Assets'}} |
||||
{{#unless isDefaultValue _id}} |
||||
<button text="{{_ 'Reset'}}" data-setting="{{_id}}" class="reset-setting button danger"> |
||||
<i class="icon-ccw secondary-font-color color-error-contrast"></i> |
||||
</button> |
||||
|
||||
{{#if description}} |
||||
<div class="settings-description">{{{RocketChatMarkdown description}}}</div> |
||||
{{/if}} |
||||
{{#if alert}} |
||||
<div class="settings-alert pending-color pending-background pending-border"><i class="icon-attention secondary-font-color"></i>{{{_ alert}}}</div> |
||||
{{/if}} |
||||
</div> |
||||
{{#unless $eq type 'asset'}} |
||||
{{#unless isDefaultValue _id}} |
||||
<button text="{{_ 'Reset'}}" data-setting="{{_id}}" class="reset-setting button danger"> |
||||
<i class="icon-ccw secondary-font-color color-error-contrast"></i> |
||||
</button> |
||||
{{/unless}} |
||||
{{/unless}} |
||||
{{/unless}} |
||||
</div> |
||||
{{/each}} |
||||
|
||||
{{#unless $eq group._id 'Assets'}} |
||||
<div class="input-line double-col"> |
||||
<label class="setting-label">{{_ "Reset_section_settings"}}</label> |
||||
<div class="setting-field"> |
||||
<button data-section="{{section}}" class="reset-group button danger"> |
||||
{{_ "Reset"}} |
||||
</button> |
||||
</div> |
||||
</div> |
||||
{{/unless}} |
||||
|
||||
{{#if section}} |
||||
{{#if sectionIsCustomOAuth section}} |
||||
<div class="submit"> |
||||
<button class="button danger remove-custom-oauth"><span>{{_ "Remove_custom_oauth"}}</span></button> |
||||
{{/each}} |
||||
|
||||
{{#unless $eq ../../_id 'Assets'}} |
||||
<div class="input-line double-col"> |
||||
<label class="setting-label">{{_ "Reset_section_settings"}}</label> |
||||
<div class="setting-field"> |
||||
<button data-section="{{section}}" class="reset-group button danger"> |
||||
{{_ "Reset"}} |
||||
</button> |
||||
</div> |
||||
</div> |
||||
{{/unless}} |
||||
|
||||
{{#if section}} |
||||
{{#if sectionIsCustomOAuth section}} |
||||
<div class="submit"> |
||||
<button class="button danger remove-custom-oauth"><span>{{_ "Remove_custom_oauth"}}</span></button> |
||||
</div> |
||||
{{/if}} |
||||
{{/if}} |
||||
{{/if}} |
||||
</div> |
||||
</div> |
||||
{{/each}} |
||||
|
||||
<div class="submit"> |
||||
{{#if $eq ../../_id 'OAuth'}} |
||||
<button class="button secondary refresh-oauth"><span>{{_ "Refresh_oauth_services"}}</span></button> |
||||
<button class="button secondary add-custom-oauth"><span>{{_ "Add_custom_oauth"}}</span></button> |
||||
{{/if}} |
||||
{{#if $eq ../../_id 'Assets'}} |
||||
<button class="button refresh-clients"><span>{{_ "Apply_and_refresh_all_clients"}}</span></button> |
||||
{{/if}} |
||||
</div> |
||||
{{/each}} |
||||
|
||||
<div class="submit"> |
||||
{{#if $eq group._id 'OAuth'}} |
||||
<button class="button secondary refresh-oauth"><span>{{_ "Refresh_oauth_services"}}</span></button> |
||||
<button class="button secondary add-custom-oauth"><span>{{_ "Add_custom_oauth"}}</span></button> |
||||
{{/if}} |
||||
{{#if $eq group._id 'Assets'}} |
||||
<button class="button refresh-clients"><span>{{_ "Apply_and_refresh_all_clients"}}</span></button> |
||||
{{/if}} |
||||
</div> |
||||
</div> |
||||
{{/unless}} |
||||
</div> |
||||
</section> |
||||
{{/unless}} |
||||
</div> |
||||
</section> |
||||
{{/with}} |
||||
</template> |
||||
|
||||
Loading…
Reference in new issue