diff --git a/css/gallerybutton.css b/css/gallerybutton.css index 047b6621e5..9276982a52 100644 --- a/css/gallerybutton.css +++ b/css/gallerybutton.css @@ -1,16 +1,13 @@ -/* Toggle for opening the files list in the Gallery app */ +/* Gallery buttons design */ + #controls .button.view-switcher { margin-top: 5px; width: 40px; 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 { @@ -18,9 +15,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; @@ -28,11 +26,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; @@ -40,7 +46,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; } @@ -49,3 +56,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 29c4fe9f2c..f98ccbe93b 100644 --- a/css/styles.css +++ b/css/styles.css @@ -27,57 +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 { @@ -246,10 +197,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 b4298e63a2..70699194e9 100644 --- a/js/gallery.js +++ b/js/gallery.js @@ -197,6 +197,10 @@ Gallery.switchToFilesView = function (event) { } 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 b24566e79b..e4d19f4e1f 100644 --- a/js/gallerybutton.js +++ b/js/gallerybutton.js @@ -55,6 +55,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 0c7f764b5e..14fde28972 100644 --- a/templates/part.content.php +++ b/templates/part.content.php @@ -32,7 +32,8 @@ 'styles', 'mobile', 'github-markdown', - 'slideshow' + 'slideshow', + 'gallerybutton' ] ); ?> diff --git a/templates/public.php b/templates/public.php index 01f2672564..3315951f8b 100644 --- a/templates/public.php +++ b/templates/public.php @@ -34,7 +34,8 @@ 'public', 'gallerybutton', 'github-markdown', - 'slideshow' + 'slideshow', + 'gallerybutton' ] );