mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update components
This commit is contained in:
parent
0b450116a5
commit
1a84e71a95
31 changed files with 646 additions and 495 deletions
|
@ -16187,8 +16187,15 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
|
|||
@apply(--paper-input-container-underline-disabled);
|
||||
}
|
||||
|
||||
.label-and-input-container {
|
||||
@apply(--layout-flex);
|
||||
@apply(--layout-relative);
|
||||
}
|
||||
|
||||
.input-content {
|
||||
position: relative;
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-end);
|
||||
}
|
||||
|
||||
.input-content ::content label,
|
||||
|
@ -16250,6 +16257,12 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
|
|||
@apply(--paper-input-container-input);
|
||||
}
|
||||
|
||||
::content [prefix],
|
||||
::content [suffix] {
|
||||
@apply(--paper-font-subhead);
|
||||
@apply(--paper-input-container-input);
|
||||
}
|
||||
|
||||
/* Firefox sets a min-width on the input, which can cause layout issues */
|
||||
.input-content ::content input {
|
||||
min-width: 0;
|
||||
|
@ -16276,7 +16289,11 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
|
|||
</template>
|
||||
|
||||
<div class$="[[_computeInputContentClass(noLabelFloat,alwaysFloatLabel,focused,invalid,_inputHasContent)]]">
|
||||
<content select=":not([add-on])"></content>
|
||||
<content select="[prefix]" id="prefix"></content>
|
||||
<div class="label-and-input-container">
|
||||
<content select=":not([add-on]):not([prefix]):not([suffix])"></content>
|
||||
</div>
|
||||
<content select="[suffix]"></content>
|
||||
</div>
|
||||
|
||||
<div class$="[[_computeUnderlineClass(focused,invalid)]]">
|
||||
|
@ -16513,6 +16530,8 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
|
|||
_computeInputContentClass: function(noLabelFloat, alwaysFloatLabel, focused, invalid, _inputHasContent) {
|
||||
var cls = 'input-content';
|
||||
if (!noLabelFloat) {
|
||||
var label = this.querySelector('label');
|
||||
|
||||
if (alwaysFloatLabel || _inputHasContent) {
|
||||
cls += ' label-is-floating';
|
||||
if (invalid) {
|
||||
|
@ -16520,6 +16539,16 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
|
|||
} else if (focused) {
|
||||
cls += " label-is-highlighted";
|
||||
}
|
||||
// The label might have a horizontal offset if a prefix element exists
|
||||
// which needs to be undone when displayed as a floating label.
|
||||
if (this.$.prefix && label && label.offsetParent) {
|
||||
label.style.left = -label.offsetParent.offsetLeft + 'px';
|
||||
}
|
||||
} else {
|
||||
// When the label is not floating, it should overlap the input element.
|
||||
if (label) {
|
||||
label.style.left = 0;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (_inputHasContent) {
|
||||
|
@ -16710,10 +16739,14 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
|
|||
|
||||
<paper-input-container no-label-float="[[noLabelFloat]]" always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]" auto-validate$="[[autoValidate]]" disabled$="[[disabled]]" invalid="[[invalid]]">
|
||||
|
||||
<content select="[prefix]"></content>
|
||||
|
||||
<label hidden$="[[!label]]">[[label]]</label>
|
||||
|
||||
<input is="iron-input" id="input" aria-labelledby$="[[_ariaLabelledBy]]" aria-describedby$="[[_ariaDescribedBy]]" disabled$="[[disabled]]" bind-value="{{value}}" invalid="{{invalid}}" prevent-invalid-input="[[preventInvalidInput]]" allowed-pattern="[[allowedPattern]]" validator="[[validator]]" type$="[[type]]" pattern$="[[pattern]]" maxlength$="[[maxlength]]" required$="[[required]]" autocomplete$="[[autocomplete]]" autofocus$="[[autofocus]]" inputmode$="[[inputmode]]" minlength$="[[minlength]]" name$="[[name]]" placeholder$="[[placeholder]]" readonly$="[[readonly]]" list$="[[list]]" size$="[[size]]" autocapitalize$="[[autocapitalize]]" autocorrect$="[[autocorrect]]">
|
||||
|
||||
<content select="[suffix]"></content>
|
||||
|
||||
<template is="dom-if" if="[[errorMessage]]">
|
||||
<paper-input-error>[[errorMessage]]</paper-input-error>
|
||||
</template>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue