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

update nav drawer

Browse source
This commit is contained in:
Luke Pulverenti 2016-06-22 00:39:59 -04:00
parent 31dc3c06e1
commit c5e8888cb4
6 changed files with 52 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

4
dashboard-ui/components/imagedownloader/imagedownloader.js
View file

@ -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 currentItemId;
var currentItemType; var currentItemType;
@ -284,7 +284,7 @@
var html = ''; var html = '';
html += '<h2 class="dialogHeader">'; 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 += '<div style="display:inline-block;margin-left:.6em;vertical-align:middle;">' + Globalize.translate('HeaderSearch') + '</div>';
html += '</h2>'; html += '</h2>';

2
dashboard-ui/components/imageeditor/imageeditor.js
View file

@ -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 currentItem;
var currentDeferred; var currentDeferred;

36
dashboard-ui/components/imageeditor/imageeditor.template.html
View file

@ -1,8 +1,12 @@
<div id="imagesContainer"> <div id="imagesContainer">
<div> <div style="display: flex; align-items: center;margin:2em 0 .5em;">
<h1 style="display:inline-block;vertical-align:middle;">${HeaderImages}</h1> <h1 style="margin:0;">${HeaderImages}</h1>
<paper-fab icon="search" mini class="btnBrowseAllImages subdued" style="vertical-align:middle;margin-left:1em;"></paper-fab> <button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;">
<paper-fab icon="add" mini class="btnOpenUploadMenu subdued" style="vertical-align:middle;margin-left:.25em;"></paper-fab> <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>
<div id="images"> <div id="images">
</div> </div>
@ -10,10 +14,14 @@
</div> </div>
<div id="backdropsContainer" class="hide"> <div id="backdropsContainer" class="hide">
<div> <div style="display: flex; align-items: center;margin:1em 0 .5em;">
<h1 style="display:inline-block;vertical-align:middle;">${HeaderBackdrops}</h1> <h1 style="margin:0;">${HeaderBackdrops}</h1>
<paper-fab icon="search" mini class="btnBrowseAllImages subdued" style="vertical-align:middle;margin-left:1em;" data-imagetype="Backdrop"></paper-fab> <button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;" data-imagetype="Backdrop">
<paper-fab icon="add" mini class="btnOpenUploadMenu subdued" style="vertical-align:middle;margin-left:.25em;" data-imagetype="Backdrop"></paper-fab> <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>
<div id="backdrops"> <div id="backdrops">
</div> </div>
@ -21,10 +29,14 @@
</div> </div>
<div id="screenshotsContainer" class="hide"> <div id="screenshotsContainer" class="hide">
<div> <div style="display: flex; align-items: center;margin:1em 0 .5em;">
<h1 style="display:inline-block;vertical-align:middle;">${Screenshots}</h1> <h1 style="margin:0;">${Screenshots}</h1>
<paper-fab icon="search" mini class="btnBrowseAllImages subdued" style="vertical-align:middle;margin-left:1em;" data-imagetype="Screenshot"></paper-fab> <button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;" data-imagetype="Screenshot">
<paper-fab icon="add" mini class="btnOpenUploadMenu subdued" style="vertical-align:middle;margin-left:.25em;" data-imagetype="Screenshot"></paper-fab> <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>
<div id="screenshots"> <div id="screenshots">
</div> </div>

6
dashboard-ui/components/navdrawer/navdrawer.css
View file

@ -7,7 +7,7 @@
will-change: transform; will-change: transform;
contain: layout style; contain: layout style;
display: flex; display: flex;
transition: transform ease-out 60ms, left ease-out 300ms; transition: transform ease-out 60ms, left ease-out 260ms;
z-index: 1099; z-index: 1099;
} }
@ -17,8 +17,8 @@
.touch-menu-la.transition { .touch-menu-la.transition {
/*transition: transform 0.3s ease-out;*/ /*transition: transform 0.3s ease-out;*/
transition: -webkit-transform ease-out 280ms, left ease-out 300ms; transition: -webkit-transform ease-out 260ms, left ease-out 260ms;
transition: transform ease-out 280ms, left ease-out 300ms; 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: -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;*/ transition: transform ease-in-out 0.3s, width ease-in-out 0.3s, visibility 0.3s;*/
} }

37
dashboard-ui/components/navdrawer/navdrawer.js
View file

@ -1,4 +1,4 @@
define(['hammer', 'css!./navdrawer'], function (Hammer) { define(['browser', 'hammer', 'css!./navdrawer'], function (browser, Hammer) {
return function (options) { return function (options) {
@ -39,14 +39,6 @@
options.target.style.width = options.width + 'px'; options.target.style.width = options.width + 'px';
options.target.style.left = -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) { if (!options.disableMask) {
mask = document.createElement('div'); mask = document.createElement('div');
mask.className = 'tmla-mask'; mask.className = 'tmla-mask';
@ -104,17 +96,23 @@
var edgeHammer = new Hammer(options.edgeSwipeElement, null); var edgeHammer = new Hammer(options.edgeSwipeElement, null);
var isPeeking = false; var isPeeking = false;
edgeHammer.on('panstart', function (ev) { edgeHammer.on('panstart panmove', function (ev) {
if (ev.srcEvent.clientX <= options.handleSize && ev.deltaX > 0) {
isPeeking = true;
onPanStart(ev);
}
});
edgeHammer.on('panmove', function (ev) {
if (isPeeking) { if (isPeeking) {
onPanMove(ev); 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) { edgeHammer.on('panend pancancel', function (ev) {
@ -263,6 +261,11 @@
options = Object.assign(defaults, options || {}); options = Object.assign(defaults, options || {});
// Not ready yet
if (browser.edge) {
options.disableEdgeSwipe = true;
}
menuHammer = Hammer(options.target, null); menuHammer = Hammer(options.target, null);
self.initElements(); self.initElements();

5
dashboard-ui/css/card.css
View file

@ -90,7 +90,7 @@
filter: grayscale(100%); filter: grayscale(100%);
} }
.bottomPaddedCard .cardBox { .bottomPaddedCard .cardBox:not(.visualCardBox) {
margin-bottom: 24px; margin-bottom: 24px;
} }
@ -107,7 +107,6 @@
-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.1); -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
box-shadow: 0 2px 4px rgba(0,0,0,0.1); box-shadow: 0 2px 4px rgba(0,0,0,0.1);
background: #fff; background: #fff;
margin: 7px;
} }
.ui-body-b .visualCardBox { .ui-body-b .visualCardBox {
@ -115,7 +114,7 @@
} }
.defaultBackground .cardImage, .ui-body-b .visualCardBox { .defaultBackground .cardImage, .ui-body-b .visualCardBox {
background-color: #262626; background-color: #2a2a2a;
} }
.cardScalable { .cardScalable {