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
59b4199fc0
commit
8144b83f54
44 changed files with 413 additions and 355 deletions
|
@ -1,46 +0,0 @@
|
|||
<!--
|
||||
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<!--
|
||||
`iron-icons` is a utility import that includes the definition for the `iron-icon` element, `iron-iconset-svg` element, as well as an import for the default icon set.
|
||||
|
||||
The `iron-icons` directory also includes imports for additional icon sets that can be loaded into your project.
|
||||
|
||||
Example loading icon set:
|
||||
|
||||
<link rel="import" href="../iron-icons/maps-icons.html">
|
||||
|
||||
To use an icon from one of these sets, first prefix your `iron-icon` with the icon set name, followed by a colon, ":", and then the icon id.
|
||||
|
||||
Example using the directions-bus icon from the maps icon set:
|
||||
|
||||
<iron-icon icon="maps:directions-bus"></iron-icon>
|
||||
|
||||
|
||||
See [iron-icon](#iron-icon) for more information about working with icons.
|
||||
|
||||
See [iron-iconset](#iron-iconset) and [iron-iconset-svg](#iron-iconset-svg) for more information about how to create a custom iconset.
|
||||
|
||||
@group Iron Elements
|
||||
@element iron-icons
|
||||
@demo demo/index.html
|
||||
-->
|
||||
|
||||
<iron-iconset-svg name="slideshow" size="24">
|
||||
<svg>
|
||||
<defs>
|
||||
<g id="close"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" /></g>
|
||||
<g id="pause"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" /></g>
|
||||
<g id="keyboard-arrow-left"><path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z" /></g>
|
||||
<g id="keyboard-arrow-right"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z" /></g>
|
||||
<g id="play-arrow"><path d="M8 5v14l11-7z" /></g>
|
||||
<g id="file-download"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" /></g>
|
||||
<g id="share"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z" /></g>
|
||||
</defs>
|
||||
</svg>
|
||||
</iron-iconset-svg>
|
|
@ -1,4 +1,4 @@
|
|||
define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'focusManager', 'apphost', 'css!./style', 'html!./icons', 'iron-icon-set', 'paper-icon-button-light', 'paper-spinner'], function (dialogHelper, inputmanager, connectionManager, layoutManager, focusManager, appHost) {
|
||||
define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'focusManager', 'apphost', 'css!./style', 'material-icons', 'paper-icon-button-light', 'paper-spinner'], function (dialogHelper, inputmanager, connectionManager, layoutManager, focusManager, appHost) {
|
||||
|
||||
function getImageUrl(item, options, apiClient) {
|
||||
|
||||
|
@ -91,7 +91,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
|
|||
|
||||
var tabIndex = canFocus ? '' : ' tabindex="-1"';
|
||||
autoFocus = autoFocus ? ' autofocus' : '';
|
||||
return '<button is="paper-icon-button-light" class="' + cssClass + '"' + tabIndex + autoFocus + '><iron-icon icon="' + icon + '"></iron-icon></button>';
|
||||
return '<button is="paper-icon-button-light" class="autoSize ' + cssClass + '"' + tabIndex + autoFocus + '><i class="md-icon">' + icon + '</i></button>';
|
||||
}
|
||||
|
||||
return function (options) {
|
||||
|
@ -125,30 +125,30 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
|
|||
html += '<div>';
|
||||
html += '<div class="slideshowSwiperContainer"><div class="swiper-wrapper"></div></div>';
|
||||
|
||||
html += getIcon('slideshow:keyboard-arrow-left', 'btnSlideshowPrevious slideshowButton', false);
|
||||
html += getIcon('slideshow:keyboard-arrow-right', 'btnSlideshowNext slideshowButton', false);
|
||||
html += getIcon('keyboard_arrow_left', 'btnSlideshowPrevious slideshowButton', false);
|
||||
html += getIcon('keyboard_arrow_right', 'btnSlideshowNext slideshowButton', false);
|
||||
|
||||
html += '<div class="topActionButtons">';
|
||||
if (actionButtonsOnTop) {
|
||||
if (appHost.supports('filedownload')) {
|
||||
html += getIcon('slideshow:file-download', 'btnDownload slideshowButton', true);
|
||||
html += getIcon('file_download', 'btnDownload slideshowButton', true);
|
||||
}
|
||||
if (appHost.supports('sharing')) {
|
||||
html += getIcon('slideshow:share', 'btnShare slideshowButton', true);
|
||||
html += getIcon('share', 'btnShare slideshowButton', true);
|
||||
}
|
||||
}
|
||||
html += getIcon('slideshow:close', 'slideshowButton btnSlideshowExit', false);
|
||||
html += getIcon('close', 'slideshowButton btnSlideshowExit', false);
|
||||
html += '</div>';
|
||||
|
||||
if (!actionButtonsOnTop) {
|
||||
html += '<div class="slideshowBottomBar hide">';
|
||||
|
||||
html += getIcon('slideshow:pause', 'btnSlideshowPause slideshowButton', true, true);
|
||||
html += getIcon('pause', 'btnSlideshowPause slideshowButton', true, true);
|
||||
if (appHost.supports('filedownload')) {
|
||||
html += getIcon('slideshow:file-download', 'btnDownload slideshowButton', true);
|
||||
html += getIcon('file_download', 'btnDownload slideshowButton', true);
|
||||
}
|
||||
if (appHost.supports('sharing')) {
|
||||
html += getIcon('slideshow:share', 'btnShare slideshowButton', true);
|
||||
html += getIcon('share', 'btnShare slideshowButton', true);
|
||||
}
|
||||
|
||||
html += '</div>';
|
||||
|
@ -362,9 +362,9 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
|
|||
|
||||
function play() {
|
||||
|
||||
var btnSlideshowPause = dlg.querySelector('.btnSlideshowPause iron-icon');
|
||||
var btnSlideshowPause = dlg.querySelector('.btnSlideshowPause i');
|
||||
if (btnSlideshowPause) {
|
||||
btnSlideshowPause.icon = "slideshow:pause";
|
||||
btnSlideshowPause.innerHTML = "pause";
|
||||
}
|
||||
|
||||
swiperInstance.startAutoplay();
|
||||
|
@ -372,9 +372,9 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
|
|||
|
||||
function pause() {
|
||||
|
||||
var btnSlideshowPause = dlg.querySelector('.btnSlideshowPause iron-icon');
|
||||
var btnSlideshowPause = dlg.querySelector('.btnSlideshowPause i');
|
||||
if (btnSlideshowPause) {
|
||||
btnSlideshowPause.icon = "slideshow:play-arrow";
|
||||
btnSlideshowPause.innerHTML = "play_arrow";
|
||||
}
|
||||
|
||||
swiperInstance.stopAutoplay();
|
||||
|
@ -382,7 +382,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
|
|||
|
||||
function playPause() {
|
||||
|
||||
var paused = dlg.querySelector('.btnSlideshowPause iron-icon').icon != "slideshow:pause";
|
||||
var paused = dlg.querySelector('.btnSlideshowPause i').innerHTML != "pause";
|
||||
if (paused) {
|
||||
play();
|
||||
} else {
|
||||
|
|
|
@ -45,24 +45,27 @@
|
|||
top: 50%;
|
||||
}
|
||||
|
||||
.slideshowDialog .slideshowButton {
|
||||
width: 5.2vh;
|
||||
height: 5.2vh;
|
||||
.slideshowDialog .slideshowButton i {
|
||||
width: 4.5vh;
|
||||
height: 4.5vh;
|
||||
font-size: 4.5vh;
|
||||
color: #fff;
|
||||
opacity: .7;
|
||||
min-width: 40px;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.layout-tv .slideshowDialog .slideshowButtonn {
|
||||
width: 7vh;
|
||||
height: 7vh;
|
||||
.layout-tv .slideshowDialog .slideshowButton i {
|
||||
width: 6.3vh;
|
||||
height: 6.3vh;
|
||||
font-size: 6.3vh;
|
||||
}
|
||||
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3), only screen and (min-resolution: 120dpi) {
|
||||
.slideshowDialog paper-icon-button {
|
||||
width: 11vmin;
|
||||
height: 11vmin;
|
||||
.slideshowDialog [is=paper-icon-button-light] i {
|
||||
width: 10.3vmin;
|
||||
height: 10.3vmin;
|
||||
font-size: 10.3vmin;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue