mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
added ps4 profile
This commit is contained in:
Luke Pulverenti
parent
0d59297b1b
commit
10d2fbe3b3
43 changed files with 1245 additions and 267 deletions
|
|
@ -4,7 +4,9 @@
|
|||
<title>Emby</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="channelsLatestPage" data-role="page" class="page libraryPage channelsPage" data-contextname="${HeaderChannels}" data-require="scripts/sections,scripts/channelslatest">
|
||||
<div id="channelsLatestPage" data-role="page" class="page libraryPage channelsPage" data-contextname="${HeaderChannels}" data-require="scripts/sections,scripts/channelslatest,paperbuttonstyle">
|
||||
|
||||
<link rel="import" href="thirdparty/paper-button/paper-button.html">
|
||||
|
||||
<div class="libraryViewNav scopedLibraryViewNav">
|
||||
<a href="#" class="ui-btn-active latestChannelItemsTab">${TabLatest}</a>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<title>${TitleSignIn}</title>
|
||||
</head>
|
||||
<body class="serverlessPage">
|
||||
<div id="connectLoginPage" data-role="page" class="page standalonePage connectLoginPage" data-theme="b" data-require="scripts/connectlogin,css!thirdparty/paper-button/paper-button-style">
|
||||
<div id="connectLoginPage" data-role="page" class="page standalonePage connectLoginPage" data-theme="b" data-require="scripts/connectlogin,paperbuttonstyle">
|
||||
|
||||
<link rel="import" href="thirdparty/iron-icons/iron-icons.html">
|
||||
<link rel="import" href="thirdparty/paper-button/paper-button.html">
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
.viewMenuBar .material-icons, .viewMenuBar .fa {
|
||||
.viewMenuBar .material-icons, .viewMenuBar .fa, .viewMenuBar paper-icon-button {
|
||||
color: #e8e8e8;
|
||||
font-size: 24px;
|
||||
vertical-align: middle;
|
||||
|
|
|
|||
|
|
@ -51,38 +51,6 @@
|
|||
padding: 2px 5px;
|
||||
}
|
||||
|
||||
.circle {
|
||||
background-color: rgba(0,0,0,0);
|
||||
border: 5px solid rgba(0,183,229,0.9);
|
||||
opacity: .9;
|
||||
border-right: 5px solid rgba(0,0,0,0);
|
||||
border-left: 5px solid rgba(0,0,0,0);
|
||||
border-radius: 30px;
|
||||
box-shadow: 0 0 20px #2187e7;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin: 0 auto;
|
||||
-moz-animation: spinPulse 1s infinite ease-in-out;
|
||||
-webkit-animation: spinPulse 1s infinite linear;
|
||||
}
|
||||
|
||||
.circle1 {
|
||||
background-color: rgba(0,0,0,0);
|
||||
border: 5px solid rgba(0,183,229,0.9);
|
||||
opacity: .9;
|
||||
border-left: 5px solid rgba(0,0,0,0);
|
||||
border-right: 5px solid rgba(0,0,0,0);
|
||||
border-radius: 30px;
|
||||
box-shadow: 0 0 15px #2187e7;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
top: -32px;
|
||||
-moz-animation: spinoffPulse 1s infinite linear;
|
||||
-webkit-animation: spinoffPulse 1s infinite linear;
|
||||
}
|
||||
|
||||
@-moz-keyframes spinPulse {
|
||||
0% {
|
||||
-moz-transform: rotate(160deg);
|
||||
|
|
|
|||
|
|
@ -333,14 +333,8 @@ h1, h1 a {
|
|||
font-size: 24px;
|
||||
}
|
||||
|
||||
.ui-loader h1 {
|
||||
font-family: Roboto;
|
||||
font-weight: 500 !important;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.ui-loader h1 {
|
||||
font-weight: bold;
|
||||
.ui-loader {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
h2 {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,9 @@
|
|||
<title>Emby</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="homeLatestPage" data-role="page" class="page type-home libraryPage allLibraryPage backdropPage" data-backdroptype="movie,series,game,book" data-require="scripts/sections,scripts/homelatest">
|
||||
<div id="homeLatestPage" data-role="page" class="page type-home libraryPage allLibraryPage backdropPage" data-backdroptype="movie,series,game,book" data-require="scripts/sections,scripts/homelatest,paperbuttonstyle">
|
||||
|
||||
<link rel="import" href="thirdparty/paper-button/paper-button.html">
|
||||
|
||||
<div class="libraryViewNav scopedLibraryViewNav">
|
||||
<a href="index.html">${TabHome}</a>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<title>Emby</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="indexPage" data-role="page" class="page type-home libraryPage allLibraryPage backdropPage" data-backdroptype="movie,series,game,book" data-require="scripts/sections,scripts/indexpage,css!thirdparty/paper-button/paper-button-style">
|
||||
<div id="indexPage" data-role="page" class="page type-home libraryPage allLibraryPage backdropPage" data-backdroptype="movie,series,game,book" data-require="scripts/sections,scripts/indexpage,paperbuttonstyle">
|
||||
|
||||
<link rel="import" href="thirdparty/paper-button/paper-button.html">
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,9 @@
|
|||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="itemDetailPage" data-role="page" class="page libraryPage itemDetailPage" data-theme="b" data-require="scripts/itemdetailpage">
|
||||
<div id="itemDetailPage" data-role="page" class="page libraryPage itemDetailPage" data-theme="b" data-require="scripts/itemdetailpage,paperbuttonstyle">
|
||||
|
||||
<link rel="import" href="thirdparty/paper-button/paper-button.html">
|
||||
|
||||
<div class="itemTabs homeTabs" style="display: none;">
|
||||
<div class="libraryViewNav scopedLibraryViewNav">
|
||||
|
|
@ -202,22 +204,6 @@
|
|||
</div>
|
||||
<div id="castContent" class="detailSectionContent"></div>
|
||||
</div>
|
||||
<div class="detailSection detailsSection">
|
||||
<div class="detailSectionHeader">
|
||||
${HeaderDetails}
|
||||
</div>
|
||||
<div class="detailSectionContent" style="padding:0 1em;">
|
||||
<div class="tabDetails">
|
||||
<p id="players"></p>
|
||||
<p id="itemBudget"></p>
|
||||
<p id="itemRevenue"></p>
|
||||
<p class="itemExternalLinks"></p>
|
||||
<p class="itemStudios"></p>
|
||||
<p class="itemKeywords"></p>
|
||||
<p class="itemTags"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detailSection photoInfo hide">
|
||||
<div class="detailSectionHeader">
|
||||
|
|
@ -262,6 +248,22 @@
|
|||
<div id="criticReviewsContent" class="detailSectionContent"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detailSection detailsSection">
|
||||
<div class="detailSectionHeader">
|
||||
${HeaderDetails}
|
||||
</div>
|
||||
<div class="detailSectionContent" style="padding:0 1em;">
|
||||
<div class="tabDetails">
|
||||
<p id="players"></p>
|
||||
<p id="itemBudget"></p>
|
||||
<p id="itemRevenue"></p>
|
||||
<p class="itemExternalLinks"></p>
|
||||
<p class="itemStudios"></p>
|
||||
<p class="itemKeywords"></p>
|
||||
<p class="itemTags"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="scenesCollapsible" style="display: none;" class="detailSection">
|
||||
<div class="detailSectionHeader">
|
||||
${HeaderScenes}
|
||||
|
|
|
|||
|
|
@ -22,12 +22,6 @@
|
|||
|
||||
</div>
|
||||
|
||||
<div data-role="popup" class="popupLoading" data-overlay-theme="b" data-theme="b" data-dismissible="false" data-history="false" data-positionto="window">
|
||||
<div style="padding: .5em 1.5em;">
|
||||
<p style="color: #eee;">${MessageLoadingChannels}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-role="panel" class="viewPanel" data-theme="a" data-position="right" data-display="overlay" data-position-fixed="true">
|
||||
<form>
|
||||
|
||||
|
|
|
|||
|
|
@ -51,11 +51,6 @@
|
|||
<a href="#" data-rel="back" data-role="button" data-mini="true" data-icon="delete">${ButtonCancel}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div data-role="popup" class="popupLoading" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width: 250px;" data-history="false">
|
||||
<div style="padding: .5em 1.5em;">
|
||||
<p style="color: #eee;">${MessageLoadingChannels}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<title>Emby</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="liveTvRecordingsPage" data-role="page" class="page libraryPage liveTvPage" data-contextname="${HeaderLiveTv}" data-require="scripts/livetvrecordings,css!thirdparty/paper-button/paper-button-style">
|
||||
<div id="liveTvRecordingsPage" data-role="page" class="page libraryPage liveTvPage" data-contextname="${HeaderLiveTv}" data-require="scripts/livetvrecordings,paperbuttonstyle">
|
||||
<link rel="import" href="thirdparty/paper-button/paper-button.html">
|
||||
|
||||
<div class="libraryViewNav">
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
<div id="latestRecordings" style="display: none;">
|
||||
<div>
|
||||
<h1 class="listHeader" style="display:inline-block;vertical-align:middle;">${HeaderLatestRecordings}</h1>
|
||||
<paper-button raised class="secondary mini categorySyncButton" data-category="Latest"><i class="fa fa-refresh"></i>${ButtonSync}</paper-button>
|
||||
<paper-button raised class="submit mini categorySyncButton" data-category="Latest"><i class="fa fa-refresh"></i>${ButtonSync}</paper-button>
|
||||
</div>
|
||||
<div class="recordingItems itemsContainer"></div>
|
||||
<br />
|
||||
|
|
|
|||
|
|
@ -4,7 +4,9 @@
|
|||
<title>Emby</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="liveTvSuggestedPage" data-role="page" class="page libraryPage liveTvPage backdropPage globalBackdropPage" data-contextname="${HeaderLiveTv}" data-backdroptype="series,movie" data-require="scripts/livetvsuggested">
|
||||
<div id="liveTvSuggestedPage" data-role="page" class="page libraryPage liveTvPage backdropPage globalBackdropPage" data-contextname="${HeaderLiveTv}" data-backdroptype="series,movie" data-require="scripts/livetvsuggested,paperbuttonstyle">
|
||||
<link rel="import" href="thirdparty/paper-button/paper-button.html">
|
||||
|
||||
<div class="libraryViewNav">
|
||||
<a href="#" class="ui-btn-active">${TabSuggestions}</a>
|
||||
<a href="livetvguide.html">${TabGuide}</a>
|
||||
|
|
@ -26,19 +28,19 @@
|
|||
<br />
|
||||
</div>
|
||||
<div id="upcomingTvMovies">
|
||||
<h1 class="listHeader">${HeaderUpcomingMovies}</h1>
|
||||
<div class="upcomingTvMovieItems itemsContainer"></div>
|
||||
<div>
|
||||
<a data-role="button" href="livetvitems.html?type=movies" data-inline="true" data-mini="true">${ButtonMoreItems}</a>
|
||||
<h1 class="listHeader" style="display:inline-block;vertical-align:middle;">${HeaderUpcomingMovies}</h1>
|
||||
<a href="livetvitems.html?type=movies" class="clearLink" style="margin-left:1em;vertical-align:middle;"><paper-button raised class="more mini">${ButtonMoreItems}</paper-button></a>
|
||||
</div>
|
||||
<div class="upcomingTvMovieItems itemsContainer"></div>
|
||||
<br />
|
||||
</div>
|
||||
<div id="upcomingSports">
|
||||
<h1 class="listHeader">${HeaderUpcomingSports}</h1>
|
||||
<div class="upcomingSportsItems itemsContainer"></div>
|
||||
<div>
|
||||
<a data-role="button" href="livetvitems.html?type=sports" data-inline="true" data-mini="true">${ButtonMoreItems}</a>
|
||||
<h1 class="listHeader" style="display:inline-block;vertical-align:middle;">${HeaderUpcomingSports}</h1>
|
||||
<a href="livetvitems.html?type=sports" class="clearLink" style="margin-left:1em;vertical-align:middle;"><paper-button raised class="more mini">${ButtonMoreItems}</paper-button></a>
|
||||
</div>
|
||||
<div class="upcomingSportsItems itemsContainer"></div>
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<title>${TitleSignIn}</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="loginPage" data-role="page" class="page standalonePage" data-theme="b" data-require="scripts/loginpage,css!thirdparty/paper-button/paper-button-style">
|
||||
<div id="loginPage" data-role="page" class="page standalonePage" data-theme="b" data-require="scripts/loginpage,paperbuttonstyle">
|
||||
|
||||
<link rel="import" href="thirdparty/iron-icons/iron-icons.html">
|
||||
<link rel="import" href="thirdparty/paper-button/paper-button.html">
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<title>Emby</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="moviesRecommendedPage" data-role="page" class="page libraryPage backdropPage" data-backdroptype="movie" data-require="scripts/moviesrecommended,css!thirdparty/paper-button/paper-button-style">
|
||||
<div id="moviesRecommendedPage" data-role="page" class="page libraryPage backdropPage" data-backdroptype="movie" data-require="scripts/moviesrecommended,paperbuttonstyle">
|
||||
|
||||
<link rel="import" href="thirdparty/paper-button/paper-button.html">
|
||||
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
<div id="resumableSection" style="display: none;" class="homePageSection">
|
||||
<div>
|
||||
<h1 class="listHeader" style="display:inline-block;vertical-align:middle;">${HeaderResume}</h1>
|
||||
<paper-button raised class="secondary mini categorySyncButton" data-category="Resume"><i class="fa fa-refresh"></i>${ButtonSync}</paper-button>
|
||||
<paper-button raised class="submit mini categorySyncButton" data-category="Resume"><i class="fa fa-refresh"></i>${ButtonSync}</paper-button>
|
||||
</div>
|
||||
|
||||
<div id="resumableItems" class="itemsContainer">
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
<div class="homePageSection">
|
||||
<div>
|
||||
<h1 class="listHeader" style="display:inline-block;vertical-align:middle;">${HeaderLatestMovies}</h1>
|
||||
<paper-button raised class="secondary mini categorySyncButton" data-category="Latest"><i class="fa fa-refresh"></i>${ButtonSync}</paper-button>
|
||||
<paper-button raised class="submit mini categorySyncButton" data-category="Latest"><i class="fa fa-refresh"></i>${ButtonSync}</paper-button>
|
||||
</div>
|
||||
|
||||
<div id="recentlyAddedItems" class="itemsContainer">
|
||||
|
|
|
|||
|
|
@ -5,7 +5,10 @@
|
|||
<title>Emby</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="displayPreferencesPage" data-role="page" class="page libraryPage userPreferencesPage" data-contextname="${HeaderPreferences}" data-require="scripts/mypreferencesdisplay,scripts/mypreferencescommon">
|
||||
<div id="displayPreferencesPage" data-role="page" class="page libraryPage userPreferencesPage" data-contextname="${HeaderPreferences}" data-require="scripts/mypreferencesdisplay,scripts/mypreferencescommon,paperbuttonstyle">
|
||||
<link rel="import" href="thirdparty/iron-icons/iron-icons.html">
|
||||
<link rel="import" href="thirdparty/paper-button/paper-button.html">
|
||||
|
||||
<div class="libraryViewNav">
|
||||
<a href="#" class="ui-btn-active lnkDisplayPreferences">${TabDisplay}</a>
|
||||
<a href="#" class="lnkLanguagePreferences">${TabPlayback}</a>
|
||||
|
|
@ -136,16 +139,13 @@
|
|||
|
||||
</div>
|
||||
|
||||
<ul data-role="listview" class="ulForm">
|
||||
<li>
|
||||
<button type="submit" data-theme="a" data-icon="check">
|
||||
${ButtonOk}
|
||||
<div>
|
||||
<button type="submit" data-role="none" class="clearButton">
|
||||
<paper-button raised class="submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSave}</span></paper-button>
|
||||
</button>
|
||||
<button type="button" onclick="history.back();" data-icon="delete">
|
||||
${ButtonCancel}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<paper-button raised class="cancel block btnCancel" onclick="history.back();"><iron-icon icon="close"></iron-icon><span>${ButtonCancel}</span></paper-button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,10 @@
|
|||
<title>Emby</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="languagePreferencesPage" data-role="page" class="page libraryPage userPreferencesPage" data-contextname="${HeaderPreferences}" data-require="scripts/mypreferenceslanguages,scripts/mypreferencescommon">
|
||||
<div id="languagePreferencesPage" data-role="page" class="page libraryPage userPreferencesPage" data-contextname="${HeaderPreferences}" data-require="scripts/mypreferenceslanguages,scripts/mypreferencescommon,paperbuttonstyle">
|
||||
<link rel="import" href="thirdparty/iron-icons/iron-icons.html">
|
||||
<link rel="import" href="thirdparty/paper-button/paper-button.html">
|
||||
|
||||
<div class="libraryViewNav">
|
||||
<a href="#" class="lnkDisplayPreferences">${TabDisplay}</a>
|
||||
<a href="#" class="ui-btn-active lnkLanguagePreferences">${TabPlayback}</a>
|
||||
|
|
@ -71,16 +74,13 @@
|
|||
|
||||
</div>
|
||||
|
||||
<ul data-role="listview" class="ulForm">
|
||||
<li>
|
||||
<button type="submit" data-theme="a" data-icon="check">
|
||||
${ButtonOk}
|
||||
<div>
|
||||
<button type="submit" data-role="none" class="clearButton">
|
||||
<paper-button raised class="submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSave}</span></paper-button>
|
||||
</button>
|
||||
<button type="button" onclick="history.back();" data-icon="delete">
|
||||
${ButtonCancel}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<paper-button raised class="cancel block btnCancel" onclick="history.back();"><iron-icon icon="close"></iron-icon><span>${ButtonCancel}</span></paper-button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,10 @@
|
|||
<title>Emby</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="webClientPreferencesPage" data-role="page" class="page libraryPage userPreferencesPage" data-contextname="${HeaderPreferences}" data-require="scripts/mypreferenceswebclient,scripts/mypreferencescommon">
|
||||
<div id="webClientPreferencesPage" data-role="page" class="page libraryPage userPreferencesPage" data-contextname="${HeaderPreferences}" data-require="scripts/mypreferenceswebclient,scripts/mypreferencescommon,paperbuttonstyle">
|
||||
<link rel="import" href="thirdparty/iron-icons/iron-icons.html">
|
||||
<link rel="import" href="thirdparty/paper-button/paper-button.html">
|
||||
|
||||
<div class="libraryViewNav">
|
||||
<a href="#" class="lnkDisplayPreferences">${TabDisplay}</a>
|
||||
<a href="#" class="lnkLanguagePreferences">${TabPlayback}</a>
|
||||
|
|
@ -224,16 +227,13 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<ul data-role="listview" class="ulForm">
|
||||
<li>
|
||||
<button type="submit" data-theme="a" data-icon="check">
|
||||
${ButtonOk}
|
||||
<div>
|
||||
<button type="submit" data-role="none" class="clearButton">
|
||||
<paper-button raised class="submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSave}</span></paper-button>
|
||||
</button>
|
||||
<button type="button" onclick="history.back();" data-icon="delete">
|
||||
${ButtonCancel}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<paper-button raised class="cancel block btnCancel" onclick="history.back();"><iron-icon icon="close"></iron-icon><span>${ButtonCancel}</span></paper-button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,10 @@
|
|||
<title>Emby</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="userImagePage" data-role="page" class="page libraryPage userPreferencesPage userPasswordPage" data-contextname="${HeaderPreferences}" data-require="scripts/myprofile,scripts/mypreferencescommon">
|
||||
<div id="userImagePage" data-role="page" class="page libraryPage userPreferencesPage userPasswordPage" data-contextname="${HeaderPreferences}" data-require="scripts/myprofile,scripts/mypreferencescommon,paperbuttonstyle">
|
||||
|
||||
<link rel="import" href="thirdparty/iron-icons/iron-icons.html">
|
||||
<link rel="import" href="thirdparty/paper-button/paper-button.html">
|
||||
|
||||
<div class="libraryViewNav">
|
||||
<a href="#" class="lnkDisplayPreferences">${TabDisplay}</a>
|
||||
|
|
@ -80,13 +83,11 @@
|
|||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<button type="submit" data-theme="b" data-icon="check" data-mini="true">
|
||||
${ButtonSave}
|
||||
<button type="submit" data-role="none" class="clearButton">
|
||||
<paper-button raised class="submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSave}</span></paper-button>
|
||||
</button>
|
||||
<div id="btnResetPassword" style="display: none;">
|
||||
<button type="button" data-icon="lock" onclick="UpdatePasswordPage.resetPassword();" data-mini="true">
|
||||
${ButtonResetPassword}
|
||||
</button>
|
||||
<paper-button raised class="cancel block" onclick="UpdatePasswordPage.resetPassword();"><iron-icon icon="lock"></iron-icon><span>${ButtonResetPassword}</span></paper-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -113,12 +114,10 @@
|
|||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<button type="submit" data-theme="b" data-icon="check" data-mini="true">
|
||||
${ButtonSave}
|
||||
</button>
|
||||
<button id="btnResetEasyPassword" style="display:none;" type="button" data-icon="lock" onclick="UpdatePasswordPage.resetEasyPassword();" data-mini="true">
|
||||
${ButtonResetEasyPassword}
|
||||
<button type="submit" data-role="none" class="clearButton">
|
||||
<paper-button raised class="submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSave}</span></paper-button>
|
||||
</button>
|
||||
<paper-button id="btnResetEasyPassword" style="display:none;" raised class="cancel block" onclick="UpdatePasswordPage.resetEasyPassword();"><iron-icon icon="lock"></iron-icon><span>${ButtonResetEasyPassword}</span></paper-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -23,12 +23,6 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div data-role="popup" class="popupLoading" data-overlay-theme="b" data-theme="b" data-dismissible="false" data-history="false" data-positionto="window">
|
||||
<div style="padding: .5em 1.5em;">
|
||||
<p style="color: #eee;">${MessageLoadingContent}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-role="panel" class="viewPanel" data-theme="a" data-position="right" data-display="overlay" data-position-fixed="true">
|
||||
<form>
|
||||
|
||||
|
|
|
|||
|
|
@ -197,7 +197,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
$(document).on('pageshowready', ".page", function () {
|
||||
$(document).on('pagebeforeshowready', ".page", function () {
|
||||
|
||||
var page = this;
|
||||
|
||||
|
|
@ -212,10 +212,7 @@
|
|||
|
||||
var parentId = $page.hasClass('globalBackdropPage') ? '' : LibraryMenu.getTopParentId();
|
||||
|
||||
// This is an artificial timeout, but we want to give priority to the regular data requests for the page
|
||||
setTimeout(function () {
|
||||
showBackdrop(type, parentId);
|
||||
}, 100);
|
||||
|
||||
} else {
|
||||
$page.removeClass('backdropPage');
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
Sections.loadLatestChannelItems($(".section2", page), userId);
|
||||
}
|
||||
|
||||
$(document).on('pageshowready', "#homeLatestPage", function () {
|
||||
$(document).on('pagebeforeshowready', "#homeLatestPage", function () {
|
||||
|
||||
var page = this;
|
||||
|
||||
|
|
|
|||
|
|
@ -1090,7 +1090,7 @@
|
|||
}
|
||||
|
||||
if (limit && result.TotalRecordCount > limit) {
|
||||
html += '<p style="margin: 0;padding-left: .5em;"><button class="moreCriticReviews" data-inline="true" data-mini="true">' + Globalize.translate('ButtonMoreItems') + '</button></p>';
|
||||
html += '<p style="margin: 0;"><paper-button raised class="more mini moreCriticReviews">' + Globalize.translate('ButtonMoreItems') + '</paper-button></p>';
|
||||
}
|
||||
|
||||
$('#criticReviewsContent', page).html(html).trigger('create');
|
||||
|
|
@ -1248,7 +1248,7 @@
|
|||
}
|
||||
|
||||
if (limit && chapters.length > limit) {
|
||||
html += '<p style="margin: 0;padding-left: .5em;"><button class="moreScenes" data-inline="true" data-mini="true">' + Globalize.translate('ButtonMoreItems') + '</button></p>';
|
||||
html += '<p style="margin: 0;"><paper-button raised class="more mini moreScenes">' + Globalize.translate('ButtonMoreItems') + '</paper-button></p>';
|
||||
}
|
||||
|
||||
$('#scenesContent', page).html(html).trigger('create').lazyChildren();
|
||||
|
|
@ -1480,7 +1480,7 @@
|
|||
}
|
||||
|
||||
if (limit && items.length > limit) {
|
||||
html += '<p style="margin: 0;padding-left: .5em;"><button class="' + moreButtonClass + '" data-inline="true" data-mini="true">' + Globalize.translate('ButtonMoreItems') + '</button></p>';
|
||||
html += '<p style="margin: 0;"><paper-button raised class="more mini ' + moreButtonClass + '">' + Globalize.translate('ButtonMoreItems') + '</paper-button></p>';
|
||||
}
|
||||
|
||||
return html;
|
||||
|
|
@ -1557,7 +1557,7 @@
|
|||
}
|
||||
|
||||
if (limit && casts.length > limit) {
|
||||
html += '<p style="margin: 0;padding-left: .5em;"><button class="morePeople" data-inline="true" data-mini="true">' + Globalize.translate('ButtonMoreItems') + '</button></p>';
|
||||
html += '<p style="margin: 0;"><paper-button raised class="more mini morePeople">' + Globalize.translate('ButtonMoreItems') + '</paper-button></p>';
|
||||
}
|
||||
|
||||
$('#castContent', page).html(html).lazyChildren().trigger('create');
|
||||
|
|
|
|||
|
|
@ -41,6 +41,7 @@
|
|||
|
||||
if (!$.browser.mobile && !AppInfo.isNativeApp) {
|
||||
html += '<a href="dashboard.html" class="headerButton headerButtonRight dashboardEntryHeaderButton" style="display:none;"><i class="material-icons">settings</i></a>';
|
||||
//html += '<a href="dashboard.html" class="headerButton headerButtonRight dashboardEntryHeaderButton clearLink" style="display:none;"><paper-icon-button icon="settings"></paper-icon-button></a>';
|
||||
}
|
||||
|
||||
html += '</div>';
|
||||
|
|
|
|||
|
|
@ -18,11 +18,11 @@
|
|||
|
||||
function showLoadingMessage(page) {
|
||||
|
||||
$('.popupLoading', page).popup('open');
|
||||
Dashboard.showLoadingMsg();
|
||||
}
|
||||
|
||||
function hideLoadingMessage(page) {
|
||||
$('.popupLoading', page).popup('close');
|
||||
Dashboard.hideLoadingMsg();
|
||||
}
|
||||
|
||||
function renderChannels(page, result) {
|
||||
|
|
|
|||
|
|
@ -21,11 +21,11 @@
|
|||
|
||||
function showLoadingMessage(page) {
|
||||
|
||||
$('.popupLoading', page).popup('open');
|
||||
Dashboard.showModalLoadingMsg();
|
||||
}
|
||||
|
||||
function hideLoadingMessage(page) {
|
||||
$('.popupLoading', page).popup('close');
|
||||
Dashboard.hideModalLoadingMsg();
|
||||
}
|
||||
|
||||
function normalizeDateToTimeslot(date) {
|
||||
|
|
|
|||
|
|
@ -20,11 +20,11 @@
|
|||
|
||||
function showLoadingMessage(page) {
|
||||
|
||||
$('.popupLoading', page).popup('open');
|
||||
Dashboard.showLoadingMsg();
|
||||
}
|
||||
|
||||
function hideLoadingMessage(page) {
|
||||
$('.popupLoading', page).popup('close');
|
||||
Dashboard.hideLoadingMsg();
|
||||
}
|
||||
|
||||
function reloadItems(page) {
|
||||
|
|
|
|||
|
|
@ -154,7 +154,7 @@
|
|||
html += '<h1 style="display:inline-block; vertical-align:middle;" class="listHeader">' + Globalize.translate('HeaderLatestMedia') + '</h1>';
|
||||
|
||||
if (user.Policy.EnableUserPreferenceAccess && !AppInfo.isNativeApp) {
|
||||
html += '<a href="mypreferencesdisplay.html" class="clearLink" style="margin-left:2em;"><paper-button raised class="secondary mini"><i class="fa fa-pencil"></i>' + Globalize.translate('ButtonEdit') + '</paper-button></a>';
|
||||
html += '<a href="mypreferencesdisplay.html" class="clearLink" style="margin-left:2em;"><paper-button raised class="submit mini"><i class="fa fa-pencil"></i>' + Globalize.translate('ButtonEdit') + '</paper-button></a>';
|
||||
}
|
||||
|
||||
html += '</div>';
|
||||
|
|
@ -236,7 +236,7 @@
|
|||
html += '<h1 style="display:inline-block; vertical-align:middle;" class="' + cssClass + '">' + Globalize.translate('HeaderMyMedia') + '</h1>';
|
||||
|
||||
if (user.Policy.EnableUserPreferenceAccess && !AppInfo.isNativeApp) {
|
||||
html += '<a href="mypreferencesdisplay.html" class="clearLink" style="margin-left:2em;"><paper-button raised class="secondary mini"><i class="fa fa-pencil"></i>' + Globalize.translate('ButtonEdit') + '</paper-button></a>';
|
||||
html += '<a href="mypreferencesdisplay.html" class="clearLink" style="margin-left:2em;"><paper-button raised class="submit mini"><i class="fa fa-pencil"></i>' + Globalize.translate('ButtonEdit') + '</paper-button></a>';
|
||||
}
|
||||
|
||||
html += '</div>';
|
||||
|
|
@ -387,7 +387,7 @@
|
|||
html += '<div>';
|
||||
var text = Globalize.translate('HeaderLatestFromChannel').replace('{0}', channel.Name);
|
||||
html += '<h1 style="display:inline-block; vertical-align:middle;" class="' + cssClass + '">' + text + '</h1>';
|
||||
html += '<a href="channelitems.html?context=channels&id=' + channel.Id + '" data-role="button" data-icon="arrow-r" data-mini="true" data-inline="true" data-iconpos="notext" class="sectionHeaderButton"></a>';
|
||||
html += '<a href="channelitems.html?context=channels&id=' + channel.Id + '" class="clearLink" style="margin-left:2em;"><paper-button raised class="more mini"><span>' + Globalize.translate('ButtonMore') + '</span></paper-button></a>';
|
||||
html += '</div>';
|
||||
}
|
||||
html += '<div class="itemsContainer">';
|
||||
|
|
@ -425,7 +425,7 @@
|
|||
|
||||
html += '<div>';
|
||||
html += '<h1 style="display:inline-block; vertical-align:middle;" class="' + cssClass + '">' + Globalize.translate('HeaderLatestTvRecordings') + '</h1>';
|
||||
html += '<a href="livetvrecordings.html?context=livetv" data-role="button" data-icon="arrow-r" data-mini="true" data-inline="true" data-iconpos="notext" class="sectionHeaderButton"></a>';
|
||||
html += '<a href="livetvrecordings.html?context=livetv" class="clearLink" style="margin-left:2em;"><paper-button raised class="more mini"><span>' + Globalize.translate('ButtonMore') + '</span></paper-button></a>';
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -51,6 +51,12 @@ var Dashboard = {
|
|||
$.event.special.swipe.verticalDistanceThreshold = 40;
|
||||
$.mobile.loader.prototype.options.disabled = true;
|
||||
//$.mobile.page.prototype.options.domCache = true;
|
||||
|
||||
$.mobile.loadingMessage = false;
|
||||
$.mobile.loader.prototype.options.html = "";
|
||||
$.mobile.loader.prototype.options.textVisible = false;
|
||||
$.mobile.loader.prototype.options.textOnly = true;
|
||||
$.mobile.loader.prototype.options.text = "";
|
||||
},
|
||||
|
||||
isConnectMode: function () {
|
||||
|
|
@ -218,15 +224,7 @@ var Dashboard = {
|
|||
|
||||
showError: function (message) {
|
||||
|
||||
$.mobile.loading('show', {
|
||||
text: message,
|
||||
textonly: true,
|
||||
textVisible: true
|
||||
});
|
||||
|
||||
setTimeout(function () {
|
||||
$.mobile.loading('hide');
|
||||
}, 3000);
|
||||
Dashboard.alert(message);
|
||||
},
|
||||
|
||||
updateSystemInfo: function (info) {
|
||||
|
|
@ -442,11 +440,38 @@ var Dashboard = {
|
|||
},
|
||||
|
||||
showLoadingMsg: function () {
|
||||
$.mobile.loading("show");
|
||||
|
||||
require(['paperbuttonstyle'], function () {
|
||||
var elem = document.getElementById('docspinner');
|
||||
|
||||
if (elem) {
|
||||
|
||||
// This is just an attempt to prevent the fade-in animation from running repeating and causing flickering
|
||||
if (!elem.active) {
|
||||
elem.active = true;
|
||||
}
|
||||
|
||||
} else {
|
||||
elem = document.createElement("paper-spinner");
|
||||
elem.id = 'docspinner';
|
||||
|
||||
document.body.appendChild(elem);
|
||||
|
||||
elem.active = true;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
hideLoadingMsg: function () {
|
||||
$.mobile.loading("hide");
|
||||
|
||||
var elem = document.getElementById('docspinner');
|
||||
|
||||
if (elem) {
|
||||
|
||||
setTimeout(function () {
|
||||
elem.active = false;
|
||||
}, 500);
|
||||
}
|
||||
},
|
||||
|
||||
getModalLoadingMsg: function () {
|
||||
|
|
@ -492,17 +517,29 @@ var Dashboard = {
|
|||
|
||||
if (typeof options == "string") {
|
||||
|
||||
require(['paperbuttonstyle'], function () {
|
||||
var message = options;
|
||||
|
||||
$.mobile.loading('show', {
|
||||
text: message,
|
||||
textonly: true,
|
||||
textVisible: true
|
||||
});
|
||||
Dashboard.toastId = Dashboard.toastId || 0;
|
||||
|
||||
var id = 'toast' + (Dashboard.toastId++);
|
||||
|
||||
var elem = document.createElement("paper-toast");
|
||||
elem.setAttribute('text', message);
|
||||
elem.id = id;
|
||||
|
||||
document.body.appendChild(elem);
|
||||
|
||||
// This timeout is obviously messy but it's unclear how to determine when the webcomponent is ready for use
|
||||
// element onload never fires
|
||||
setTimeout(function () {
|
||||
elem.show();
|
||||
|
||||
setTimeout(function () {
|
||||
$.mobile.loading('hide');
|
||||
}, 3000);
|
||||
elem.parentNode.removeChild(elem);
|
||||
}, 5000);
|
||||
}, 300);
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
|
|
@ -1278,7 +1315,7 @@ var Dashboard = {
|
|||
$(parent).prepend(html);
|
||||
|
||||
if (helpUrl) {
|
||||
require(['css!thirdparty/paper-button/paper-button-style']);
|
||||
require(['paperbuttonstyle']);
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -1615,7 +1652,7 @@ var AppInfo = {};
|
|||
else {
|
||||
|
||||
if (!$.browser.tv) {
|
||||
//AppInfo.enableHeadRoom = true;
|
||||
AppInfo.enableHeadRoom = true;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1715,7 +1752,7 @@ var AppInfo = {};
|
|||
|
||||
function initFastClick() {
|
||||
|
||||
requirejs(["thirdparty/fastclick"], function (FastClick) {
|
||||
require(["thirdparty/fastclick"], function (FastClick) {
|
||||
|
||||
FastClick.attach(document.body);
|
||||
|
||||
|
|
@ -1892,19 +1929,19 @@ var AppInfo = {};
|
|||
require(['filesystem']);
|
||||
|
||||
if (Dashboard.isRunningInCordova()) {
|
||||
requirejs(['thirdparty/cordova/connectsdk', 'scripts/registrationservices', 'thirdparty/cordova/volume', 'thirdparty/cordova/back']);
|
||||
require(['thirdparty/cordova/connectsdk', 'scripts/registrationservices', 'thirdparty/cordova/volume', 'thirdparty/cordova/back']);
|
||||
|
||||
if ($.browser.android) {
|
||||
requirejs(['thirdparty/cordova/android/androidcredentials', 'thirdparty/cordova/android/immersive', 'thirdparty/cordova/android/mediasession']);
|
||||
require(['thirdparty/cordova/android/androidcredentials', 'thirdparty/cordova/android/immersive', 'thirdparty/cordova/android/mediasession']);
|
||||
}
|
||||
|
||||
if ($.browser.safari) {
|
||||
requirejs(['thirdparty/cordova/remotecontrols', 'thirdparty/cordova/ios/orientation']);
|
||||
require(['thirdparty/cordova/remotecontrols', 'thirdparty/cordova/ios/orientation']);
|
||||
}
|
||||
|
||||
} else {
|
||||
if ($.browser.chrome) {
|
||||
requirejs(['scripts/chromecast']);
|
||||
require(['scripts/chromecast']);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1975,6 +2012,7 @@ var AppInfo = {};
|
|||
}
|
||||
|
||||
define("connectservice", ["thirdparty/apiclient/connectservice"]);
|
||||
define("paperbuttonstyle", ["css!thirdparty/paper-button/paper-button-style"]);
|
||||
|
||||
//requirejs(['http://viblast.com/player/free-version/qy2fdwajo1/viblast.js']);
|
||||
|
||||
|
|
@ -1991,6 +2029,7 @@ var AppInfo = {};
|
|||
$(document.body).addClass('bottomSecondaryNav');
|
||||
}
|
||||
|
||||
$(document).on('WebComponentsReady', function () {
|
||||
if (Dashboard.isConnectMode()) {
|
||||
|
||||
require(['appstorage'], function () {
|
||||
|
|
@ -2008,18 +2047,18 @@ var AppInfo = {};
|
|||
} else {
|
||||
createConnectionManager(capabilities);
|
||||
|
||||
|
||||
$(function() {
|
||||
onDocumentReady();
|
||||
Dashboard.initPromiseDone = true;
|
||||
deferred.resolve();
|
||||
$(function () {
|
||||
onDocumentReady();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function initCordovaWithDeviceId(deferred, deviceId) {
|
||||
|
||||
requirejs(['thirdparty/cordova/imagestore.js']);
|
||||
require(['thirdparty/cordova/imagestore']);
|
||||
|
||||
var capablities = Dashboard.capabilities();
|
||||
|
||||
|
|
@ -2089,10 +2128,10 @@ $(document).on('pagecreate', ".page", function () {
|
|||
|
||||
var page = this;
|
||||
|
||||
var require = this.getAttribute('data-require');
|
||||
var dependencies = this.getAttribute('data-require');
|
||||
|
||||
if (require) {
|
||||
requirejs(require.split(','), function () {
|
||||
if (dependencies) {
|
||||
require(dependencies.split(','), function () {
|
||||
|
||||
Dashboard.firePageEvent(page, 'pageinitdepends');
|
||||
});
|
||||
|
|
@ -2105,12 +2144,12 @@ $(document).on('pagecreate', ".page", function () {
|
|||
}).on('pagebeforeshow', ".page", function () {
|
||||
|
||||
var page = this;
|
||||
var require = this.getAttribute('data-require');
|
||||
var dependencies = this.getAttribute('data-require');
|
||||
|
||||
Dashboard.ensurePageTitle($(page));
|
||||
|
||||
if (require) {
|
||||
requirejs(require.split(','), function () {
|
||||
if (dependencies) {
|
||||
require(dependencies.split(','), function () {
|
||||
|
||||
Dashboard.firePageEvent(page, 'pagebeforeshowready');
|
||||
});
|
||||
|
|
@ -2121,10 +2160,10 @@ $(document).on('pagecreate', ".page", function () {
|
|||
}).on('pageshow', ".page", function () {
|
||||
|
||||
var page = this;
|
||||
var require = this.getAttribute('data-require');
|
||||
var dependencies = this.getAttribute('data-require');
|
||||
|
||||
if (require) {
|
||||
requirejs(require.split(','), function () {
|
||||
if (dependencies) {
|
||||
require(dependencies.split(','), function () {
|
||||
|
||||
Dashboard.firePageEvent(page, 'pageshowbeginready');
|
||||
});
|
||||
|
|
|
|||
|
|
@ -240,7 +240,7 @@
|
|||
html += '</div>';
|
||||
|
||||
$(document.body).append(html);
|
||||
require(['css!thirdparty/paper-button/paper-button-style']);
|
||||
require(['paperbuttonstyle']);
|
||||
|
||||
var elem = $('.syncPanel').panel({}).trigger('create').panel("open").on("panelclose", function () {
|
||||
$(this).off("panelclose").remove();
|
||||
|
|
|
|||
|
|
@ -179,7 +179,7 @@
|
|||
});
|
||||
}
|
||||
|
||||
$(document).on('pageshowready', "#tvRecommendedPage", function () {
|
||||
$(document).on('pagebeforeshowready', "#tvRecommendedPage", function () {
|
||||
|
||||
var page = this;
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
$('.globalNav', page).show();
|
||||
}
|
||||
|
||||
}).on('pageshowready', "#tvUpcomingPage", function () {
|
||||
}).on('pagebeforeshowready', "#tvUpcomingPage", function () {
|
||||
|
||||
var page = this;
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<title>Emby</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="selectServerPage" data-role="page" class="page libraryPage noSecondaryNavPage" data-theme="b" data-require="scripts/selectserver,css!thirdparty/paper-button/paper-button-style">
|
||||
<div id="selectServerPage" data-role="page" class="page libraryPage noSecondaryNavPage" data-theme="b" data-require="scripts/selectserver,paperbuttonstyle">
|
||||
|
||||
<link rel="import" href="thirdparty/paper-button/paper-button.html">
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,11 @@
|
|||
font-family: Helvetica Neue;
|
||||
}
|
||||
|
||||
.viewMenuBar, .libraryViewNav, .ui-page-theme-b {
|
||||
.viewMenuBar, .libraryViewNav {
|
||||
background-color: rgba(28,28,28,.97);
|
||||
}
|
||||
|
||||
.ui-page-theme-b {
|
||||
background-color: #1c1c1c;
|
||||
}
|
||||
|
||||
|
|
@ -31,7 +35,6 @@
|
|||
color: #2ad !important;
|
||||
}
|
||||
|
||||
|
||||
.btn, .btn-large {
|
||||
font-family: Helvetica Neue !important;
|
||||
}
|
||||
|
|
|
|||
125
dashboard-ui/thirdparty/iron-a11y-announcer/iron-a11y-announcer.html
vendored
Normal file
125
dashboard-ui/thirdparty/iron-a11y-announcer/iron-a11y-announcer.html
vendored
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 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
|
||||
-->
|
||||
|
||||
<link rel="import" href="../polymer/polymer.html">
|
||||
|
||||
<!--
|
||||
`iron-a11y-announcer` is a singleton element that is intended to add a11y
|
||||
to features that require on-demand announcement from screen readers. In
|
||||
order to make use of the announcer, it is best to request its availability
|
||||
in the announcing element.
|
||||
|
||||
Example:
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'x-chatty',
|
||||
|
||||
attached: function() {
|
||||
// This will create the singlton element if it has not
|
||||
// been created yet:
|
||||
Polymer.IronA11yAnnouncer.requestAvailability();
|
||||
}
|
||||
});
|
||||
|
||||
After the `iron-a11y-announcer` has been made available, elements can
|
||||
make announces by firing bubbling `iron-announce` events.
|
||||
|
||||
Example:
|
||||
|
||||
this.fire('iron-announce', {
|
||||
text: 'This is an announcement!'
|
||||
}, { bubbles: true });
|
||||
|
||||
Note: announcements are only audible if you have a screen reader enabled.
|
||||
|
||||
@group Iron Elements
|
||||
@demo demo/index.html
|
||||
-->
|
||||
|
||||
<dom-module id="iron-a11y-announcer">
|
||||
<style>
|
||||
:host {
|
||||
display: inline-block;
|
||||
position: fixed;
|
||||
clip: rect(0px,0px,0px,0px);
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<span aria-live$="[[mode]]">[[_text]]</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
Polymer.IronA11yAnnouncer = Polymer({
|
||||
is: 'iron-a11y-announcer',
|
||||
|
||||
properties: {
|
||||
|
||||
/**
|
||||
* The value of mode is used to set the `aria-live` attribute
|
||||
* for the element that will be announced. Valid values are: `off`,
|
||||
* `polite` and `assertive`.
|
||||
*/
|
||||
mode: {
|
||||
type: String,
|
||||
value: 'polite'
|
||||
},
|
||||
|
||||
_text: {
|
||||
type: String,
|
||||
value: ''
|
||||
}
|
||||
},
|
||||
|
||||
created: function() {
|
||||
if (!Polymer.IronA11yAnnouncer.instance) {
|
||||
Polymer.IronA11yAnnouncer.instance = this;
|
||||
}
|
||||
|
||||
document.body.addEventListener('iron-announce', this._onIronAnnounce.bind(this));
|
||||
},
|
||||
|
||||
/**
|
||||
* Cause a text string to be announced by screen readers.
|
||||
*
|
||||
* @param {string} text The text that should be announced.
|
||||
*/
|
||||
announce: function(text) {
|
||||
this._text = '';
|
||||
this.async(function() {
|
||||
this._text = text;
|
||||
}, 100);
|
||||
},
|
||||
|
||||
_onIronAnnounce: function(event) {
|
||||
if (event.detail && event.detail.text) {
|
||||
this.announce(event.detail.text);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Polymer.IronA11yAnnouncer.instance = null;
|
||||
|
||||
Polymer.IronA11yAnnouncer.requestAvailability = function() {
|
||||
if (!Polymer.IronA11yAnnouncer.instance) {
|
||||
document.createElement('iron-a11y-announcer');
|
||||
}
|
||||
|
||||
document.body.appendChild(Polymer.IronA11yAnnouncer.instance);
|
||||
};
|
||||
})();
|
||||
|
||||
</script>
|
||||
</dom-module>
|
||||
|
|
@ -8,46 +8,31 @@
|
|||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
paper-button[toggles] {
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
paper-button[toggles][active] {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
paper-button.secondary {
|
||||
paper-button.submit {
|
||||
color: #4285f4;
|
||||
}
|
||||
|
||||
paper-button[raised].secondary {
|
||||
paper-button[raised].submit {
|
||||
background: #4285f4;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
paper-button[toggles][active].secondary {
|
||||
background-color: rgba(66, 133, 244, 0.25);
|
||||
paper-button.more {
|
||||
color: #388E3C;
|
||||
}
|
||||
|
||||
paper-button[toggles][active][raised].secondary {
|
||||
background-color: rgba(66, 133, 244, 0.75);
|
||||
}
|
||||
|
||||
paper-button.submit {
|
||||
color: #52B54B;
|
||||
}
|
||||
|
||||
paper-button[raised].submit {
|
||||
background: #52B54B;
|
||||
paper-button[raised].more {
|
||||
background: #388E3C;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
paper-button[toggles][active].submit {
|
||||
background-color: rgba(82, 181, 75, 0.25);
|
||||
paper-button.secondary {
|
||||
color: #52B54B;
|
||||
}
|
||||
|
||||
paper-button[toggles][active][raised].submit {
|
||||
background-color: rgba(82, 181, 75, 0.75);
|
||||
paper-button[raised].secondary {
|
||||
background: #52B54B;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
paper-button.cancel {
|
||||
|
|
@ -59,14 +44,6 @@
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
paper-button[toggles][active].cancel {
|
||||
background-color: rgba(68, 68, 68, 0.25);
|
||||
}
|
||||
|
||||
paper-button[toggles][active][raised].cancel {
|
||||
background-color: rgba(68, 68, 68, 0.75);
|
||||
}
|
||||
|
||||
paper-button.hover:hover {
|
||||
background: #eee;
|
||||
}
|
||||
|
|
@ -101,11 +78,13 @@
|
|||
outline: none;
|
||||
color: inherit;
|
||||
width: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.clearLink {
|
||||
text-decoration: none;
|
||||
font-weight: inherit !important;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
paper-button.mini {
|
||||
|
|
@ -113,5 +92,20 @@ paper-button.mini {
|
|||
}
|
||||
|
||||
paper-button.mini .content {
|
||||
padding: 0.35em 0.9em;
|
||||
padding: 0.35em 0.7em;
|
||||
}
|
||||
|
||||
|
||||
paper-toast {
|
||||
z-index: 9999999;
|
||||
}
|
||||
|
||||
#docspinner {
|
||||
display: block;
|
||||
margin-top: -14px;
|
||||
margin-left: -14px;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 9999999;
|
||||
}
|
||||
|
|
|
|||
156
dashboard-ui/thirdparty/paper-icon-button/paper-icon-button.html
vendored
Normal file
156
dashboard-ui/thirdparty/paper-icon-button/paper-icon-button.html
vendored
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 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
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
|
||||
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
|
||||
-->
|
||||
|
||||
<link rel="import" href="../polymer/polymer.html">
|
||||
<link rel="import" href="../iron-icon/iron-icon.html">
|
||||
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
|
||||
<link rel="import" href="../paper-styles/default-theme.html">
|
||||
<link rel="import" href="../paper-behaviors/paper-button-behavior.html">
|
||||
<link rel="import" href="../paper-behaviors/paper-inky-focus-behavior.html">
|
||||
<link rel="import" href="../paper-ripple/paper-ripple.html">
|
||||
|
||||
<!--
|
||||
Material Design: <a href="http://www.google.com/design/spec/components/buttons.html">Buttons</a>
|
||||
|
||||
`paper-icon-button` is a button with an image placed at the center. When the user touches
|
||||
the button, a ripple effect emanates from the center of the button.
|
||||
|
||||
`paper-icon-button` includes a default icon set. Use `icon` to specify which icon
|
||||
from the icon set to use.
|
||||
|
||||
<paper-icon-button icon="menu"></paper-icon-button>
|
||||
|
||||
See [`iron-iconset`](#iron-iconset) for more information about
|
||||
how to use a custom icon set.
|
||||
|
||||
Example:
|
||||
|
||||
<link href="path/to/iron-icons/iron-icons.html" rel="import">
|
||||
|
||||
<paper-icon-button icon="favorite"></paper-icon-button>
|
||||
<paper-icon-button src="star.png"></paper-icon-button>
|
||||
|
||||
###Styling
|
||||
|
||||
Style the button with CSS as you would a normal DOM element. If you are using the icons
|
||||
provided by `iron-icons`, they will inherit the foreground color of the button.
|
||||
|
||||
/* make a red "favorite" button */
|
||||
<paper-icon-button icon="favorite" style="color: red;"></paper-icon-button>
|
||||
|
||||
By default, the ripple is the same color as the foreground at 25% opacity. You may
|
||||
customize the color using this selector:
|
||||
|
||||
/* make #my-button use a blue ripple instead of foreground color */
|
||||
#my-button::shadow #ripple {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
The opacity of the ripple is not customizable via CSS.
|
||||
|
||||
The following custom properties and mixins are available for styling:
|
||||
|
||||
Custom property | Description | Default
|
||||
----------------|-------------|----------
|
||||
`--paper-icon-button-disabled-text` | The color of the disabled button | `--primary-text-color`
|
||||
`--paper-icon-button-ink-color` | Selected/focus ripple color | `--default-primary-color`
|
||||
`--paper-icon-button` | Mixin for a button | `{}`
|
||||
`--paper-icon-button-disabled` | Mixin for a disabled button | `{}`
|
||||
|
||||
@group Paper Elements
|
||||
@element paper-icon-button
|
||||
@demo demo/index.html
|
||||
-->
|
||||
|
||||
<dom-module id="paper-icon-button">
|
||||
<style>
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding: 8px;
|
||||
outline: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
z-index: 0;
|
||||
|
||||
@apply(--paper-icon-button);
|
||||
}
|
||||
|
||||
:host #ink {
|
||||
color: var(--paper-icon-button-ink-color, --primary-text-color);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
:host([disabled]) {
|
||||
color: var(--paper-icon-button-disabled-text, --disabled-text-color);
|
||||
pointer-events: none;
|
||||
cursor: auto;
|
||||
@apply(--paper-icon-button-disabled);
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<paper-ripple id="ink" class="circle" center></paper-ripple>
|
||||
<iron-icon id="icon" src="[[src]]" icon="[[icon]]" alt$="[[alt]]"></iron-icon>
|
||||
</template>
|
||||
</dom-module>
|
||||
<script>
|
||||
Polymer({
|
||||
is: 'paper-icon-button',
|
||||
|
||||
hostAttributes: {
|
||||
role: 'button',
|
||||
tabindex: '0'
|
||||
},
|
||||
|
||||
behaviors: [
|
||||
Polymer.PaperInkyFocusBehavior
|
||||
],
|
||||
|
||||
properties: {
|
||||
/**
|
||||
* The URL of an image for the icon. If the src property is specified,
|
||||
* the icon property should not be.
|
||||
*/
|
||||
src: {
|
||||
type: String
|
||||
},
|
||||
|
||||
/**
|
||||
* Specifies the icon name or index in the set of icons available in
|
||||
* the icon's icon set. If the icon property is specified,
|
||||
* the src property should not be.
|
||||
*/
|
||||
icon: {
|
||||
type: String
|
||||
},
|
||||
|
||||
/**
|
||||
* Specifies the alternate text for the button, for accessibility.
|
||||
*/
|
||||
alt: {
|
||||
type: String,
|
||||
observer: "_altChanged"
|
||||
}
|
||||
},
|
||||
|
||||
_altChanged: function(newValue, oldValue) {
|
||||
var label = this.getAttribute('aria-label');
|
||||
|
||||
// Don't stomp over a user-set aria-label.
|
||||
if (!label || oldValue == label) {
|
||||
this.setAttribute('aria-label', newValue);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
325
dashboard-ui/thirdparty/paper-spinner/paper-spinner.css
vendored
Normal file
325
dashboard-ui/thirdparty/paper-spinner/paper-spinner.css
vendored
Normal file
|
|
@ -0,0 +1,325 @@
|
|||
/**
|
||||
@license
|
||||
Copyright (c) 2015 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
|
||||
|
||||
*/
|
||||
/**************************/
|
||||
/* STYLES FOR THE SPINNER */
|
||||
/**************************/
|
||||
|
||||
/*
|
||||
* Constants:
|
||||
* STROKEWIDTH = 3px
|
||||
* ARCSIZE = 270 degrees (amount of circle the arc takes up)
|
||||
* ARCTIME = 1333ms (time it takes to expand and contract arc)
|
||||
* ARCSTARTROT = 216 degrees (how much the start location of the arc
|
||||
* should rotate each time, 216 gives us a
|
||||
* 5 pointed star shape (it's 360/5 * 3).
|
||||
* For a 7 pointed star, we might do
|
||||
* 360/7 * 3 = 154.286)
|
||||
* CONTAINERWIDTH = 28px
|
||||
* SHRINK_TIME = 400ms
|
||||
*/
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 28px; /* CONTAINERWIDTH */
|
||||
height: 28px; /* CONTAINERWIDTH */
|
||||
}
|
||||
|
||||
#spinnerContainer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#spinnerContainer.active {
|
||||
/* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
|
||||
-webkit-animation: container-rotate 1568ms linear infinite;
|
||||
animation: container-rotate 1568ms linear infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes container-rotate {
|
||||
to { -webkit-transform: rotate(360deg) }
|
||||
}
|
||||
|
||||
@keyframes container-rotate {
|
||||
to { transform: rotate(360deg) }
|
||||
}
|
||||
|
||||
.spinner-layer {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.layer-1 {
|
||||
border-color: var(--paper-spinner-layer-1-color, --google-blue-500);
|
||||
}
|
||||
|
||||
.layer-2 {
|
||||
border-color: var(--paper-spinner-layer-2-color, --google-red-500);
|
||||
}
|
||||
|
||||
.layer-3 {
|
||||
border-color: var(--paper-spinner-layer-3-color, --google-yellow-500);
|
||||
}
|
||||
|
||||
.layer-4 {
|
||||
border-color: var(--paper-spinner-layer-4-color, --google-blue-500);
|
||||
}
|
||||
|
||||
/**
|
||||
* IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
|
||||
*
|
||||
* iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
|
||||
* guarantee that the animation will start _exactly_ after that value. So we avoid using
|
||||
* animation-delay and instead set custom keyframes for each color (as layer-2undant as it
|
||||
* seems).
|
||||
*
|
||||
* We write out each animation in full (instead of separating animation-name,
|
||||
* animation-duration, etc.) because under the polyfill, Safari does not recognize those
|
||||
* specific properties properly, treats them as -webkit-animation, and overrides the
|
||||
* other animation rules. See https://github.com/Polymer/platform/issues/53.
|
||||
*/
|
||||
.active .spinner-layer.layer-1 {
|
||||
/* durations: 4 * ARCTIME */
|
||||
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
}
|
||||
|
||||
.active .spinner-layer.layer-2 {
|
||||
/* durations: 4 * ARCTIME */
|
||||
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
}
|
||||
|
||||
.active .spinner-layer.layer-3 {
|
||||
/* durations: 4 * ARCTIME */
|
||||
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
}
|
||||
|
||||
.active .spinner-layer.layer-4 {
|
||||
/* durations: 4 * ARCTIME */
|
||||
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fill-unfill-rotate {
|
||||
12.5% { -webkit-transform: rotate(135deg); } /* 0.5 * ARCSIZE */
|
||||
25% { -webkit-transform: rotate(270deg); } /* 1 * ARCSIZE */
|
||||
37.5% { -webkit-transform: rotate(405deg); } /* 1.5 * ARCSIZE */
|
||||
50% { -webkit-transform: rotate(540deg); } /* 2 * ARCSIZE */
|
||||
62.5% { -webkit-transform: rotate(675deg); } /* 2.5 * ARCSIZE */
|
||||
75% { -webkit-transform: rotate(810deg); } /* 3 * ARCSIZE */
|
||||
87.5% { -webkit-transform: rotate(945deg); } /* 3.5 * ARCSIZE */
|
||||
to { -webkit-transform: rotate(1080deg); } /* 4 * ARCSIZE */
|
||||
}
|
||||
|
||||
@keyframes fill-unfill-rotate {
|
||||
12.5% { transform: rotate(135deg); } /* 0.5 * ARCSIZE */
|
||||
25% { transform: rotate(270deg); } /* 1 * ARCSIZE */
|
||||
37.5% { transform: rotate(405deg); } /* 1.5 * ARCSIZE */
|
||||
50% { transform: rotate(540deg); } /* 2 * ARCSIZE */
|
||||
62.5% { transform: rotate(675deg); } /* 2.5 * ARCSIZE */
|
||||
75% { transform: rotate(810deg); } /* 3 * ARCSIZE */
|
||||
87.5% { transform: rotate(945deg); } /* 3.5 * ARCSIZE */
|
||||
to { transform: rotate(1080deg); } /* 4 * ARCSIZE */
|
||||
}
|
||||
|
||||
/**
|
||||
* HACK: Even though the intention is to have the current .spinner-layer at
|
||||
* `opacity: 1`, we set it to `opacity: 0.99` instead since this forces Chrome
|
||||
* to do proper subpixel rendering for the elements being animated. This is
|
||||
* especially visible in Chrome 39 on Ubuntu 14.04. See:
|
||||
*
|
||||
* - https://github.com/Polymer/paper-spinner/issues/9
|
||||
* - https://code.google.com/p/chromium/issues/detail?id=436255
|
||||
*/
|
||||
@-webkit-keyframes layer-1-fade-in-out {
|
||||
from { opacity: 0.99; }
|
||||
25% { opacity: 0.99; }
|
||||
26% { opacity: 0; }
|
||||
89% { opacity: 0; }
|
||||
90% { opacity: 0.99; }
|
||||
100% { opacity: 0.99; }
|
||||
}
|
||||
|
||||
@keyframes layer-1-fade-in-out {
|
||||
from { opacity: 0.99; }
|
||||
25% { opacity: 0.99; }
|
||||
26% { opacity: 0; }
|
||||
89% { opacity: 0; }
|
||||
90% { opacity: 0.99; }
|
||||
100% { opacity: 0.99; }
|
||||
}
|
||||
|
||||
@-webkit-keyframes layer-2-fade-in-out {
|
||||
from { opacity: 0; }
|
||||
15% { opacity: 0; }
|
||||
25% { opacity: 0.99; }
|
||||
50% { opacity: 0.99; }
|
||||
51% { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes layer-2-fade-in-out {
|
||||
from { opacity: 0; }
|
||||
15% { opacity: 0; }
|
||||
25% { opacity: 0.99; }
|
||||
50% { opacity: 0.99; }
|
||||
51% { opacity: 0; }
|
||||
}
|
||||
|
||||
@-webkit-keyframes layer-3-fade-in-out {
|
||||
from { opacity: 0; }
|
||||
40% { opacity: 0; }
|
||||
50% { opacity: 0.99; }
|
||||
75% { opacity: 0.99; }
|
||||
76% { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes layer-3-fade-in-out {
|
||||
from { opacity: 0; }
|
||||
40% { opacity: 0; }
|
||||
50% { opacity: 0.99; }
|
||||
75% { opacity: 0.99; }
|
||||
76% { opacity: 0; }
|
||||
}
|
||||
|
||||
@-webkit-keyframes layer-4-fade-in-out {
|
||||
from { opacity: 0; }
|
||||
65% { opacity: 0; }
|
||||
75% { opacity: 0.99; }
|
||||
90% { opacity: 0.99; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes layer-4-fade-in-out {
|
||||
from { opacity: 0; }
|
||||
65% { opacity: 0; }
|
||||
75% { opacity: 0.99; }
|
||||
90% { opacity: 0.99; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
|
||||
/**
|
||||
* Patch the gap that appear between the two adjacent div.circle-clipper while the
|
||||
* spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
|
||||
*
|
||||
* Update: the gap no longer appears on Chrome when .spinner-layer's opacity is 0.99,
|
||||
* but still does on Safari and IE.
|
||||
*/
|
||||
.gap-patch {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
top: 0;
|
||||
left: 45%;
|
||||
width: 10%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border-color: inherit;
|
||||
}
|
||||
|
||||
.gap-patch .circle {
|
||||
width: 1000%;
|
||||
left: -450%;
|
||||
}
|
||||
|
||||
.circle-clipper {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border-color: inherit;
|
||||
}
|
||||
|
||||
.circle-clipper .circle {
|
||||
width: 200%;
|
||||
}
|
||||
|
||||
.circle {
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
border-width: 3px; /* STROKEWIDTH */
|
||||
border-style: solid;
|
||||
border-color: inherit;
|
||||
border-bottom-color: transparent !important;
|
||||
border-radius: 50%;
|
||||
-webkit-animation: none;
|
||||
animation: none;
|
||||
|
||||
@apply(--layout-fit);
|
||||
}
|
||||
|
||||
.circle-clipper.left .circle {
|
||||
border-right-color: transparent !important;
|
||||
-webkit-transform: rotate(129deg);
|
||||
transform: rotate(129deg);
|
||||
}
|
||||
|
||||
.circle-clipper.right .circle {
|
||||
left: -100%;
|
||||
border-left-color: transparent !important;
|
||||
-webkit-transform: rotate(-129deg);
|
||||
transform: rotate(-129deg);
|
||||
}
|
||||
|
||||
.active .circle-clipper.left .circle {
|
||||
/* duration: ARCTIME */
|
||||
-webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
}
|
||||
|
||||
.active .circle-clipper.right .circle {
|
||||
/* duration: ARCTIME */
|
||||
-webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
}
|
||||
|
||||
@-webkit-keyframes left-spin {
|
||||
from { -webkit-transform: rotate(130deg); }
|
||||
50% { -webkit-transform: rotate(-5deg); }
|
||||
to { -webkit-transform: rotate(130deg); }
|
||||
}
|
||||
|
||||
@keyframes left-spin {
|
||||
from { transform: rotate(130deg); }
|
||||
50% { transform: rotate(-5deg); }
|
||||
to { transform: rotate(130deg); }
|
||||
}
|
||||
|
||||
@-webkit-keyframes right-spin {
|
||||
from { -webkit-transform: rotate(-130deg); }
|
||||
50% { -webkit-transform: rotate(5deg); }
|
||||
to { -webkit-transform: rotate(-130deg); }
|
||||
}
|
||||
|
||||
@keyframes right-spin {
|
||||
from { transform: rotate(-130deg); }
|
||||
50% { transform: rotate(5deg); }
|
||||
to { transform: rotate(-130deg); }
|
||||
}
|
||||
|
||||
#spinnerContainer.cooldown {
|
||||
/* duration: SHRINK_TIME */
|
||||
-webkit-animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
}
|
||||
|
||||
@-webkit-keyframes fade-out {
|
||||
from { opacity: 0.99; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes fade-out {
|
||||
from { opacity: 0.99; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
222
dashboard-ui/thirdparty/paper-spinner/paper-spinner.html
vendored
Normal file
222
dashboard-ui/thirdparty/paper-spinner/paper-spinner.html
vendored
Normal file
|
|
@ -0,0 +1,222 @@
|
|||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 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
|
||||
-->
|
||||
|
||||
<link rel="import" href="../polymer/polymer.html">
|
||||
<link rel="import" href="../paper-styles/color.html">
|
||||
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
|
||||
|
||||
<!--
|
||||
Element providing material design circular spinner.
|
||||
|
||||
<paper-spinner active></paper-spinner>
|
||||
|
||||
The default spinner cycles between four layers of colors; by default they are
|
||||
blue, red, yellow and green. It can be customized so that it uses one color only
|
||||
by setting all the layer colors to the same value.
|
||||
|
||||
### Accessibility
|
||||
|
||||
Alt attribute should be set to provide adequate context for accessibility. If not provided,
|
||||
it defaults to 'loading'.
|
||||
Empty alt can be provided to mark the element as decorative if alternative content is provided
|
||||
in another form (e.g. a text block following the spinner).
|
||||
|
||||
<paper-spinner alt="Loading contacts list" active></paper-spinner>
|
||||
|
||||
### Styling
|
||||
|
||||
The following custom properties and mixins are available for styling:
|
||||
|
||||
Custom property | Description | Default
|
||||
----------------|-------------|----------
|
||||
`--paper-spinner-layer-1-color` | Color of the first spinner rotation | `--google-blue-500`
|
||||
`--paper-spinner-layer-2-color` | Color of the second spinner rotation | `--google-red-500`
|
||||
`--paper-spinner-layer-3-color` | Color of the third spinner rotation | `--google-yellow-500`
|
||||
`--paper-spinner-layer-4-color` | Color of the fourth spinner rotation | `--google-green-500`
|
||||
|
||||
@group Paper Elements
|
||||
@element paper-spinner
|
||||
@hero hero.svg
|
||||
@demo demo/index.html
|
||||
-->
|
||||
|
||||
<dom-module id="paper-spinner">
|
||||
|
||||
<link rel="import" type="css" href="paper-spinner.css">
|
||||
|
||||
<template>
|
||||
|
||||
<div id="spinnerContainer" class-name="[[_spinnerContainerClassName]]">
|
||||
<div class="spinner-layer layer-1">
|
||||
<div class="circle-clipper left">
|
||||
<div class="circle"></div>
|
||||
</div><div class="gap-patch">
|
||||
<div class="circle"></div>
|
||||
</div><div class="circle-clipper right">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="spinner-layer layer-2">
|
||||
<div class="circle-clipper left">
|
||||
<div class="circle"></div>
|
||||
</div><div class="gap-patch">
|
||||
<div class="circle"></div>
|
||||
</div><div class="circle-clipper right">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="spinner-layer layer-3">
|
||||
<div class="circle-clipper left">
|
||||
<div class="circle"></div>
|
||||
</div><div class="gap-patch">
|
||||
<div class="circle"></div>
|
||||
</div><div class="circle-clipper right">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="spinner-layer layer-4">
|
||||
<div class="circle-clipper left">
|
||||
<div class="circle"></div>
|
||||
</div><div class="gap-patch">
|
||||
<div class="circle"></div>
|
||||
</div><div class="circle-clipper right">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
(function() {
|
||||
|
||||
'use strict';
|
||||
|
||||
function classNames(obj) {
|
||||
var classNames = [];
|
||||
for (var key in obj) {
|
||||
if (obj.hasOwnProperty(key) && obj[key]) {
|
||||
classNames.push(key);
|
||||
}
|
||||
}
|
||||
|
||||
return classNames.join(' ');
|
||||
}
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'paper-spinner',
|
||||
|
||||
listeners: {
|
||||
'animationend': 'reset',
|
||||
'webkitAnimationEnd': 'reset'
|
||||
},
|
||||
|
||||
properties: {
|
||||
|
||||
/**
|
||||
* Displays the spinner.
|
||||
*
|
||||
* @attribute active
|
||||
* @type boolean
|
||||
* @default false
|
||||
*/
|
||||
active: {
|
||||
observer: '_activeChanged',
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
|
||||
/**
|
||||
* Alternative text content for accessibility support.
|
||||
* If alt is present, it will add an aria-label whose content matches alt when active.
|
||||
* If alt is not present, it will default to 'loading' as the alt value.
|
||||
*
|
||||
* @attribute alt
|
||||
* @type string
|
||||
* @default 'loading'
|
||||
*/
|
||||
alt: {
|
||||
observer: '_altChanged',
|
||||
type: String,
|
||||
value: 'loading'
|
||||
},
|
||||
|
||||
/**
|
||||
* True when the spinner is going from active to inactive. This is represented by a fade
|
||||
* to 0% opacity to the user.
|
||||
*/
|
||||
_coolingDown: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
|
||||
_spinnerContainerClassName: {
|
||||
type: String,
|
||||
computed: '_computeSpinnerContainerClassName(active, _coolingDown)'
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
_computeSpinnerContainerClassName: function(active, _coolingDown) {
|
||||
return classNames({
|
||||
active: active || _coolingDown,
|
||||
cooldown: _coolingDown
|
||||
});
|
||||
},
|
||||
|
||||
ready: function() {
|
||||
// Allow user-provided `aria-label` take preference to any other text alternative.
|
||||
if (this.hasAttribute('aria-label')) {
|
||||
this.alt = this.getAttribute('aria-label');
|
||||
} else {
|
||||
this.setAttribute('aria-label', this.alt);
|
||||
}
|
||||
|
||||
if (!this.active) {
|
||||
this.setAttribute('aria-hidden', 'true');
|
||||
}
|
||||
},
|
||||
|
||||
_activeChanged: function() {
|
||||
if (this.active) {
|
||||
this.removeAttribute('aria-hidden');
|
||||
} else {
|
||||
this._coolingDown = true;
|
||||
this.setAttribute('aria-hidden', 'true');
|
||||
}
|
||||
},
|
||||
|
||||
_altChanged: function() {
|
||||
if (this.alt === '') {
|
||||
this.setAttribute('aria-hidden', 'true');
|
||||
} else {
|
||||
this.removeAttribute('aria-hidden');
|
||||
}
|
||||
|
||||
this.setAttribute('aria-label', this.alt);
|
||||
},
|
||||
|
||||
reset: function() {
|
||||
this.active = false;
|
||||
this._coolingDown = false;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
}());
|
||||
|
||||
</script>
|
||||
|
||||
</dom-module>
|
||||
164
dashboard-ui/thirdparty/paper-toast/paper-toast.html
vendored
Normal file
164
dashboard-ui/thirdparty/paper-toast/paper-toast.html
vendored
Normal file
|
|
@ -0,0 +1,164 @@
|
|||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 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
|
||||
-->
|
||||
|
||||
<link rel="import" href="../polymer/polymer.html">
|
||||
<link rel="import" href="../paper-styles/typography.html">
|
||||
<link rel="import" href="../iron-a11y-announcer/iron-a11y-announcer.html">
|
||||
|
||||
<!--
|
||||
`paper-toast` provides a subtle notification toast.
|
||||
|
||||
@group Paper Elements
|
||||
@element paper-toast
|
||||
@demo demo/index.html
|
||||
@hero hero.svg
|
||||
-->
|
||||
<dom-module id="paper-toast">
|
||||
<style>
|
||||
:host {
|
||||
display: inline-block;
|
||||
position: fixed;
|
||||
|
||||
background: #323232;
|
||||
color: #f1f1f1;
|
||||
min-height: 48px;
|
||||
min-width: 288px;
|
||||
padding: 16px 24px 12px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
|
||||
border-radius: 2px;
|
||||
bottom: 12px;
|
||||
left: 12px;
|
||||
font-size: 14px;
|
||||
cursor: default;
|
||||
|
||||
-webkit-transition: visibility 0.3s, -webkit-transform 0.3s;
|
||||
transition: visibility 0.3s, transform 0.3s;
|
||||
|
||||
-webkit-transform: translateY(100px);
|
||||
transform: translateY(100px);
|
||||
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
:host(.capsule) {
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
:host(.fit-bottom) {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
:host(.paper-toast-open){
|
||||
visibility: visible;
|
||||
|
||||
-webkit-transform: translateY(0px);
|
||||
transform: translateY(0px);
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<span id="label">{{text}}</span>
|
||||
<content></content>
|
||||
</template>
|
||||
</dom-module>
|
||||
<script>
|
||||
(function() {
|
||||
|
||||
var PaperToast = Polymer({
|
||||
is: 'paper-toast',
|
||||
|
||||
properties: {
|
||||
/**
|
||||
* The duration in milliseconds to show the toast.
|
||||
*/
|
||||
duration: {
|
||||
type: Number,
|
||||
value: 3000
|
||||
},
|
||||
|
||||
/**
|
||||
* The text to display in the toast.
|
||||
*/
|
||||
text: {
|
||||
type: String,
|
||||
value: ""
|
||||
},
|
||||
|
||||
/**
|
||||
* True if the toast is currently visible.
|
||||
*/
|
||||
visible: {
|
||||
type: Boolean,
|
||||
readOnly: true,
|
||||
value: false,
|
||||
observer: '_visibleChanged'
|
||||
}
|
||||
},
|
||||
|
||||
created: function() {
|
||||
Polymer.IronA11yAnnouncer.requestAvailability();
|
||||
},
|
||||
|
||||
ready: function() {
|
||||
this.async(function() {
|
||||
this.hide();
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Show the toast.
|
||||
* @method show
|
||||
*/
|
||||
show: function() {
|
||||
if (PaperToast.currentToast) {
|
||||
PaperToast.currentToast.hide();
|
||||
}
|
||||
PaperToast.currentToast = this;
|
||||
this.removeAttribute('aria-hidden');
|
||||
this._setVisible(true);
|
||||
this.fire('iron-announce', {
|
||||
text: this.text
|
||||
});
|
||||
this.debounce('hide', this.hide, this.duration);
|
||||
},
|
||||
|
||||
/**
|
||||
* Hide the toast
|
||||
*/
|
||||
hide: function() {
|
||||
this.setAttribute('aria-hidden', 'true');
|
||||
this._setVisible(false);
|
||||
},
|
||||
|
||||
/**
|
||||
* Toggle the opened state of the toast.
|
||||
* @method toggle
|
||||
*/
|
||||
toggle: function() {
|
||||
if (!this.visible) {
|
||||
this.show();
|
||||
} else {
|
||||
this.hide();
|
||||
}
|
||||
},
|
||||
|
||||
_visibleChanged: function(visible) {
|
||||
this.toggleClass('paper-toast-open', visible);
|
||||
}
|
||||
});
|
||||
|
||||
PaperToast.currentToast = null;
|
||||
|
||||
})();
|
||||
</script>
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
<title>Emby</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="tvNextUpPage" data-role="page" class="page libraryPage backdropPage" data-backdroptype="series" data-require="scripts/tvlatest,css!thirdparty/paper-button/paper-button-style">
|
||||
<div id="tvNextUpPage" data-role="page" class="page libraryPage backdropPage" data-backdroptype="series" data-require="scripts/tvlatest,paperbuttonstyle">
|
||||
<link rel="import" href="thirdparty/paper-button/paper-button.html">
|
||||
|
||||
<div class="libraryViewNav scopedLibraryViewNav">
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
<div class="homePageSection">
|
||||
<div>
|
||||
<h1 class="listHeader" style="display:inline-block;vertical-align:middle;">${HeaderLatestEpisodes}</h1>
|
||||
<paper-button raised class="secondary mini categorySyncButton" data-category="Latest"><i class="fa fa-refresh"></i>${ButtonSync}</paper-button>
|
||||
<paper-button raised class="submit mini categorySyncButton" data-category="Latest"><i class="fa fa-refresh"></i>${ButtonSync}</paper-button>
|
||||
</div>
|
||||
<div id="latestEpisodes" class="itemsContainer">
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<title>Emby</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="tvRecommendedPage" data-role="page" class="page libraryPage backdropPage" data-backdroptype="series" data-require="scripts/tvrecommended,css!thirdparty/paper-button/paper-button-style">
|
||||
<div id="tvRecommendedPage" data-role="page" class="page libraryPage backdropPage" data-backdroptype="series" data-require="scripts/tvrecommended,paperbuttonstyle">
|
||||
|
||||
<link rel="import" href="thirdparty/paper-button/paper-button.html">
|
||||
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
<div id="resumableSection" style="display: none;" class="scopedContent homePageSection">
|
||||
<div>
|
||||
<h1 class="listHeader" style="display:inline-block;vertical-align:middle;">${HeaderResume}</h1>
|
||||
<paper-button raised class="secondary mini categorySyncButton" data-category="Resume"><i class="fa fa-refresh"></i>${ButtonSync}</paper-button>
|
||||
<paper-button raised class="submit mini categorySyncButton" data-category="Resume"><i class="fa fa-refresh"></i>${ButtonSync}</paper-button>
|
||||
</div>
|
||||
|
||||
<div id="resumableItems" class="itemsContainer">
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
<div class="homePageSection">
|
||||
<div>
|
||||
<h1 class="listHeader nextUpHeader" style="display:inline-block;vertical-align:middle;">${HeaderNextUp}</h1>
|
||||
<paper-button raised class="secondary mini categorySyncButton" data-category="NextUp"><i class="fa fa-refresh"></i>${ButtonSync}</paper-button>
|
||||
<paper-button raised class="submit mini categorySyncButton" data-category="NextUp"><i class="fa fa-refresh"></i>${ButtonSync}</paper-button>
|
||||
</div>
|
||||
<div id="nextUpItems" class="itemsContainer">
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<title>Emby</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="wizardLibraryPage" data-role="page" class="page standalonePage wizardPage mediaLibraryPage" data-require="scripts/medialibrarypage,scripts/taskbutton,css!thirdparty/paper-button/paper-button-style">
|
||||
<div id="wizardLibraryPage" data-role="page" class="page standalonePage wizardPage mediaLibraryPage" data-require="scripts/medialibrarypage,scripts/taskbutton,paperbuttonstyle">
|
||||
|
||||
<div data-role="content">
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<title>Emby</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="wizardStartPage" data-role="page" class="page standalonePage wizardPage" data-require="scripts/wizardstartpage,css!thirdparty/paper-button/paper-button-style">
|
||||
<div id="wizardStartPage" data-role="page" class="page standalonePage wizardPage" data-require="scripts/wizardstartpage,paperbuttonstyle">
|
||||
|
||||
<link rel="import" href="thirdparty/paper-button/paper-button.html">
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue