Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Display changes in file versions tab view and detailsView #26511

Merged
merged 3 commits into from
Nov 2, 2016
Merged

Display changes in file versions tab view and detailsView #26511

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
80a90f0
Display changes in file versions tab view and detailsView
mjobst-necls Oct 29, 2016
863c339
versions tab enhancements
mjobst-necls Nov 2, 2016
999db0f
Replaced spaces with tabs
mjobst-necls Nov 2, 2016
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
8 changes: 8 additions & 0 deletions apps/files/css/detailsView.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,10 +98,18 @@
#app-sidebar .file-details {
color: #999;
}

#app-sidebar .file-details img {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
opacity: .5;
}

#app-sidebar .file-details img:hover,
#app-sidebar .file-details img:focus{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
opacity: 1;
}

#app-sidebar .action-favorite {
vertical-align: text-bottom;
padding: 10px;
Expand Down
33 changes: 27 additions & 6 deletions apps/files_versions/css/versions.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
.versionsTabView .clear-float {
clear: both;
}

.versionsTabView li {
width: 100%;
cursor: default;
Expand All @@ -12,40 +13,60 @@
border-bottom: none;
}

.versionsTabView li > * {
.versionsTabView a,
.versionsTabView div > span {
vertical-align: middle;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: .5;
}

.versionsTabView li > a,
.versionsTabView li > span {
.versionsTabView li a{
padding: 15px 10px 11px;
}

.versionsTabView li > *:hover,
.versionsTabView li > *:focus {
.versionsTabView a:hover,
.versionsTabView a:focus {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}

.versionsTabView .preview-container {
display: inline-block;
vertical-align: top;
}

.versionsTabView img {
cursor: pointer;
padding-right: 4px;
}

.versionsTabView img.preview {
cursor: default;
opacity: 1;
}

.versionsTabView .version-container {
display: inline-block;
}

.versionsTabView .versiondate {
min-width: 100px;
vertical-align: super;
}

.versionsTabView .version-details {
text-align: left;
}

.versionsTabView .version-details > span {
padding: 0 10px;
}

.versionsTabView .version-details > .size {
vertical-align: super;
Copy link
Contributor

Choose a reason for hiding this comment

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

Not sure why "super" here ?
On Chromium for me the size appears under the date but not as superscript. It does look good already, so not sure why. If you wanted to shift it up a bit you could try vertical-align: middle and set a different line-height.

}

.versionsTabView .revertVersion {
cursor: pointer;
float: right;
Expand Down
25 changes: 21 additions & 4 deletions apps/files_versions/js/versionstabview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,27 @@

(function() {
var TEMPLATE_ITEM =
'<li data-revision="{{timestamp}}">' +
'<img class="preview" src="{{previewUrl}}"/>' +
'<a href="{{downloadUrl}}" class="downloadVersion"><img src="{{downloadIconUrl}}" />' +
'<span class="versiondate has-tooltip" title="{{formattedTimestamp}}">{{relativeTimestamp}}</span>' +
'<li data-revision="{{timestamp}}">' +
Copy link
Contributor

Choose a reason for hiding this comment

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

Please use tabs instead of spaces in all the changed lines.

'<div>' +
'<div class="preview-container">' +
'<img class="preview" src="{{previewUrl}}"/>' +
'</div>' +
'<div class="version-container">' +
'<div>' +
'<a href="{{downloadUrl}}" class="downloadVersion"><img src="{{downloadIconUrl}}" />' +
'<span class="versiondate has-tooltip" title="{{formattedTimestamp}}">{{relativeTimestamp}}</span>' +
'</a>' +
'</div>' +
'{{#hasDetails}}' +
'<div class="version-details">' +
'<span class="size has-tooltip" title="{{altSize}}">{{humanReadableSize}}</span>' +
'</div>' +
'{{/hasDetails}}' +
'</div>' +
'{{#canRevert}}' +
'<a href="#" class="revertVersion" title="{{revertLabel}}"><img src="{{revertIconUrl}}" /></a>' +
'{{/canRevert}}' +
'</div>' +
'</li>';

var TEMPLATE =
Expand Down Expand Up @@ -180,9 +193,13 @@

_formatItem: function(version) {
var timestamp = version.get('timestamp') * 1000;
var size = version.has('size') ? version.get('size') : 0;
return _.extend({
formattedTimestamp: OC.Util.formatDate(timestamp),
relativeTimestamp: OC.Util.relativeModifiedDate(timestamp),
humanReadableSize: OC.Util.humanFileSize(size, true),
altSize: n('files', '%n byte', '%n bytes', size),
hasDetails: version.has('size'),
Copy link
Contributor

Choose a reason for hiding this comment

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

seems you missed some tabs here

Copy link
Contributor Author

Choose a reason for hiding this comment

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

omg ^^. you're right ....

downloadUrl: version.getDownloadUrl(),
downloadIconUrl: OC.imagePath('core', 'actions/download'),
revertIconUrl: OC.imagePath('core', 'actions/history'),
Expand Down