mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
rework tabs
This commit is contained in:
Luke Pulverenti
parent
14a8cf548f
commit
25f06c166b
25 changed files with 424 additions and 634 deletions
|
|
@ -1,4 +1,4 @@
|
|||
<div id="nowPlayingPage" data-role="page" class="page libraryPage nowPlayingPage noSecondaryNavPage selfBackdropPage" data-contextname="${TitleRemoteControl}" data-theme="b" data-require="scripts/nowplayingpage,paper-tabs,paper-icon-button-light,paper-slider,paper-button">
|
||||
<div id="nowPlayingPage" data-role="page" class="page libraryPage nowPlayingPage noSecondaryNavPage selfBackdropPage" data-contextname="${TitleRemoteControl}" data-theme="b" data-require="scripts/nowplayingpage,MaterialTabs,paper-icon-button-light,paper-slider,paper-button">
|
||||
|
||||
<div class="remoteControlContent">
|
||||
|
||||
|
|
@ -9,127 +9,124 @@
|
|||
<button is="paper-icon-button-light" class="nowPlayingCastIcon" style="vertical-align: middle; z-index: 1;" tabindex="-1"><iron-icon icon="cast"></iron-icon></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="libraryViewNav hide" style="position: static;">
|
||||
<div>
|
||||
<a href="#" data-index="0">${TabNowPlaying}</a>
|
||||
<a href="#" data-index="1">${TabControls}</a>
|
||||
<a href="#" data-index="2">${TabPlaylist}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nowPlayingPageTab hide" data-tab="0">
|
||||
<div style="text-align:center;">
|
||||
<div class="nowPlayingPageTitle" style="line-height: normal;">
|
||||
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
|
||||
<div class="libraryViewNav">
|
||||
<div class="mdl-tabs__tab-bar">
|
||||
<a href="#nowPlayingTab" class="mdl-tabs__tab is-active" data-index="0">${TabNowPlaying}</a>
|
||||
<a href="#controlsTab" class="mdl-tabs__tab" data-index="1">${TabControls}</a>
|
||||
<a href="#playlistTab" class="mdl-tabs__tab" data-index="1">${TabPlaylist}</a>
|
||||
</div>
|
||||
<div class="nowPlayingInfoMetadata">
|
||||
<div class="nowPlayingPageImage" style="margin: 1em auto;"></div>
|
||||
<div class="nowPlayingPageTimeContainer">
|
||||
</div>
|
||||
<div class="mdl-tabs__panel is-active pageTabContent ehsContent" id="nowPlayingTab" data-index="0">
|
||||
<div style="text-align:center;">
|
||||
<div class="nowPlayingPageTitle" style="line-height: normal;">
|
||||
</div>
|
||||
<div class="nowPlayingInfoMetadata">
|
||||
<div class="nowPlayingPageImage" style="margin: 1em auto;"></div>
|
||||
<div class="nowPlayingPageTimeContainer">
|
||||
<div>
|
||||
<paper-slider pin step="1" min="0" max="100" value="0" class="nowPlayingPositionSlider" style="width: 100%;"></paper-slider>
|
||||
</div>
|
||||
<div style="text-align:left;">
|
||||
<div class="positionTime" style="float:left;"></div>
|
||||
<div class="runtime" style="float: right;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nowPlayingInfoButtons">
|
||||
|
||||
<div>
|
||||
<paper-slider pin step="1" min="0" max="100" value="0" class="nowPlayingPositionSlider" style="width: 100%;"></paper-slider>
|
||||
|
||||
<paper-fab icon="skip-previous" class="btnPreviousTrack btnPlayStateCommand subdued" title="${ButtonPreviousTrack}"></paper-fab>
|
||||
<paper-fab icon="pause" class="btnPause btnPlayStateCommand subdued" title="${ButtonPause}"></paper-fab>
|
||||
<paper-fab icon="play-arrow" class="btnPlay btnPlayStateCommand subdued" title="${ButtonPlay}"></paper-fab>
|
||||
<paper-fab icon="stop" class="btnPlayStateCommand btnStop subdued" title="${ButtonStop}"></paper-fab>
|
||||
<paper-fab icon="skip-next" class="btnPlayStateCommand btnNextTrack subdued" title="${ButtonNextTrack}"></paper-fab>
|
||||
</div>
|
||||
<div style="text-align:left;">
|
||||
<div class="positionTime" style="float:left;"></div>
|
||||
<div class="runtime" style="float: right;"></div>
|
||||
<div class="buttonsRow2">
|
||||
|
||||
<paper-fab icon="audiotrack" class="btnAudioTracks videoButton btnPlayStateCommand subdued" title="${ButtonAudioTracks}" data-command="GoToSearch"></paper-fab>
|
||||
<paper-fab icon="closed-caption" class="btnSubtitles videoButton btnPlayStateCommand subdued" title="${ButtonSubtitles}" data-command="GoToSearch"></paper-fab>
|
||||
<paper-fab icon="movie" class="btnChapters videoButton btnPlayStateCommand subdued" title="${ButtonScenes}" data-command="GoToSearch"></paper-fab>
|
||||
<paper-fab icon="fullscreen" class="btnToggleFullscreen videoButton btnPlayStateCommand subdued" title="${ButtonFullscreen}" data-command="ToggleFullscreen"></paper-fab>
|
||||
</div>
|
||||
<div>
|
||||
<paper-fab icon="repeat" class="btnCommand subdued repeatToggleButton" title="${ButtonRepeat}" data-command="SetRepeatMode"></paper-fab>
|
||||
<paper-fab icon="volume-off" class="btnCommand subdued volumeButton" title="${ButtonMute}" data-command="ToggleMute"></paper-fab>
|
||||
<paper-fab icon="volume-down" class="btnCommand subdued volumeButton" title="${ButtonVolumeDown}" data-command="VolumeDown"></paper-fab>
|
||||
<paper-fab icon="volume-up" class="btnCommand subdued volumeButton" title="${ButtonVolumeUp}" data-command="VolumeUp"></paper-fab>
|
||||
</div>
|
||||
<div class="nowPlayingPageUserDataButtons" style="margin-top:1em;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nowPlayingInfoButtons">
|
||||
|
||||
</div>
|
||||
<div class="mdl-tabs__panel pageTabContent ehsContent" id="controlsTab" data-index="1">
|
||||
<div style="text-align:center;">
|
||||
<div>
|
||||
|
||||
<paper-fab icon="skip-previous" class="btnPreviousTrack btnPlayStateCommand subdued" title="${ButtonPreviousTrack}"></paper-fab>
|
||||
<paper-fab icon="pause" class="btnPause btnPlayStateCommand subdued" title="${ButtonPause}"></paper-fab>
|
||||
<paper-fab icon="play-arrow" class="btnPlay btnPlayStateCommand subdued" title="${ButtonPlay}"></paper-fab>
|
||||
<paper-fab icon="stop" class="btnPlayStateCommand btnStop subdued" title="${ButtonStop}"></paper-fab>
|
||||
<paper-fab icon="skip-next" class="btnPlayStateCommand btnNextTrack subdued" title="${ButtonNextTrack}"></paper-fab>
|
||||
</div>
|
||||
<div class="buttonsRow2">
|
||||
|
||||
<paper-fab icon="audiotrack" class="btnAudioTracks videoButton btnPlayStateCommand subdued" title="${ButtonAudioTracks}" data-command="GoToSearch"></paper-fab>
|
||||
<paper-fab icon="closed-caption" class="btnSubtitles videoButton btnPlayStateCommand subdued" title="${ButtonSubtitles}" data-command="GoToSearch"></paper-fab>
|
||||
<paper-fab icon="movie" class="btnChapters videoButton btnPlayStateCommand subdued" title="${ButtonScenes}" data-command="GoToSearch"></paper-fab>
|
||||
<paper-fab icon="fullscreen" class="btnToggleFullscreen videoButton btnPlayStateCommand subdued" title="${ButtonFullscreen}" data-command="ToggleFullscreen"></paper-fab>
|
||||
<paper-fab icon="keyboard-arrow-up" class="btnArrowUp btnCommand subdued" title="${ButtonArrowUp}" data-command="MoveUp"></paper-fab>
|
||||
</div>
|
||||
<div>
|
||||
<paper-fab icon="repeat" class="btnCommand subdued repeatToggleButton" title="${ButtonRepeat}" data-command="SetRepeatMode"></paper-fab>
|
||||
<paper-fab icon="volume-off" class="btnCommand subdued volumeButton" title="${ButtonMute}" data-command="ToggleMute"></paper-fab>
|
||||
<paper-fab icon="volume-down" class="btnCommand subdued volumeButton" title="${ButtonVolumeDown}" data-command="VolumeDown"></paper-fab>
|
||||
<paper-fab icon="volume-up" class="btnCommand subdued volumeButton" title="${ButtonVolumeUp}" data-command="VolumeUp"></paper-fab>
|
||||
<paper-fab icon="keyboard-arrow-left" class="btnArrowLeft btnCommand subdued" title="${ButtonArrowLeft}" data-command="MoveLeft"></paper-fab>
|
||||
<paper-fab icon="check" class="btnOk btnCommand subdued" title="${ButtonOk}" data-command="Select"></paper-fab>
|
||||
<paper-fab icon="keyboard-arrow-right" class="btnArrowRight btnCommand subdued" title="${ButtonArrowRight}" data-command="MoveRight"></paper-fab>
|
||||
</div>
|
||||
<div class="nowPlayingPageUserDataButtons" style="margin-top:1em;">
|
||||
<div>
|
||||
<paper-fab icon="keyboard-arrow-down" class="btnArrowDown btnCommand subdued" title="${ButtonArrowDown}" data-command="MoveDown"></paper-fab>
|
||||
</div>
|
||||
<div>
|
||||
<paper-fab icon="arrow-back" class="btnBack btnCommand subdued" title="${ButtonBack}" data-command="Back"></paper-fab>
|
||||
<paper-fab icon="info" class="btnInfo btnCommand subdued" title="${ButtonInfo}" data-command="ToggleContextMenu"></paper-fab>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<paper-fab icon="home" class="btnGoHome btnCommand subdued" title="${ButtonHome}" data-command="GoHome"></paper-fab>
|
||||
<paper-fab icon="search" class="btnShowSearch btnCommand subdued" title="${ButtonSearch}" data-command="GoToSearch"></paper-fab>
|
||||
</div>
|
||||
<div>
|
||||
<paper-fab icon="settings" class="bthShowSettings btnCommand subdued" title="${ButtonSettings}" data-command="GoToSettings"></paper-fab>
|
||||
<paper-fab icon="videocam" class="btnScreenshot btnCommand subdued" title="${ButtonTakeScreenshot}" data-command="TakeScreenshot"></paper-fab>
|
||||
</div>
|
||||
</div>
|
||||
<div class="readOnlyContent" style="margin: 2em auto 0; padding: 0 1em 100px;">
|
||||
<div class="sendMessageSection">
|
||||
<br /><h1>${HeaderSendMessage}</h1>
|
||||
<div style="text-align: left;">
|
||||
<form class="sendMessageForm">
|
||||
<div>
|
||||
<paper-input class="sendMessageElement" type="text" id="txtMessageTitle" label="${LabelMessageTitle}" required></paper-input>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<paper-input class="sendMessageElement" type="text" id="txtMessageText" label="${LabelMessageText}" required></paper-input>
|
||||
</div>
|
||||
<p>
|
||||
<button class="sendMessageElement clearButton" type="submit" data-role="none" style="display:block;"><paper-button class="sendMessageElement accent" type="submit" raised style="display:block;">${ButtonSend}</paper-button></button>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sendTextSection">
|
||||
<br /><h1>${HeaderTypeText}</h1>
|
||||
<div style="text-align: left;">
|
||||
<form class="typeTextForm">
|
||||
<div>
|
||||
<paper-input class="typeTextElement" type="text" id="txtTypeText" label="${LabelTypeText}" required></paper-input>
|
||||
</div>
|
||||
<p>
|
||||
<button class="typeTextElement clearButton" type="submit" data-role="none" style="display:block;"><paper-button class="typeTextElement accent" type="submit" raised style="display:block;">${ButtonSend}</paper-button></button>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mdl-tabs__panel pageTabContent ehsContent" id="playlistTab" data-index="1">
|
||||
<div class="playlist itemsContainer" style="max-width: 800px; margin: 3em auto 0; padding-bottom: 200px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nowPlayingPageTab hide" data-tab="1">
|
||||
<div style="text-align:center;">
|
||||
<div>
|
||||
<paper-fab icon="keyboard-arrow-up" class="btnArrowUp btnCommand subdued" title="${ButtonArrowUp}" data-command="MoveUp"></paper-fab>
|
||||
</div>
|
||||
<div>
|
||||
<paper-fab icon="keyboard-arrow-left" class="btnArrowLeft btnCommand subdued" title="${ButtonArrowLeft}" data-command="MoveLeft"></paper-fab>
|
||||
<paper-fab icon="check" class="btnOk btnCommand subdued" title="${ButtonOk}" data-command="Select"></paper-fab>
|
||||
<paper-fab icon="keyboard-arrow-right" class="btnArrowRight btnCommand subdued" title="${ButtonArrowRight}" data-command="MoveRight"></paper-fab>
|
||||
</div>
|
||||
<div>
|
||||
<paper-fab icon="keyboard-arrow-down" class="btnArrowDown btnCommand subdued" title="${ButtonArrowDown}" data-command="MoveDown"></paper-fab>
|
||||
</div>
|
||||
<div>
|
||||
<paper-fab icon="arrow-back" class="btnBack btnCommand subdued" title="${ButtonBack}" data-command="Back"></paper-fab>
|
||||
<paper-fab icon="info" class="btnInfo btnCommand subdued" title="${ButtonInfo}" data-command="ToggleContextMenu"></paper-fab>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<paper-fab icon="home" class="btnGoHome btnCommand subdued" title="${ButtonHome}" data-command="GoHome"></paper-fab>
|
||||
<paper-fab icon="search" class="btnShowSearch btnCommand subdued" title="${ButtonSearch}" data-command="GoToSearch"></paper-fab>
|
||||
</div>
|
||||
<div>
|
||||
<paper-fab icon="settings" class="bthShowSettings btnCommand subdued" title="${ButtonSettings}" data-command="GoToSettings"></paper-fab>
|
||||
<paper-fab icon="videocam" class="btnScreenshot btnCommand subdued" title="${ButtonTakeScreenshot}" data-command="TakeScreenshot"></paper-fab>
|
||||
</div>
|
||||
</div>
|
||||
<div class="readOnlyContent" style="margin: 2em auto 0; padding: 0 1em 100px;">
|
||||
<div class="sendMessageSection">
|
||||
<br /><h1>${HeaderSendMessage}</h1>
|
||||
<div style="text-align: left;">
|
||||
<form class="sendMessageForm">
|
||||
<div>
|
||||
<paper-input class="sendMessageElement" type="text" id="txtMessageTitle" label="${LabelMessageTitle}" required></paper-input>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<paper-input class="sendMessageElement" type="text" id="txtMessageText" label="${LabelMessageText}" required></paper-input>
|
||||
</div>
|
||||
<p>
|
||||
<button class="sendMessageElement clearButton" type="submit" data-role="none" style="display:block;"><paper-button class="sendMessageElement accent" type="submit" raised style="display:block;">${ButtonSend}</paper-button></button>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sendTextSection">
|
||||
<br /><h1>${HeaderTypeText}</h1>
|
||||
<div style="text-align: left;">
|
||||
<form class="typeTextForm">
|
||||
<div>
|
||||
<paper-input class="typeTextElement" type="text" id="txtTypeText" label="${LabelTypeText}" required></paper-input>
|
||||
</div>
|
||||
<p>
|
||||
<button class="typeTextElement clearButton" type="submit" data-role="none" style="display:block;"><paper-button class="typeTextElement accent" type="submit" raised style="display:block;">${ButtonSend}</paper-button></button>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nowPlayingPageTab hide" data-tab="2">
|
||||
<div class="playlist itemsContainer" style="max-width: 800px; margin: 3em auto 0; padding-bottom: 200px;">
|
||||
</div>
|
||||
</div>
|
||||
<paper-tabs class="nowPlayingPagePaperTabs bottom hide" alignbottom hidescrollbuttons noink disabledrag>
|
||||
<paper-tab>${TabNowPlaying}</paper-tab>
|
||||
<paper-tab>${TabControls}</paper-tab>
|
||||
<paper-tab>${TabPlaylist}</paper-tab>
|
||||
</paper-tabs>
|
||||
</div>
|
||||
<div data-role="content" style="overflow:visible;">
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue