mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update nav drawer
This commit is contained in:
Luke Pulverenti
parent
31dc3c06e1
commit
c5e8888cb4
6 changed files with 52 additions and 38 deletions
|
|
@ -1,4 +1,4 @@
|
|||
define(['dialogHelper', 'jQuery', 'emby-checkbox', 'paper-fab', 'paper-icon-button-light'], function (dialogHelper, $) {
|
||||
define(['dialogHelper', 'jQuery', 'emby-checkbox', 'emby-button', 'paper-icon-button-light'], function (dialogHelper, $) {
|
||||
|
||||
var currentItemId;
|
||||
var currentItemType;
|
||||
|
|
@ -284,7 +284,7 @@
|
|||
|
||||
var html = '';
|
||||
html += '<h2 class="dialogHeader">';
|
||||
html += '<paper-fab icon="arrow-back" mini class="btnCloseDialog" tabindex="-1"></paper-fab>';
|
||||
html += '<button type="button" is="emby-button" icon="arrow-back" class="fab mini btnCloseDialog autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>';
|
||||
html += '<div style="display:inline-block;margin-left:.6em;vertical-align:middle;">' + Globalize.translate('HeaderSearch') + '</div>';
|
||||
html += '</h2>';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
define(['dialogHelper', 'css!css/metadataeditor.css', 'emby-button', 'paper-fab', 'paper-icon-button-light'], function (dialogHelper) {
|
||||
define(['dialogHelper', 'css!css/metadataeditor.css', 'emby-button', 'paper-icon-button-light'], function (dialogHelper) {
|
||||
|
||||
var currentItem;
|
||||
var currentDeferred;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,12 @@
|
|||
<div id="imagesContainer">
|
||||
<div>
|
||||
<h1 style="display:inline-block;vertical-align:middle;">${HeaderImages}</h1>
|
||||
<paper-fab icon="search" mini class="btnBrowseAllImages subdued" style="vertical-align:middle;margin-left:1em;"></paper-fab>
|
||||
<paper-fab icon="add" mini class="btnOpenUploadMenu subdued" style="vertical-align:middle;margin-left:.25em;"></paper-fab>
|
||||
<div style="display: flex; align-items: center;margin:2em 0 .5em;">
|
||||
<h1 style="margin:0;">${HeaderImages}</h1>
|
||||
<button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;">
|
||||
<i class="md-icon">search</i>
|
||||
</button>
|
||||
<button type="button" is="emby-button" class="btnOpenUploadMenu fab mini autoSize" style="margin-left: .5em;">
|
||||
<i class="md-icon">add</i>
|
||||
</button>
|
||||
</div>
|
||||
<div id="images">
|
||||
</div>
|
||||
|
|
@ -10,10 +14,14 @@
|
|||
</div>
|
||||
|
||||
<div id="backdropsContainer" class="hide">
|
||||
<div>
|
||||
<h1 style="display:inline-block;vertical-align:middle;">${HeaderBackdrops}</h1>
|
||||
<paper-fab icon="search" mini class="btnBrowseAllImages subdued" style="vertical-align:middle;margin-left:1em;" data-imagetype="Backdrop"></paper-fab>
|
||||
<paper-fab icon="add" mini class="btnOpenUploadMenu subdued" style="vertical-align:middle;margin-left:.25em;" data-imagetype="Backdrop"></paper-fab>
|
||||
<div style="display: flex; align-items: center;margin:1em 0 .5em;">
|
||||
<h1 style="margin:0;">${HeaderBackdrops}</h1>
|
||||
<button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;" data-imagetype="Backdrop">
|
||||
<i class="md-icon">search</i>
|
||||
</button>
|
||||
<button type="button" is="emby-button" class="btnOpenUploadMenu fab mini autoSize" style="margin-left: .5em;" data-imagetype="Backdrop">
|
||||
<i class="md-icon">add</i>
|
||||
</button>
|
||||
</div>
|
||||
<div id="backdrops">
|
||||
</div>
|
||||
|
|
@ -21,10 +29,14 @@
|
|||
</div>
|
||||
|
||||
<div id="screenshotsContainer" class="hide">
|
||||
<div>
|
||||
<h1 style="display:inline-block;vertical-align:middle;">${Screenshots}</h1>
|
||||
<paper-fab icon="search" mini class="btnBrowseAllImages subdued" style="vertical-align:middle;margin-left:1em;" data-imagetype="Screenshot"></paper-fab>
|
||||
<paper-fab icon="add" mini class="btnOpenUploadMenu subdued" style="vertical-align:middle;margin-left:.25em;" data-imagetype="Screenshot"></paper-fab>
|
||||
<div style="display: flex; align-items: center;margin:1em 0 .5em;">
|
||||
<h1 style="margin:0;">${Screenshots}</h1>
|
||||
<button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;" data-imagetype="Screenshot">
|
||||
<i class="md-icon">search</i>
|
||||
</button>
|
||||
<button type="button" is="emby-button" class="btnOpenUploadMenu fab mini autoSize" style="margin-left: .5em;" data-imagetype="Screenshot">
|
||||
<i class="md-icon">add</i>
|
||||
</button>
|
||||
</div>
|
||||
<div id="screenshots">
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
will-change: transform;
|
||||
contain: layout style;
|
||||
display: flex;
|
||||
transition: transform ease-out 60ms, left ease-out 300ms;
|
||||
transition: transform ease-out 60ms, left ease-out 260ms;
|
||||
z-index: 1099;
|
||||
}
|
||||
|
||||
|
|
@ -17,8 +17,8 @@
|
|||
|
||||
.touch-menu-la.transition {
|
||||
/*transition: transform 0.3s ease-out;*/
|
||||
transition: -webkit-transform ease-out 280ms, left ease-out 300ms;
|
||||
transition: transform ease-out 280ms, left ease-out 300ms;
|
||||
transition: -webkit-transform ease-out 260ms, left ease-out 260ms;
|
||||
transition: transform ease-out 260ms, left ease-out 260ms;
|
||||
/*transition: -webkit-transform ease-in-out 0.3s, width ease-in-out 0.3s, visibility 0.3s;
|
||||
transition: transform ease-in-out 0.3s, width ease-in-out 0.3s, visibility 0.3s;*/
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
define(['hammer', 'css!./navdrawer'], function (Hammer) {
|
||||
define(['browser', 'hammer', 'css!./navdrawer'], function (browser, Hammer) {
|
||||
|
||||
return function (options) {
|
||||
|
||||
|
|
@ -39,14 +39,6 @@
|
|||
options.target.style.width = options.width + 'px';
|
||||
options.target.style.left = -options.width + 'px';
|
||||
|
||||
if (!options.disableEdgeSwipe) {
|
||||
//var handle = document.createElement('div');
|
||||
//handle.className = "tmla-handle";
|
||||
//handle.style.width = options.handleSize + 'px';
|
||||
//handle.style.right = -options.handleSize + 'px';
|
||||
//options.target.appendChild(handle);
|
||||
}
|
||||
|
||||
if (!options.disableMask) {
|
||||
mask = document.createElement('div');
|
||||
mask.className = 'tmla-mask';
|
||||
|
|
@ -104,17 +96,23 @@
|
|||
var edgeHammer = new Hammer(options.edgeSwipeElement, null);
|
||||
var isPeeking = false;
|
||||
|
||||
edgeHammer.on('panstart', function (ev) {
|
||||
|
||||
if (ev.srcEvent.clientX <= options.handleSize && ev.deltaX > 0) {
|
||||
isPeeking = true;
|
||||
onPanStart(ev);
|
||||
}
|
||||
});
|
||||
edgeHammer.on('panmove', function (ev) {
|
||||
edgeHammer.on('panstart panmove', function (ev) {
|
||||
|
||||
if (isPeeking) {
|
||||
onPanMove(ev);
|
||||
} else {
|
||||
var srcEvent = ev.srcEvent;
|
||||
var clientX = srcEvent.clientX;
|
||||
if (!clientX) {
|
||||
var touches = srcEvent.touches;
|
||||
if (touches && touches.length) {
|
||||
clientX = touches[0].clientX;
|
||||
}
|
||||
}
|
||||
if (clientX <= options.handleSize) {
|
||||
isPeeking = true;
|
||||
onPanStart(ev);
|
||||
}
|
||||
}
|
||||
});
|
||||
edgeHammer.on('panend pancancel', function (ev) {
|
||||
|
|
@ -263,6 +261,11 @@
|
|||
|
||||
options = Object.assign(defaults, options || {});
|
||||
|
||||
// Not ready yet
|
||||
if (browser.edge) {
|
||||
options.disableEdgeSwipe = true;
|
||||
}
|
||||
|
||||
menuHammer = Hammer(options.target, null);
|
||||
|
||||
self.initElements();
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@
|
|||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
.bottomPaddedCard .cardBox {
|
||||
.bottomPaddedCard .cardBox:not(.visualCardBox) {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
|
|
@ -107,7 +107,6 @@
|
|||
-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
background: #fff;
|
||||
margin: 7px;
|
||||
}
|
||||
|
||||
.ui-body-b .visualCardBox {
|
||||
|
|
@ -115,7 +114,7 @@
|
|||
}
|
||||
|
||||
.defaultBackground .cardImage, .ui-body-b .visualCardBox {
|
||||
background-color: #262626;
|
||||
background-color: #2a2a2a;
|
||||
}
|
||||
|
||||
.cardScalable {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue