mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update controls
This commit is contained in:
Luke Pulverenti
parent
20b01a80b3
commit
5439ca56b6
7 changed files with 364 additions and 38 deletions
|
|
@ -16,13 +16,13 @@
|
|||
|
||||
<form class="dashboardGeneralForm">
|
||||
|
||||
<ul data-role="listview" class="ulForm">
|
||||
<li>
|
||||
<label for="txtServerName">${LabelFriendlyServerName}</label>
|
||||
<input id="txtServerName" />
|
||||
<div>
|
||||
<paper-input type="text" id="txtServerName" label="${LabelFriendlyServerName}"></paper-input>
|
||||
<div class="fieldDescription">${LabelFriendlyServerNameHelp}</div>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
</div>
|
||||
<br/><br />
|
||||
<div>
|
||||
<label for="selectLocalizationLanguage">${LabelPreferredDisplayLanguage}</label>
|
||||
<select id="selectLocalizationLanguage" data-mini="true"></select>
|
||||
<div class="fieldDescription">
|
||||
|
|
@ -31,9 +31,8 @@
|
|||
<a href="http://emby.media/community/index.php?/topic/5727-join-our-translation-team/" target="_blank">${LabelReadHowYouCanContribute}</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<br /><br />
|
||||
|
||||
<div data-role="collapsible">
|
||||
<h2>${HeaderAdvanced}</h2>
|
||||
|
|
@ -41,11 +40,8 @@
|
|||
<br />
|
||||
<ul data-role="listview" class="ulForm">
|
||||
<li>
|
||||
<label for="txtCachePath">${LabelCachePath}</label>
|
||||
<div style="display: inline-block; width: 85%;">
|
||||
<input type="text" id="txtCachePath" name="txtCachePath" />
|
||||
</div>
|
||||
<button id="btnSelectCachePath" type="button" data-icon="search" data-iconpos="notext" data-inline="true">${ButtonSelectDirectory}</button>
|
||||
<paper-input type="text" id="txtCachePath" label="${LabelCachePath}" style="display:inline-block;width:85%;"></paper-input>
|
||||
<paper-icon-button id="btnSelectCachePath" icon="search">${ButtonSelectDirectory}</paper-icon-button>
|
||||
<div class="fieldDescription">${LabelCachePathHelp}</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -60,13 +56,11 @@
|
|||
|
||||
<ul data-role="listview" class="ulForm">
|
||||
<li>
|
||||
<label for="txtLoginDisclaimer">${LabelLoginDisclaimer}</label>
|
||||
<input id="txtLoginDisclaimer" type="text" />
|
||||
<paper-input type="text" id="txtLoginDisclaimer" label="${LabelLoginDisclaimer}"></paper-input>
|
||||
<div class="fieldDescription">${LabelLoginDisclaimerHelp}</div>
|
||||
</li>
|
||||
<li>
|
||||
<label for="txtCustomCss">${LabelCustomCss}</label>
|
||||
<textarea id="txtCustomCss" style="font-family:monospace;height:200px!important;overflow-y:auto;"></textarea>
|
||||
<paper-textarea id="txtCustomCss" label="${LabelCustomCss}" class="mono"></paper-textarea>
|
||||
<div class="fieldDescription">${LabelCustomCssHelp}</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="itemDetailPage" data-role="page" class="page libraryPage itemDetailPage lightBackdropPage" data-theme="b" data-require="scripts/itemdetailpage,paperbuttonstyle,tileitemcss,jqmicons,scripts/livetvcomponents">
|
||||
<div id="itemDetailPage" data-role="page" class="page libraryPage itemDetailPage lightBackdropPage" data-theme="b" data-require="scripts/itemdetailpage,paperbuttonstyle,tileitemcss,scripts/livetvcomponents">
|
||||
|
||||
<div class="itemTabs homeTabs" style="display: none;">
|
||||
<div class="libraryViewNav scopedLibraryViewNav">
|
||||
|
|
|
|||
|
|
@ -13,7 +13,8 @@
|
|||
|
||||
refreshPageTitle(page);
|
||||
|
||||
$('#txtServerName', page).val(config.ServerName || '');
|
||||
page.querySelector('#txtServerName').value = config.ServerName || '';
|
||||
page.querySelector('#txtCachePath').value = config.CachePath || '';
|
||||
|
||||
$('#selectLocalizationLanguage', page).html(languageOptions.map(function (l) {
|
||||
|
||||
|
|
@ -23,8 +24,6 @@
|
|||
|
||||
currentLanguage = config.UICulture;
|
||||
|
||||
$('#txtCachePath', page).val(config.CachePath || '');
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
}
|
||||
|
||||
|
|
@ -44,10 +43,10 @@
|
|||
|
||||
ApiClient.getServerConfiguration().done(function (config) {
|
||||
|
||||
config.ServerName = $('#txtServerName', form).val();
|
||||
config.ServerName = form.querySelector('#txtServerName').value;
|
||||
config.UICulture = $('#selectLocalizationLanguage', form).val();
|
||||
|
||||
config.CachePath = $('#txtCachePath', form).val();
|
||||
config.CachePath = form.querySelector('#txtCachePath').value;
|
||||
|
||||
if (config.UICulture != currentLanguage) {
|
||||
Dashboard.showDashboardRefreshNotification();
|
||||
|
|
@ -59,8 +58,8 @@
|
|||
|
||||
ApiClient.getNamedConfiguration(brandingConfigKey).done(function (brandingConfig) {
|
||||
|
||||
brandingConfig.LoginDisclaimer = $('#txtLoginDisclaimer', form).val();
|
||||
brandingConfig.CustomCss = $('#txtCustomCss', form).val();
|
||||
brandingConfig.LoginDisclaimer = form.querySelector('#txtLoginDisclaimer').value;
|
||||
brandingConfig.CustomCss = form.querySelector('#txtCustomCss').value;
|
||||
|
||||
var cssChanged = currentBrandingOptions && brandingConfig.CustomCss != currentBrandingOptions.CustomCss;
|
||||
|
||||
|
|
@ -91,7 +90,7 @@
|
|||
callback: function (path) {
|
||||
|
||||
if (path) {
|
||||
$('#txtCachePath', page).val(path);
|
||||
page.querySelector('#txtCachePath').value = path;
|
||||
}
|
||||
picker.close();
|
||||
},
|
||||
|
|
@ -124,8 +123,8 @@
|
|||
|
||||
currentBrandingOptions = config;
|
||||
|
||||
$('#txtLoginDisclaimer', page).val(config.LoginDisclaimer || '');
|
||||
$('#txtCustomCss', page).val(config.CustomCss || '');
|
||||
page.querySelector('#txtLoginDisclaimer').value = config.LoginDisclaimer || '';
|
||||
page.querySelector('#txtCustomCss').value = config.CustomCss || '';
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@ var Dashboard = {
|
|||
// These are not needed. Nulling them out can help reduce dom querying when pages are loaded
|
||||
$.mobile.nojs = null;
|
||||
$.mobile.degradeInputsWithin = null;
|
||||
$.mobile.keepNative = ":jqmData(role='none'),.paper-input";
|
||||
$.mobile.keepNative = ":jqmData(role='none'),.paper-input,textarea.style-scope";
|
||||
|
||||
$.mobile.filterHtml = Dashboard.filterHtml;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -388,3 +388,6 @@ paper-menu-item {
|
|||
.ui-page-theme-b .unfocused-line.paper-input-container {
|
||||
background: #858585;
|
||||
}
|
||||
paper-textarea.mono textarea {
|
||||
font-family: monospace!important;
|
||||
}
|
||||
|
|
@ -18,6 +18,7 @@
|
|||
<link rel="import" href="bower_components/paper-slider/paper-slider.html">
|
||||
<link rel="import" href="bower_components/paper-menu/paper-menu.html">
|
||||
<link rel="import" href="bower_components/paper-input/paper-input.html">
|
||||
<link rel="import" href="bower_components/paper-input/paper-textarea.html">
|
||||
<link rel="import" href="bower_components/paper-checkbox/paper-checkbox.html">
|
||||
<link rel="import" href="bower_components/paper-item/paper-icon-item.html">
|
||||
<link rel="import" href="bower_components/paper-item/paper-item-body.html">
|
||||
|
|
|
|||
|
|
@ -12355,6 +12355,10 @@ is separate from validation, and `allowed-pattern` does not affect how the input
|
|||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</head><body><div hidden="" by-vulcanize=""><dom-module id="paper-material" assetpath="bower_components/paper-material/">
|
||||
<style>
|
||||
:host {
|
||||
|
|
@ -17490,6 +17494,331 @@ paper-ripple {
|
|||
|
||||
})();
|
||||
|
||||
</script>
|
||||
<dom-module id="iron-autogrow-textarea" assetpath="bower_components/iron-autogrow-textarea/">
|
||||
|
||||
<style>
|
||||
:host {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 400px;
|
||||
border: 1px solid;
|
||||
padding: 2px;
|
||||
-moz-appearance: textarea;
|
||||
-webkit-appearance: textarea;
|
||||
}
|
||||
|
||||
.mirror-text {
|
||||
visibility: hidden;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
textarea {
|
||||
position: relative;
|
||||
outline: none;
|
||||
border: none;
|
||||
resize: none;
|
||||
background: inherit;
|
||||
color: inherit;
|
||||
/* see comments in template */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
::content textarea:invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
<template>
|
||||
|
||||
<div id="mirror" class="mirror-text" aria-hidden="true"> </div>
|
||||
|
||||
|
||||
<div class="textarea-container fit">
|
||||
<textarea id="textarea" autocomplete$="[[autocomplete]]" autofocus$="[[autofocus]]" inputmode$="[[inputmode]]" placeholder$="[[placeholder]]" readonly$="[[readonly]]" required$="[[required]]" rows$="[[rows]]" maxlength$="[[maxlength]]"></textarea>
|
||||
</div>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'iron-autogrow-textarea',
|
||||
|
||||
behaviors: [
|
||||
Polymer.IronFormElementBehavior,
|
||||
Polymer.IronValidatableBehavior,
|
||||
Polymer.IronControlState
|
||||
],
|
||||
|
||||
properties: {
|
||||
|
||||
/**
|
||||
* Use this property instead of `value` for two-way data binding.
|
||||
*/
|
||||
bindValue: {
|
||||
observer: '_bindValueChanged',
|
||||
type: String
|
||||
},
|
||||
|
||||
/**
|
||||
* The initial number of rows.
|
||||
*
|
||||
* @attribute rows
|
||||
* @type number
|
||||
* @default 1
|
||||
*/
|
||||
rows: {
|
||||
type: Number,
|
||||
value: 1,
|
||||
observer: '_updateCached'
|
||||
},
|
||||
|
||||
/**
|
||||
* The maximum number of rows this element can grow to until it
|
||||
* scrolls. 0 means no maximum.
|
||||
*
|
||||
* @attribute maxRows
|
||||
* @type number
|
||||
* @default 0
|
||||
*/
|
||||
maxRows: {
|
||||
type: Number,
|
||||
value: 0,
|
||||
observer: '_updateCached'
|
||||
},
|
||||
|
||||
/**
|
||||
* Bound to the textarea's `autocomplete` attribute.
|
||||
*/
|
||||
autocomplete: {
|
||||
type: String,
|
||||
value: 'off'
|
||||
},
|
||||
|
||||
/**
|
||||
* Bound to the textarea's `autofocus` attribute.
|
||||
*/
|
||||
autofocus: {
|
||||
type: String,
|
||||
value: 'off'
|
||||
},
|
||||
|
||||
/**
|
||||
* Bound to the textarea's `inputmode` attribute.
|
||||
*/
|
||||
inputmode: {
|
||||
type: String
|
||||
},
|
||||
|
||||
/**
|
||||
* Bound to the textarea's `name` attribute.
|
||||
*/
|
||||
name: {
|
||||
type: String
|
||||
},
|
||||
|
||||
/**
|
||||
* The value for this input, same as `bindValue`
|
||||
*/
|
||||
value: {
|
||||
notify: true,
|
||||
type: String,
|
||||
computed: '_computeValue(bindValue)'
|
||||
},
|
||||
|
||||
/**
|
||||
* Bound to the textarea's `placeholder` attribute.
|
||||
*/
|
||||
placeholder: {
|
||||
type: String
|
||||
},
|
||||
|
||||
/**
|
||||
* Bound to the textarea's `readonly` attribute.
|
||||
*/
|
||||
readonly: {
|
||||
type: String
|
||||
},
|
||||
|
||||
/**
|
||||
* Set to true to mark the textarea as required.
|
||||
*/
|
||||
required: {
|
||||
type: Boolean
|
||||
},
|
||||
|
||||
/**
|
||||
* The maximum length of the input value.
|
||||
*/
|
||||
maxlength: {
|
||||
type: Number
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
listeners: {
|
||||
'input': '_onInput'
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns the underlying textarea.
|
||||
* @type HTMLTextAreaElement
|
||||
*/
|
||||
get textarea() {
|
||||
return this.$.textarea;
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns true if `value` is valid. The validator provided in `validator`
|
||||
* will be used first, if it exists; otherwise, the `textarea`'s validity
|
||||
* is used.
|
||||
* @return {boolean} True if the value is valid.
|
||||
*/
|
||||
validate: function() {
|
||||
// Empty, non-required input is valid.
|
||||
if (!this.required && this.value == '') {
|
||||
this.invalid = false;
|
||||
return true;
|
||||
}
|
||||
|
||||
var valid;
|
||||
if (this.hasValidator()) {
|
||||
valid = Polymer.IronValidatableBehavior.validate.call(this, this.value);
|
||||
} else {
|
||||
valid = this.$.textarea.validity.valid;
|
||||
this.invalid = !valid;
|
||||
}
|
||||
this.fire('iron-input-validate');
|
||||
return valid;
|
||||
},
|
||||
|
||||
_update: function() {
|
||||
this.$.mirror.innerHTML = this._valueForMirror();
|
||||
|
||||
var textarea = this.textarea;
|
||||
// If the value of the textarea was updated imperatively, then we
|
||||
// need to manually update bindValue as well.
|
||||
if (textarea && this.bindValue != textarea.value) {
|
||||
this.bindValue = textarea.value;
|
||||
}
|
||||
},
|
||||
|
||||
_bindValueChanged: function() {
|
||||
var textarea = this.textarea;
|
||||
if (!textarea) {
|
||||
return;
|
||||
}
|
||||
|
||||
textarea.value = this.bindValue;
|
||||
this._update();
|
||||
// manually notify because we don't want to notify until after setting value
|
||||
this.fire('bind-value-changed', {value: this.bindValue});
|
||||
},
|
||||
|
||||
_onInput: function(event) {
|
||||
this.bindValue = event.path ? event.path[0].value : event.target.value;
|
||||
this._update();
|
||||
},
|
||||
|
||||
_constrain: function(tokens) {
|
||||
var _tokens;
|
||||
tokens = tokens || [''];
|
||||
// Enforce the min and max heights for a multiline input to avoid measurement
|
||||
if (this.maxRows > 0 && tokens.length > this.maxRows) {
|
||||
_tokens = tokens.slice(0, this.maxRows);
|
||||
} else {
|
||||
_tokens = tokens.slice(0);
|
||||
}
|
||||
while (this.rows > 0 && _tokens.length < this.rows) {
|
||||
_tokens.push('');
|
||||
}
|
||||
return _tokens.join('<br>') + ' ';
|
||||
},
|
||||
|
||||
_valueForMirror: function() {
|
||||
var input = this.textarea;
|
||||
if (!input) {
|
||||
return;
|
||||
}
|
||||
this.tokens = (input && input.value) ? input.value.replace(/&/gm, '&').replace(/"/gm, '"').replace(/'/gm, ''').replace(/</gm, '<').replace(/>/gm, '>').split('\n') : [''];
|
||||
return this._constrain(this.tokens);
|
||||
},
|
||||
|
||||
_updateCached: function() {
|
||||
this.$.mirror.innerHTML = this._constrain(this.tokens);
|
||||
},
|
||||
|
||||
_computeValue: function() {
|
||||
return this.bindValue;
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<dom-module id="paper-textarea" assetpath="bower_components/paper-input/">
|
||||
<template>
|
||||
|
||||
<paper-input-container no-label-float$="[[noLabelFloat]]" always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]" auto-validate$="[[autoValidate]]" disabled$="[[disabled]]" invalid="[[invalid]]">
|
||||
|
||||
<label hidden$="[[!label]]">[[label]]</label>
|
||||
|
||||
<iron-autogrow-textarea id="input" class="paper-input-input" bind-value="{{value}}" autocomplete$="[[autocomplete]]" autofocus$="[[autofocus]]" inputmode$="[[inputmode]]" name$="[[name]]" placeholder$="[[placeholder]]" readonly$="[[readonly]]" required$="[[required]]" maxlength$="[[maxlength]]" autocapitalize$="[[autocapitalize]]"></iron-autogrow-textarea>
|
||||
|
||||
<template is="dom-if" if="[[errorMessage]]">
|
||||
<paper-input-error>[[errorMessage]]</paper-input-error>
|
||||
</template>
|
||||
|
||||
<template is="dom-if" if="[[charCounter]]">
|
||||
<paper-input-char-counter></paper-input-char-counter>
|
||||
</template>
|
||||
|
||||
</paper-input-container>
|
||||
|
||||
</template>
|
||||
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
|
||||
(function() {
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'paper-textarea',
|
||||
|
||||
behaviors: [
|
||||
Polymer.PaperInputBehavior
|
||||
],
|
||||
|
||||
properties: {
|
||||
|
||||
_ariaLabelledBy: {
|
||||
observer: '_ariaLabelledByChanged',
|
||||
type: String
|
||||
},
|
||||
|
||||
_ariaDescribedBy: {
|
||||
observer: '_ariaDescribedByChanged',
|
||||
type: String
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
_ariaLabelledByChanged: function(ariaLabelledBy) {
|
||||
this.$.input.textarea.setAttribute('aria-labelledby', ariaLabelledBy);
|
||||
},
|
||||
|
||||
_ariaDescribedByChanged: function(ariaDescribedBy) {
|
||||
this.$.input.textarea.setAttribute('aria-describedby', ariaDescribedBy);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
})();
|
||||
|
||||
</script>
|
||||
<dom-module id="paper-checkbox" assetpath="bower_components/paper-checkbox/">
|
||||
<style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue