diff options
-rw-r--r-- | css/gallerybutton.css | 54 | ||||
-rw-r--r-- | css/styles.css | 38 | ||||
-rw-r--r-- | js/app.js | 12 | ||||
-rw-r--r-- | js/gallery.js | 19 | ||||
-rw-r--r-- | js/gallerybutton.js | 15 | ||||
-rw-r--r-- | js/galleryview.js | 5 | ||||
-rw-r--r-- | templates/part.content.php | 14 | ||||
-rw-r--r-- | templates/public.php | 14 |
8 files changed, 129 insertions, 42 deletions
diff --git a/css/gallerybutton.css b/css/gallerybutton.css index 78c9008c..5561be66 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 5c84a584..3a4a3035 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; @@ -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 396eea47..c79a30a5 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 f131572c..970cbde0 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 = $('<div id="openAsFileListButton" class="button">' + - '<img class="svg" src="' + OC.imagePath('core', 'actions/toggle-pictures.svg') + '"' + - 'alt="' + t('gallery', 'Picture view') + '"/>' + - '</div>'); + GalleryButton.button = + $('<div class="button view-switcher left-switch-button disabled-button">' + + '<img class="svg" src="' + OC.imagePath('core', 'actions/toggle-filelist.svg') + + '"' + + 'alt="' + t('gallery', 'Picture view') + '"/>' + + '</div>' + + '<div id="gallery-button" class="button view-switcher right-switch-button inactive-button">' + + '<img class="svg" src="' + OC.imagePath('core', 'actions/toggle-pictures.svg') + + '"' + + 'alt="' + t('gallery', 'Picture view') + '"/>' + + '</div>'); GalleryButton.button.click(function () { window.location.href = GalleryButton.url; diff --git a/js/galleryview.js b/js/galleryview.js index 8872d74b..9436562e 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 33db81ad..f7187f48 100644 --- a/templates/part.content.php +++ b/templates/part.content.php @@ -35,7 +35,6 @@ style( [ 'styles', 'mobile', - 'gallerybutton', 'github-markdown', 'slideshow' ] @@ -43,18 +42,23 @@ style( ?> <div id="controls"> <div id='breadcrumbs'></div> - <!-- toggle for opening shared picture view as file list --> - <div id="openAsFileListButton" class="button"> + <!-- toggle for opening the current album as file list --> + <div id="filelist-button" class="button view-switcher left-switch-button inactive-button"> <img class="svg" src="<?php print_unescaped( image_path('core', 'actions/toggle-filelist.svg') ); ?>" alt="<?php p($l->t('File list')); ?>"/> </div> - <div id="sort-name-button" class="button left-sort-button"> + <div class="button view-switcher right-switch-button disabled-button"> + <img class="svg" src="<?php print_unescaped( + image_path('core', 'actions/toggle-pictures.svg') + ); ?>" alt="<?php p($l->t('Picture view')); ?>"/> + </div> + <div id="sort-name-button" class="button sorting left-switch-button"> <img class="svg" src="<?php print_unescaped( image_path($_['appName'], 'nameasc.svg') ); ?>" alt="<?php p($l->t('Sort by name')); ?>"/> </div> - <div id="sort-date-button" class="button right-sort-button"> + <div id="sort-date-button" class="button sorting right-switch-button"> <img class="svg" src="<?php print_unescaped( image_path($_['appName'], 'dateasc.svg') ); ?>" alt="<?php p($l->t('Sort by date')); ?>"/> diff --git a/templates/public.php b/templates/public.php index f33c7155..f497aa91 100644 --- a/templates/public.php +++ b/templates/public.php @@ -103,18 +103,24 @@ style( <div id="app"> <div id="controls"> <div id="breadcrumbs"></div> - <!-- toggle for opening shared picture view as file list --> - <div id="openAsFileListButton" class="button"> + <!-- toggle for opening the current album as file list --> + <div id="filelist-button" + class="button view-switcher left-switch-button inactive-button "> <img class="svg" src="<?php print_unescaped( image_path('core', 'actions/toggle-filelist.svg') ); ?>" alt="<?php p($l->t('File list')); ?>"/> </div> - <div id="sort-name-button" class="button left-sort-button"> + <div class="button view-switcher right-switch-button disabled-button"> + <img class="svg" src="<?php print_unescaped( + image_path('core', 'actions/toggle-pictures.svg') + ); ?>" alt="<?php p($l->t('Picture view')); ?>"/> + </div> + <div id="sort-name-button" class="button sorting left-switch-button"> <img class="svg" src="<?php print_unescaped( image_path($_['appName'], 'nameasc.svg') ); ?>" alt="<?php p($l->t('Sort by name')); ?>"/> </div> - <div id="sort-date-button" class="button right-sort-button"> + <div id="sort-date-button" class="button sorting right-switch-button"> <img class="svg" src="<?php print_unescaped( image_path($_['appName'], 'dateasc.svg') ); ?>" alt="<?php p($l->t('Sort by date')); ?>"/> |