Skip to content
This repository has been archived by the owner on Nov 1, 2020. It is now read-only.

Fixed gallery button insertion script and design fix #336

Merged
merged 7 commits into from
Jan 3, 2018
Merged

Fixed gallery button insertion script and design fix #336

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1089b8c
Fixed gallery button insertion script and design fix
skjnldsv Dec 13, 2017
27f4c4e
Fixed multiplde design flaws
skjnldsv Dec 13, 2017
a418fad
Fix CSS to work around wrong gallery DOM structure
MorrisJobke Dec 20, 2017
55dd750
Fix button and breadcrumb margins/paddings
Dec 20, 2017
c44d7f0
Fix public sharing view
Dec 20, 2017
a82ba8f
Fix a bug in the "ugly hack" when Home is the last breadcrumb
Dec 20, 2017
301d8cf
Fix inconsistent hover behaviour for the gallery button
Dec 20, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 1 addition & 15 deletions css/gallerybutton.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,10 @@
/* Gallery buttons design */
#controls .left {
float: left;
}

#controls .button.view-switcher {
float: right;
margin-top: 5px;
padding: 6px 11px;
margin-left: auto;
}

#controls .button.view-switcher.gallery {
float: none;
margin-right: 4px;
padding: 9px 11px;
}
Expand All @@ -28,15 +22,12 @@

#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;
}

#controls .button.right-switch-button {
float: right;
display: inline;
border-radius: 0 3px 3px 0;
margin-left: -1px;
Expand Down Expand Up @@ -68,11 +59,6 @@
border: 1px solid rgba(240, 240, 240, .9);
}

#controls .button.view-switcher:hover {
color: #111;
border: 1px solid rgba(240, 240, 240, .9);
}

/* Original Flip CSS by David Walsh
http://davidwalsh.name/css-flip*/

Expand Down
5 changes: 5 additions & 0 deletions css/public.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,3 +58,8 @@ html.ie #content {
#gallery.hascontrols {
padding-bottom: 0;
}

#controls .buttons {
display: flex;
flex: 1 1;
}
32 changes: 21 additions & 11 deletions css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,9 @@ body:after {
content: url("../img/nameasc.svg") url("../img/namedes.svg") url("../img/dateasc.svg") url("../img/datedes.svg");
}

#breadcrumbs {
float: left;
}

.breadcrumbs-droppable {

#controls {
width: 100%;
top: 45px;
}

.breadcrumbs-droppable-hover {
Expand All @@ -20,17 +17,30 @@ body:after {
transition: transform .1s ease-in;
}

/* Two ugly hacks to fix breadcrumbs in Gallery */
div.crumb:not(:first-child) {
position: relative;
top: -3px;
}

div.crumb.last {
margin-right: 10px;
}

div.crumb.last a {
cursor: default;
}

#controls .button {
margin-top: 5px;
width: 40px;
}

#controls > .right {
float: right;
#controls .button:not(:last-child) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this should go to nextcloud/server#7478

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gallery uses a lot of similar styles but does not includes any of them (yes, we need to rebuild the entire app), therefor, there are a lot of multiples files/properties used.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

😢

margin-right: 3px;
}

#controls .actions > .right {
margin-left: auto;
}

#album-info-button {
Expand Down Expand Up @@ -70,6 +80,8 @@ div.crumb.last a {
}

#content-wrapper {
position: relative;
padding: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-webkit-transition: background-color 1s linear;
Expand All @@ -80,10 +92,8 @@ div.crumb.last a {
position: relative;
overflow: hidden;
text-align: justify;
top: 45px;
padding-bottom: 10px;
margin-bottom: 45px;
margin-top: 0;
}

#gallery .row {
Expand Down
6 changes: 4 additions & 2 deletions css/upload.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
}

.actions {
float: left;
padding: 5px;
}

.actions input, .actions button, .actions .button {
Expand All @@ -34,6 +34,8 @@
.actions.creatable {
position: relative;
z-index: -30;
display: flex;
flex: 1 1;
}

.newFileMenu {
Expand Down Expand Up @@ -71,4 +73,4 @@
padding-left: 5px;
color: #000;
padding: 0;
}
}
2 changes: 1 addition & 1 deletion js/gallerybutton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ $(document).ready(function () {
window.location.href = GalleryButton.url;
});

$('#controls').prepend(GalleryButton.button);
$('#controls .actions').append(GalleryButton.button);
}
}
);
100 changes: 50 additions & 50 deletions templates/part.content.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,30 +38,30 @@
?>
<div id="controls">
<div id='breadcrumbs'></div>
<div class="left">
<!-- sorting buttons -->
<div id="sort-date-button" class="button sorting right-switch-button">
<div class="flipper">
<img class="svg asc front" src="<?php print_unescaped(
image_path($_['appName'], 'dateasc.svg')
); ?>" alt="<?php p($l->t('Sort by date')); ?>"/>
<img class="svg des back" src="<?php print_unescaped(
image_path($_['appName'], 'datedes.svg')
); ?>" alt="<?php p($l->t('Sort by date')); ?>"/>
<div class="actions creatable">
<div class="left">
<!-- sorting buttons -->
<div id="sort-name-button" class="button sorting left-switch-button">
<div class="flipper">
<img class="svg asc front" src="<?php print_unescaped(
image_path($_['appName'], 'nameasc.svg')
); ?>" alt="<?php p($l->t('Sort by name')); ?>"/>
<img class="svg des back" src="<?php print_unescaped(
image_path($_['appName'], 'namedes.svg')
); ?>" alt="<?php p($l->t('Sort by name')); ?>"/>
</div>
</div>
</div>
<div id="sort-name-button" class="button sorting left-switch-button">
<div class="flipper">
<img class="svg asc front" src="<?php print_unescaped(
image_path($_['appName'], 'nameasc.svg')
); ?>" alt="<?php p($l->t('Sort by name')); ?>"/>
<img class="svg des back" src="<?php print_unescaped(
image_path($_['appName'], 'namedes.svg')
); ?>" alt="<?php p($l->t('Sort by name')); ?>"/>
<div id="sort-date-button" class="button sorting right-switch-button">
<div class="flipper">
<img class="svg asc front" src="<?php print_unescaped(
image_path($_['appName'], 'dateasc.svg')
); ?>" alt="<?php p($l->t('Sort by date')); ?>"/>
<img class="svg des back" src="<?php print_unescaped(
image_path($_['appName'], 'datedes.svg')
); ?>" alt="<?php p($l->t('Sort by date')); ?>"/>
</div>
</div>
</div>
</div>
<div class="actions creatable">
<div id="uploadprogresswrapper">
<div id="uploadprogressbar"></div>
<button class="stop icon-close" style="display:none">
Expand All @@ -70,37 +70,37 @@
</span>
</button>
</div>
<div class="right">
<!-- sharing button -->
<div id="shared-button" class="button">
<img class="svg" src="<?php print_unescaped(
image_path('core', 'actions/share.svg')
); ?>" alt="<?php p($l->t("Share")); ?>"/>
</div>
<a class="share" data-item-type="folder" data-item=""
title="<?php p($l->t("Share")); ?>"
data-possible-permissions="31"></a>
<!-- info button -->
<div id="album-info-button" class="button">
<span class="ribbon black"></span>
<img class="svg" src="<?php print_unescaped(
image_path('core', 'actions/info.svg')
); ?>" alt="<?php p($l->t('Album information')); ?>"/>
</div>
<div class="album-info-container">
<div class="album-info-loader"></div>
<div class="album-info-content markdown-body"></div>
</div>
<!-- button for opening the current album as file list -->
<div id="filelist-button" class="button view-switcher gallery">
<div id="button-loading" class="hidden"></div>
<img class="svg" src="<?php print_unescaped(
image_path('core', 'actions/toggle-filelist.svg')
); ?>" alt="<?php p($l->t('File list')); ?>"/>
</div>
</div>
</div>
<div id="file_action_panel"></div>
<span class="right">
<!-- sharing button -->
<div id="shared-button" class="button">
<img class="svg" src="<?php print_unescaped(
image_path('core', 'actions/share.svg')
); ?>" alt="<?php p($l->t("Share")); ?>"/>
</div>
<a class="share" data-item-type="folder" data-item=""
title="<?php p($l->t("Share")); ?>"
data-possible-permissions="31"></a>
<!-- info button -->
<div id="album-info-button" class="button">
<span class="ribbon black"></span>
<img class="svg" src="<?php print_unescaped(
image_path('core', 'actions/info.svg')
); ?>" alt="<?php p($l->t('Album information')); ?>"/>
</div>
<div class="album-info-container">
<div class="album-info-loader"></div>
<div class="album-info-content markdown-body"></div>
</div>
<!-- button for opening the current album as file list -->
<div id="filelist-button" class="button view-switcher gallery">
<div id="button-loading" class="hidden"></div>
<img class="svg" src="<?php print_unescaped(
image_path('core', 'actions/toggle-filelist.svg')
); ?>" alt="<?php p($l->t('File list')); ?>"/>
</div>
</span>
</div>
<div id="gallery" data-allow-public-upload="<?php p($_['publicUploadEnabled'])?>" class="hascontrols"></div>
<div id="emptycontent" class="hidden"></div>
Expand Down
26 changes: 12 additions & 14 deletions templates/public.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,17 +74,7 @@ class="icon-confirm svg" disabled></button>
<div id="controls">
<div id="breadcrumbs"></div>
<!-- sorting buttons -->
<div class="left">
<div id="sort-date-button" class="button sorting right-switch-button">
<div class="flipper">
<img class="svg asc front" src="<?php print_unescaped(
image_path($_['appName'], 'dateasc.svg')
); ?>" alt="<?php p($l->t('Sort by date')); ?>"/>
<img class="svg des back" src="<?php print_unescaped(
image_path($_['appName'], 'datedes.svg')
); ?>" alt="<?php p($l->t('Sort by date')); ?>"/>
</div>
</div>
<div class="buttons">
<div id="sort-name-button" class="button sorting left-switch-button">
<div class="flipper">
<img class="svg asc front" src="<?php print_unescaped(
Expand All @@ -95,8 +85,16 @@ class="icon-confirm svg" disabled></button>
); ?>" alt="<?php p($l->t('Sort by name')); ?>"/>
</div>
</div>
</div>
<span class="right">
<div id="sort-date-button" class="button sorting right-switch-button">
<div class="flipper">
<img class="svg asc front" src="<?php print_unescaped(
image_path($_['appName'], 'dateasc.svg')
); ?>" alt="<?php p($l->t('Sort by date')); ?>"/>
<img class="svg des back" src="<?php print_unescaped(
image_path($_['appName'], 'datedes.svg')
); ?>" alt="<?php p($l->t('Sort by date')); ?>"/>
</div>
</div>
<div id="album-info-button" class="button">
<span class="ribbon black"></span>
<img class="svg" src="<?php print_unescaped(
Expand All @@ -114,7 +112,7 @@ class="icon-confirm svg" disabled></button>
image_path('core', 'actions/toggle-filelist.svg')
); ?>" alt="<?php p($l->t('Picture view')); ?>"/>
</div>
</span>
</div>
</div>
<div id="gallery" class="hascontrols"
data-requesttoken="<?php p($_['requesttoken']) ?>"
Expand Down