1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

update components

This commit is contained in:
Luke Pulverenti 2016-06-10 02:54:03 -04:00
parent 59b4199fc0
commit 8144b83f54
44 changed files with 413 additions and 355 deletions

View file

@ -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>

View file

@ -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 {

View file

@ -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;
}
}