From 377ba7c149377864787d075f051e6179bd31244a Mon Sep 17 00:00:00 2001 From: Olivier Paroz Date: Wed, 20 May 2015 23:59:49 +0200 Subject: [PATCH 01/12] Turn the Gallery button into a switch Implementation of #145 --- css/gallerybutton.css | 54 +++++++++++++++++++++++++++++++++----- css/styles.css | 38 +++++++++++++++++++++------ js/app.js | 12 --------- js/gallery.js | 19 ++++++++++++++ js/gallerybutton.js | 15 ++++++++--- js/galleryview.js | 5 ++-- templates/part.content.php | 14 ++++++---- templates/public.php | 14 +++++++--- 8 files changed, 129 insertions(+), 42 deletions(-) diff --git a/css/gallerybutton.css b/css/gallerybutton.css index 78c9008c3c..5561be665e 100644 --- a/css/gallerybutton.css +++ b/css/gallerybutton.css @@ -1,14 +1,54 @@ -/* toggle for opening shared picture view as file list */ -#openAsFileListButton { +/* Toggle for opening the files list in the Gallery app */ +#controls .button.view-switcher { float: right; margin-right: 4px; margin-top: 5px; font-weight: normal; + width: 40px; + padding: 8px 11px; } -#openAsFileListButton img { - vertical-align: text-top; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; - filter: alpha(opacity=50); - opacity: .5; +.button.left-switch-button img, +.button.right-switch-button img { + vertical-align: -3px; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: alpha(opacity=60); + opacity: 0.6; } + +#controls .button.left-switch-button { + float: left; + display: inline; + border-radius: 3px 0 0 3px; + margin-left: 3px; + margin-right:0; + border-right: 0; +} +#controls .button.right-switch-button { + float: left; + display: inline; + border-radius: 0 3px 3px 0; + margin-left: -1px; +} + +#controls .inactive-button { + background-color: rgb(230, 230, 230); +} + +#controls .inactive-button img{ + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)"; + filter: alpha(opacity=25); + opacity: 0.25; +} + +#controls .inactive-button:hover, +#controls .inactive-button:focus, +#controls .inactive-button a:focus{ + background-color: rgba(255, 255, 255, .95); + color: #111; +} + +#controls .disabled-button { + pointer-events: none; +} + diff --git a/css/styles.css b/css/styles.css index 5c84a58456..3a4a3035b3 100644 --- a/css/styles.css +++ b/css/styles.css @@ -24,39 +24,57 @@ div.crumb.last a { #controls .button { margin-top: 5px; + width: 40px; } -#controls .button.left-sort-button { +#controls .button.left-switch-button { float: left; display: inline; - padding: 8px; border-radius: 3px 0 0 3px; margin-left: 3px; margin-right: 0; border-right: 0; } -#controls .button.right-sort-button { +#controls .button.right-switch-button { float: left; display: inline; - padding: 8px 9px 8px 8px; border-radius: 0 3px 3px 0; margin-left: -1px; } -.sort-inactive { +#controls .button.view-switcher { + padding: 8px 11px; +} + +#controls .button.sorting { + padding: 8px; +} + +#controls .inactive-button { background-color: rgb(230, 230, 230); } -#controls .sort-inactive img { +#controls .inactive-button img{ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)"; filter: alpha(opacity=25); opacity: 0.25; } +#controls .inactive-button:hover, +#controls .inactive-button:focus, +#controls .inactive-button a:focus{ + background-color: rgba(255, 255, 255, .95); + color: #111; +} + +#controls .disabled-button { + pointer-events: none; +} + #share-button img, -#sort-name-button img, -#sort-date-button img { +.button.left-switch-button img, +.button.right-switch-button img { vertical-align: -3px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); @@ -67,6 +85,10 @@ div.crumb.last a { position: relative; } +#album-info-button img { + vertical-align: -3px; +} + .album-info-content { background-color: #eee; border-bottom-left-radius: 5px; diff --git a/js/app.js b/js/app.js index cdf93b6d9a..bfcb452000 100644 --- a/js/app.js +++ b/js/app.js @@ -40,18 +40,6 @@ $(document).ready(function () { }); }); - $('#openAsFileListButton').click(function () { - var subUrl = ''; - var params = {path: '/' + Gallery.currentAlbum}; - if (Gallery.token) { - params.token = Gallery.token; - subUrl = 's/{token}?path={path}'; - } else { - subUrl = 'apps/files?dir={path}'; - } - OC.redirect(OC.generateUrl(subUrl, params)); - }); - $(document).click(function () { $('.album-info-content').slideUp(); }); diff --git a/js/gallery.js b/js/gallery.js index 396eea47f2..c79a30a560 100644 --- a/js/gallery.js +++ b/js/gallery.js @@ -144,6 +144,25 @@ // Refresh the view Gallery.view.viewAlbum(Gallery.currentAlbum); }, + + /** + * Switches to the Files view + * + * @param event + */ + switchToFilesView: function (event) { + event.stopPropagation(); + + var subUrl = ''; + var params = {path: '/' + encodeURIComponent(Gallery.currentAlbum)}; + if (Gallery.token) { + params.token = Gallery.token; + subUrl = 's/{token}?path={path}'; + } else { + subUrl = 'apps/files?dir={path}'; + } + OC.redirect(OC.generateUrl(subUrl, params)); + }, /** * Populates the share dialog with the needed information diff --git a/js/gallerybutton.js b/js/gallerybutton.js index f131572ce2..970cbde04e 100644 --- a/js/gallerybutton.js +++ b/js/gallerybutton.js @@ -58,10 +58,17 @@ $(document).ready(function () { $('#fileList').on('updated', GalleryButton.onFileListUpdated); // Toggle for opening files list as gallery view - GalleryButton.button = $('
' + - '' + - '
'); + GalleryButton.button = + $('
' + + '' + + '
' + + ''); GalleryButton.button.click(function () { window.location.href = GalleryButton.url; diff --git a/js/galleryview.js b/js/galleryview.js index 8872d74bb0..9436562e78 100644 --- a/js/galleryview.js +++ b/js/galleryview.js @@ -54,6 +54,7 @@ } else { // Only do it when the app is initialised if (this.requestId === -1) { + $('#filelist-button').click(Gallery.switchToFilesView); $('#download').click(Gallery.download); $('#share-button').click(Gallery.share); Gallery.infoBox = new Gallery.InfoBox(); @@ -128,9 +129,9 @@ var icon = sortType + sortOrder; var setButton = function (button, icon, active) { - button.removeClass('sort-inactive'); + button.removeClass('inactive-button'); if (!active) { - button.addClass('sort-inactive'); + button.addClass('inactive-button'); } button.find('img').attr('src', OC.imagePath(Gallery.appName, icon)); }; diff --git a/templates/part.content.php b/templates/part.content.php index 33db81ad53..f7187f484a 100644 --- a/templates/part.content.php +++ b/templates/part.content.php @@ -35,7 +35,6 @@ [ 'styles', 'mobile', - 'gallerybutton', 'github-markdown', 'slideshow' ] @@ -43,18 +42,23 @@ ?>
- -
+ +
<?php p($l->t('File list')); ?>
-
+
+ <?php p($l->t('Picture view')); ?> +
+
<?php p($l->t('Sort by name')); ?>
-
+
<?php p($l->t('Sort by date')); ?> diff --git a/templates/public.php b/templates/public.php index f33c7155c2..f497aa9169 100644 --- a/templates/public.php +++ b/templates/public.php @@ -103,18 +103,24 @@ class="icon-confirm svg">
- -
+ +
<?php p($l->t('File list')); ?>
-
+
+ <?php p($l->t('Picture view')); ?> +
+
<?php p($l->t('Sort by name')); ?>
-
+
<?php p($l->t('Sort by date')); ?> From 27e1dc96ce7193211864890c4129358c551f8078 Mon Sep 17 00:00:00 2001 From: Olivier Paroz Date: Thu, 25 Jun 2015 20:37:59 +0200 Subject: [PATCH 02/12] Show that something is happening after the user has clicked on the switch --- css/gallerybutton.css | 35 ++++++++++++++++------- css/styles.css | 58 ++------------------------------------ js/gallery.js | 4 +++ js/gallerybutton.js | 2 ++ templates/part.content.php | 3 +- templates/public.php | 3 +- 6 files changed, 37 insertions(+), 68 deletions(-) diff --git a/css/gallerybutton.css b/css/gallerybutton.css index 5561be665e..430b184a9c 100644 --- a/css/gallerybutton.css +++ b/css/gallerybutton.css @@ -1,4 +1,5 @@ -/* Toggle for opening the files list in the Gallery app */ +/* Gallery buttons design */ + #controls .button.view-switcher { float: right; margin-right: 4px; @@ -8,12 +9,8 @@ padding: 8px 11px; } -.button.left-switch-button img, -.button.right-switch-button img { - vertical-align: -3px; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; - filter: alpha(opacity=60); - opacity: 0.6; +#controls .button.sorting { + padding: 8px 7px; } #controls .button.left-switch-button { @@ -21,9 +18,10 @@ display: inline; border-radius: 3px 0 0 3px; margin-left: 3px; - margin-right:0; + margin-right: 0; border-right: 0; } + #controls .button.right-switch-button { float: left; display: inline; @@ -31,11 +29,19 @@ margin-left: -1px; } +.button.left-switch-button img, +.button.right-switch-button img { + vertical-align: -3px; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: alpha(opacity=60); + opacity: 0.6; +} + #controls .inactive-button { background-color: rgb(230, 230, 230); } -#controls .inactive-button img{ +#controls .inactive-button img { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)"; filter: alpha(opacity=25); opacity: 0.25; @@ -43,7 +49,8 @@ #controls .inactive-button:hover, #controls .inactive-button:focus, -#controls .inactive-button a:focus{ +#controls .inactive-button a:focus, +#controls .inactive-button.loading { background-color: rgba(255, 255, 255, .95); color: #111; } @@ -52,3 +59,11 @@ pointer-events: none; } +#share-button img, +.button.left-switch-button img, +.button.right-switch-button img { + vertical-align: -3px; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: alpha(opacity=60); + opacity: 0.6; +} diff --git a/css/styles.css b/css/styles.css index 3a4a3035b3..bb22aa4974 100644 --- a/css/styles.css +++ b/css/styles.css @@ -27,58 +27,8 @@ div.crumb.last a { width: 40px; } -#controls .button.left-switch-button { - float: left; - display: inline; - border-radius: 3px 0 0 3px; - margin-left: 3px; - margin-right: 0; - border-right: 0; -} - -#controls .button.right-switch-button { - float: left; - display: inline; - border-radius: 0 3px 3px 0; - margin-left: -1px; -} - -#controls .button.view-switcher { - padding: 8px 11px; -} - -#controls .button.sorting { - padding: 8px; -} - -#controls .inactive-button { - background-color: rgb(230, 230, 230); -} - -#controls .inactive-button img{ - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)"; - filter: alpha(opacity=25); - opacity: 0.25; -} - -#controls .inactive-button:hover, -#controls .inactive-button:focus, -#controls .inactive-button a:focus{ - background-color: rgba(255, 255, 255, .95); - color: #111; -} - -#controls .disabled-button { - pointer-events: none; -} - -#share-button img, -.button.left-switch-button img, -.button.right-switch-button img { - vertical-align: -3px; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; - filter: alpha(opacity=60); - opacity: 0.6; +#controls > .right { + float: right; } #album-info-button { @@ -254,10 +204,6 @@ div.crumb.last a { opacity: 0; } -#controls > .right { - float: right; -} - #gallery > h2 { background: #f7f7f7; height: 2.8em; diff --git a/js/gallery.js b/js/gallery.js index c79a30a560..290044b77e 100644 --- a/js/gallery.js +++ b/js/gallery.js @@ -161,6 +161,10 @@ } else { subUrl = 'apps/files?dir={path}'; } + + var button = $('#filelist-button'); + button.addClass('loading'); + button.find('img').attr('src', OC.imagePath('core', 'loading-small.gif')); OC.redirect(OC.generateUrl(subUrl, params)); }, diff --git a/js/gallerybutton.js b/js/gallerybutton.js index 970cbde04e..8f45de63b2 100644 --- a/js/gallerybutton.js +++ b/js/gallerybutton.js @@ -71,6 +71,8 @@ $(document).ready(function () { '
'); GalleryButton.button.click(function () { + $(this).addClass('loading'); + $(this).find('img').attr('src', OC.imagePath('core', 'loading-small.gif')); window.location.href = GalleryButton.url; }); diff --git a/templates/part.content.php b/templates/part.content.php index f7187f484a..7051870cf9 100644 --- a/templates/part.content.php +++ b/templates/part.content.php @@ -36,7 +36,8 @@ 'styles', 'mobile', 'github-markdown', - 'slideshow' + 'slideshow', + 'gallerybutton' ] ); ?> diff --git a/templates/public.php b/templates/public.php index f497aa9169..a6cbb5d12a 100644 --- a/templates/public.php +++ b/templates/public.php @@ -38,7 +38,8 @@ 'public', 'gallerybutton', 'github-markdown', - 'slideshow' + 'slideshow', + 'gallerybutton' ] ); From 7cb55cb86af2e7b6e9d69520225555e38de015dd Mon Sep 17 00:00:00 2001 From: Olivier Paroz Date: Thu, 25 Jun 2015 21:25:08 +0200 Subject: [PATCH 03/12] Adding the class is enough --- js/gallery.js | 1 - js/gallerybutton.js | 1 - 2 files changed, 2 deletions(-) diff --git a/js/gallery.js b/js/gallery.js index 290044b77e..8cf4550214 100644 --- a/js/gallery.js +++ b/js/gallery.js @@ -164,7 +164,6 @@ var button = $('#filelist-button'); button.addClass('loading'); - button.find('img').attr('src', OC.imagePath('core', 'loading-small.gif')); OC.redirect(OC.generateUrl(subUrl, params)); }, diff --git a/js/gallerybutton.js b/js/gallerybutton.js index 8f45de63b2..ca0d29a595 100644 --- a/js/gallerybutton.js +++ b/js/gallerybutton.js @@ -72,7 +72,6 @@ $(document).ready(function () { GalleryButton.button.click(function () { $(this).addClass('loading'); - $(this).find('img').attr('src', OC.imagePath('core', 'loading-small.gif')); window.location.href = GalleryButton.url; }); From 8804378bbd651586921c47b328383bda322fedcd Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Mon, 29 Jun 2015 17:01:45 +0200 Subject: [PATCH 04/12] fix style for disabled and active view, adjust to expectations --- css/gallerybutton.css | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/css/gallerybutton.css b/css/gallerybutton.css index 430b184a9c..9e1152a611 100644 --- a/css/gallerybutton.css +++ b/css/gallerybutton.css @@ -37,28 +37,25 @@ opacity: 0.6; } -#controls .inactive-button { +#controls .disabled-button { + pointer-events: none; background-color: rgb(230, 230, 230); } -#controls .inactive-button img { +#controls .disabled-button img { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)"; filter: alpha(opacity=25); opacity: 0.25; } -#controls .inactive-button:hover, -#controls .inactive-button:focus, -#controls .inactive-button a:focus, -#controls .inactive-button.loading { +#controls .disabled-button:hover, +#controls .disabled-button:focus, +#controls .disabled-button a:focus, +#controls .disabled-button.loading { background-color: rgba(255, 255, 255, .95); color: #111; } -#controls .disabled-button { - pointer-events: none; -} - #share-button img, .button.left-switch-button img, .button.right-switch-button img { From d6c5d9ff76c4c5b364408f4566df64934a66f9da Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Mon, 29 Jun 2015 17:24:30 +0200 Subject: [PATCH 05/12] move toggle buttons for sorting and view switching to the right --- css/gallerybutton.css | 5 ++--- js/gallerybutton.js | 8 ++++---- templates/part.content.php | 16 ++++++++-------- templates/public.php | 16 ++++++++-------- 4 files changed, 22 insertions(+), 23 deletions(-) diff --git a/css/gallerybutton.css b/css/gallerybutton.css index 9e1152a611..10c144e6b7 100644 --- a/css/gallerybutton.css +++ b/css/gallerybutton.css @@ -14,7 +14,7 @@ } #controls .button.left-switch-button { - float: left; + float: right; display: inline; border-radius: 3px 0 0 3px; margin-left: 3px; @@ -23,10 +23,9 @@ } #controls .button.right-switch-button { - float: left; + float: right; display: inline; border-radius: 0 3px 3px 0; - margin-left: -1px; } .button.left-switch-button img, diff --git a/js/gallerybutton.js b/js/gallerybutton.js index ca0d29a595..24d3a40f77 100644 --- a/js/gallerybutton.js +++ b/js/gallerybutton.js @@ -59,13 +59,13 @@ $(document).ready(function () { // Toggle for opening files list as gallery view GalleryButton.button = - $('
' + - '' + + '' + '
' + - ''); diff --git a/templates/part.content.php b/templates/part.content.php index 7051870cf9..fd1155b14a 100644 --- a/templates/part.content.php +++ b/templates/part.content.php @@ -44,26 +44,26 @@
-
- <?php p($l->t('File list')); ?> -
<?php p($l->t('Picture view')); ?>
-
+
<?php p($l->t('Sort by name')); ?> + image_path('core', 'actions/toggle-filelist.svg') + ); ?>" alt="t('File list')); ?>"/>
<?php p($l->t('Sort by date')); ?>
+
+ <?php p($l->t('Sort by name')); ?> +
diff --git a/templates/public.php b/templates/public.php index a6cbb5d12a..728be169b0 100644 --- a/templates/public.php +++ b/templates/public.php @@ -105,27 +105,27 @@ class="icon-confirm svg">
+
+ <?php p($l->t('Picture view')); ?> +
<?php p($l->t('File list')); ?>
-
+
<?php p($l->t('Picture view')); ?> + image_path($_['appName'], 'dateasc.svg') + ); ?>" alt="t('Sort by date')); ?>"/>
<?php p($l->t('Sort by name')); ?>
-
- <?php p($l->t('Sort by date')); ?> -
From f743188645f840b049101b64793471435a6b2112 Mon Sep 17 00:00:00 2001 From: Olivier Paroz Date: Thu, 25 Jun 2015 20:37:59 +0200 Subject: [PATCH 06/12] Use a 3rd style to indicate which sort order is active + remove unused style --- css/gallerybutton.css | 1 + js/galleryview.js | 6 +++--- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/css/gallerybutton.css b/css/gallerybutton.css index 10c144e6b7..f027e51fc4 100644 --- a/css/gallerybutton.css +++ b/css/gallerybutton.css @@ -47,6 +47,7 @@ opacity: 0.25; } +#controls .active-button, #controls .disabled-button:hover, #controls .disabled-button:focus, #controls .disabled-button a:focus, diff --git a/js/galleryview.js b/js/galleryview.js index 9436562e78..fc5397f9fe 100644 --- a/js/galleryview.js +++ b/js/galleryview.js @@ -129,9 +129,9 @@ var icon = sortType + sortOrder; var setButton = function (button, icon, active) { - button.removeClass('inactive-button'); - if (!active) { - button.addClass('inactive-button'); + button.removeClass('active-button'); + if (active) { + button.addClass('active-button'); } button.find('img').attr('src', OC.imagePath(Gallery.appName, icon)); }; From 4acd294da3bb4694b5209d7dbf6e32307949ac3b Mon Sep 17 00:00:00 2001 From: Olivier Paroz Date: Thu, 25 Jun 2015 20:37:59 +0200 Subject: [PATCH 07/12] Add flip effect to sorting buttons We can't use CSS3 because of IE --- css/gallerybutton.css | 69 +++++++++++++++++++++++++++++++++++++- js/galleryview.js | 69 ++++++++++++++++++++++++++------------ templates/part.content.php | 22 ++++++++---- templates/public.php | 22 ++++++++---- 4 files changed, 148 insertions(+), 34 deletions(-) diff --git a/css/gallerybutton.css b/css/gallerybutton.css index f027e51fc4..daa1a5beb5 100644 --- a/css/gallerybutton.css +++ b/css/gallerybutton.css @@ -11,6 +11,9 @@ #controls .button.sorting { padding: 8px 7px; + -webkit-perspective: 1000px; + -moz-perspective: 1000px; + perspective: 1000px; } #controls .button.left-switch-button { @@ -47,7 +50,7 @@ opacity: 0.25; } -#controls .active-button, +#controls .button.sorting.active-button, #controls .disabled-button:hover, #controls .disabled-button:focus, #controls .disabled-button a:focus, @@ -64,3 +67,67 @@ filter: alpha(opacity=60); opacity: 0.6; } + +/* Original Flip CSS by David Walsh +http://davidwalsh.name/css-flip*/ + +/* Wrapping both sort images */ +#controls .button.sorting .flipper { + -webkit-transform: perspective(1000px); + -moz-transform: perspective(1000px); + transform: perspective(1000px); + + -webkit-transform-style: preserve-3d; + -moz-transform-style: preserve-3d; + transform-style: preserve-3d; + + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + transition: 0.3s; + + position: relative; +} + +#controls .button.sorting .front, +#controls .button.sorting .back { + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + backface-visibility: hidden; + + + -webkit-transform-style: preserve-3d; + -moz-transform-style: preserve-3d; + transform-style: preserve-3d; + + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + transition: 0.3s; + + position: absolute; + top: 0; + left: 0; + padding: 2px 1px; +} + +#controls .button.sorting .front, +#controls .button.sorting.active-button.hover .back { + z-index: 2; + + -webkit-transform: rotateX(0deg); + -moz-transform: rotateX(0deg); + transform: rotateX(0deg); +} + +#controls .button.sorting .back { + filter: alpha(opacity=0); /* Hide this class in IE<10 */ + + -webkit-transform: rotateX(180deg); + -moz-transform: rotateX(180deg); + transform: rotateX(180deg); +} + +#controls .button.sorting.active-button.hover .front { + -webkit-transform: rotateX(180deg); + -moz-transform: rotateX(180deg); + transform: rotateX(180deg); +} diff --git a/js/galleryview.js b/js/galleryview.js index fc5397f9fe..5216ceb46e 100644 --- a/js/galleryview.js +++ b/js/galleryview.js @@ -119,30 +119,16 @@ /** * Manages the sorting interface * - * @param {string} sortType - * @param {string} sortOrder + * @param {string} sortType name or date + * @param {string} sortOrder asc or des */ sortControlsSetup: function (sortType, sortOrder) { - var sortNameButton = $('#sort-name-button'); - var sortDateButton = $('#sort-date-button'); - // namedes, dateasc etc. - var icon = sortType + sortOrder; - - var setButton = function (button, icon, active) { - button.removeClass('active-button'); - if (active) { - button.addClass('active-button'); - } - button.find('img').attr('src', OC.imagePath(Gallery.appName, icon)); - }; - - if (sortType === 'name') { - setButton(sortNameButton, icon, true); - setButton(sortDateButton, 'dateasc', false); // default icon - } else { - setButton(sortDateButton, icon, true); - setButton(sortNameButton, 'nameasc', false); // default icon + var reverseSortType = 'date'; + if (sortType === 'date') { + reverseSortType = 'name'; } + this._setSortButton(sortType, sortOrder, true); + this._setSortButton(reverseSortType, 'asc', false); // default icon }, /** @@ -307,6 +293,47 @@ } else { wrapper.css('background-color', '#fff'); } + }, + + /** + * Picks the image which matches the sort order + * + * @param {string} sortType name or date + * @param {string} sortOrder asc or des + * @param {bool} active determines if we're setting up the active sort button + * @private + */ + _setSortButton: function (sortType, sortOrder, active) { + var button = $('#sort-' + sortType + '-button'); + // Removing all the classes which control the image in the button + button.removeClass('active-button'); + button.find('img').removeClass('front'); + button.find('img').removeClass('back'); + + // We need to determine the reverse order in order to send that image to the back + var reverseSortOrder = 'des'; + if (sortOrder === 'des') { + reverseSortOrder = 'asc'; + } + + // We assign the proper order to the button images + button.find('img.' + sortOrder).addClass('front'); + button.find('img.' + reverseSortOrder).addClass('back'); + + // The active button needs a hover action for the flip effect + if (active) { + button.addClass('active-button'); + if (button.is(":hover")) { + button.removeClass('hover'); + } + // We can't use a toggle here + button.hover(function () { + $(this).addClass('hover'); + }, + function () { + $(this).removeClass('hover'); + }); + } } }; diff --git a/templates/part.content.php b/templates/part.content.php index fd1155b14a..9a9fec36c1 100644 --- a/templates/part.content.php +++ b/templates/part.content.php @@ -55,14 +55,24 @@ ); ?>" alt="t('File list')); ?>"/>
- <?php p($l->t('Sort by date')); ?> +
+ <?php p($l->t('Sort by date')); ?> + <?php p($l->t('Sort by date')); ?> +
- <?php p($l->t('Sort by name')); ?> +
+ <?php p($l->t('Sort by name')); ?> + <?php p($l->t('Sort by name')); ?> +
diff --git a/templates/public.php b/templates/public.php index 728be169b0..3da03e984e 100644 --- a/templates/public.php +++ b/templates/public.php @@ -117,14 +117,24 @@ class="button view-switcher left-switch-button inactive-button "> ); ?>" alt="t('File list')); ?>"/>
- <?php p($l->t('Sort by date')); ?> +
+ <?php p($l->t('Sort by date')); ?> + <?php p($l->t('Sort by date')); ?> +
- <?php p($l->t('Sort by name')); ?> +
+ <?php p($l->t('Sort by name')); ?> + <?php p($l->t('Sort by name')); ?> +
From 2ea43d43d38b0aff2215d1d46d7473a30ddae50a Mon Sep 17 00:00:00 2001 From: Olivier Paroz Date: Fri, 11 Sep 2015 20:36:14 +0200 Subject: [PATCH 08/12] Sorting on the left, the rest on the right --- css/gallerybutton.css | 13 ++----- templates/part.content.php | 77 ++++++++++++++++++++------------------ 2 files changed, 44 insertions(+), 46 deletions(-) diff --git a/css/gallerybutton.css b/css/gallerybutton.css index daa1a5beb5..5e77db86ba 100644 --- a/css/gallerybutton.css +++ b/css/gallerybutton.css @@ -1,4 +1,7 @@ /* Gallery buttons design */ +#controls .left { + float: left; +} #controls .button.view-switcher { float: right; @@ -31,6 +34,7 @@ border-radius: 0 3px 3px 0; } +#share-button img, .button.left-switch-button img, .button.right-switch-button img { vertical-align: -3px; @@ -59,15 +63,6 @@ color: #111; } -#share-button img, -.button.left-switch-button img, -.button.right-switch-button img { - vertical-align: -3px; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; - filter: alpha(opacity=60); - opacity: 0.6; -} - /* Original Flip CSS by David Walsh http://davidwalsh.name/css-flip*/ diff --git a/templates/part.content.php b/templates/part.content.php index 9a9fec36c1..5df15decb9 100644 --- a/templates/part.content.php +++ b/templates/part.content.php @@ -43,47 +43,32 @@ ?>
- -
- <?php p($l->t('Picture view')); ?> -
-
- <?php p($l->t('File list')); ?> -
-
-
- <?php p($l->t('Sort by date')); ?> - <?php p($l->t('Sort by date')); ?> + +
+
+
+ <?php p($l->t('Sort by date')); ?> + <?php p($l->t('Sort by date')); ?> +
-
-
-
- <?php p($l->t('Sort by name')); ?> - <?php p($l->t('Sort by name')); ?> +
+
+ <?php p($l->t('Sort by name')); ?> + <?php p($l->t('Sort by name')); ?> +
+ -
- - <?php p($l->t('Album information')); ?> -
-
- - +
" data-possible-permissions="31"> + +
+ + <?php p($l->t('Album information')); ?> +
+
+
+ <?php p($l->t('Picture view')); ?> +
+
+ <?php p($l->t('File list')); ?> +
From 244cc53112c37239dcc5e4bf3df9758e087c1cc5 Mon Sep 17 00:00:00 2001 From: Olivier Paroz Date: Tue, 15 Sep 2015 22:30:00 +0200 Subject: [PATCH 09/12] Restore proper switch look --- css/gallerybutton.css | 1 + 1 file changed, 1 insertion(+) diff --git a/css/gallerybutton.css b/css/gallerybutton.css index 5e77db86ba..fad9d5d49d 100644 --- a/css/gallerybutton.css +++ b/css/gallerybutton.css @@ -32,6 +32,7 @@ float: right; display: inline; border-radius: 0 3px 3px 0; + margin-left: -1px; } #share-button img, From 7d58bffe5d42618a217833fff5848c17ccc356f7 Mon Sep 17 00:00:00 2001 From: Olivier Paroz Date: Tue, 15 Sep 2015 22:47:37 +0200 Subject: [PATCH 10/12] [8.2] Fix style to be in-line with new button design --- css/gallerybutton.css | 26 +++++++++++++++++++++----- 1 file changed, 21 insertions(+), 5 deletions(-) diff --git a/css/gallerybutton.css b/css/gallerybutton.css index fad9d5d49d..83e45bcf49 100644 --- a/css/gallerybutton.css +++ b/css/gallerybutton.css @@ -19,13 +19,15 @@ perspective: 1000px; } -#controls .button.left-switch-button { +#controls .button.left-switch-button, +#controls .button.left-switch-button:hover { float: right; display: inline; border-radius: 3px 0 0 3px; margin-left: 3px; margin-right: 0; border-right: 0; + border-right: 1px solid rgba(216, 216, 216, 0.9); } #controls .button.right-switch-button { @@ -46,7 +48,8 @@ #controls .disabled-button { pointer-events: none; - background-color: rgb(230, 230, 230); + background-color: rgba(230, 230, 230, .9); + border: 1px solid rgba(230, 230, 230, .9); } #controls .disabled-button img { @@ -55,13 +58,27 @@ opacity: 0.25; } -#controls .button.sorting.active-button, #controls .disabled-button:hover, #controls .disabled-button:focus, #controls .disabled-button a:focus, #controls .disabled-button.loading { - background-color: rgba(255, 255, 255, .95); + background-color: rgba(255, 255, 255, .9); color: #111; + border: 1px solid rgba(240, 240, 240, .9); +} + +#controls .button.sorting.active-button { + background-color: rgba(255, 255, 255, .9); + color: #111; + border: 1px solid rgba(240, 240, 240, .9); + border-right-color: rgba(216, 216, 216, 0.9); +} + +#controls .button.sorting.active-button:hover { + background-color: rgba(255, 255, 255, .9); + color: #111; + border: 1px solid rgba(240, 240, 240, .9); + border-right-color: rgba(216, 216, 216, 0.9); } /* Original Flip CSS by David Walsh @@ -90,7 +107,6 @@ http://davidwalsh.name/css-flip*/ -moz-backface-visibility: hidden; backface-visibility: hidden; - -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; From a480870ced01b6ae8924c61ea14635d83f5d4aa9 Mon Sep 17 00:00:00 2001 From: Olivier Paroz Date: Tue, 15 Sep 2015 23:59:36 +0200 Subject: [PATCH 11/12] [8.2] Make the Gallery button in Files more discreet --- css/gallerybutton.css | 30 +++++++++++++++++++-- js/gallerybutton.js | 11 +++----- templates/part.content.php | 19 +++++-------- templates/public.php | 55 ++++++++++++++++++-------------------- 4 files changed, 64 insertions(+), 51 deletions(-) diff --git a/css/gallerybutton.css b/css/gallerybutton.css index 83e45bcf49..a120e01a0b 100644 --- a/css/gallerybutton.css +++ b/css/gallerybutton.css @@ -5,11 +5,31 @@ #controls .button.view-switcher { float: right; - margin-right: 4px; margin-top: 5px; font-weight: normal; width: 40px; - padding: 8px 11px; + padding: 6px 11px; + background-color: transparent; + border: 1px solid transparent; +} + +#controls .button.view-switcher img{ + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; + filter: alpha(opacity=30); + opacity: .3; +} + +#controls .button.view-switcher.gallery { + float: none; + margin-right: 4px; + padding: 7px 11px; + background-color: rgba(240, 240, 240, .9); +} + +#controls .button.view-switcher.gallery img{ + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; + filter: alpha(opacity=50); + opacity: .5; } #controls .button.sorting { @@ -67,6 +87,12 @@ border: 1px solid rgba(240, 240, 240, .9); } +#controls .button.view-switcher:hover { + background-color: rgba(255, 255, 255, .9); + color: #111; + border: 1px solid rgba(240, 240, 240, .9); +} + #controls .button.sorting.active-button { background-color: rgba(255, 255, 255, .9); color: #111; diff --git a/js/gallerybutton.js b/js/gallerybutton.js index 24d3a40f77..d645a39fa2 100644 --- a/js/gallerybutton.js +++ b/js/gallerybutton.js @@ -57,17 +57,12 @@ $(document).ready(function () { $('#fileList').on('updated', GalleryButton.onFileListUpdated); - // Toggle for opening files list as gallery view + // Button for opening files list as gallery view GalleryButton.button = - $('