Skip to content

[stable15] Add icon to go to the file associated to a room #1398

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

Merged
nickvergessen merged 3 commits into from
Dec 13, 2018
Merged

[stable15] Add icon to go to the file associated to a room #1398

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8c600b8
Remove unused template parameter
danxuliu Dec 12, 2018
ac690df
Add icon to go to the file associated to a room
danxuliu Dec 12, 2018
3b8826b
Use "text" icon for ".icon-file-white"
danxuliu Dec 13, 2018
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
47 changes: 45 additions & 2 deletions css/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@
}

.icon-file-white {
@include icon-color('file', 'filetypes', $color-white, 1, true);
@include icon-color('text', 'filetypes', $color-white, 1, true);
}

#app-navigation .favorite-mark {
Expand Down Expand Up @@ -661,9 +661,52 @@
*/
.detailCallInfoContainer,
.authorRow {
.room-name-container {
display: flex;

/* Prevent the room name from overlapping the button to close the
* sidebar. */
margin-right: 29px;

a {
opacity: .6;

&:hover,
&:focus,
&:active {
opacity: 1;
}

/* The container height is 42px (line height of 30px and bottom
* margin of 12px, both defined for h2 in the server), so clear the
* extra height of the link below the icon; this limits the
* clickable area to 44x44px, as otherwise it was too near the call
* button. */
margin-bottom: 5px;

.icon {
display: block;

width: 44px;
height: 44px;

background-size: 24px;

/* Pull up the icon slightly to align it vertically with the
* label, which has a line height of 30px (defined in the
* server). */
margin-top: -7px;
}
}
}

.room-name {
display: block;
margin-right: 29px;

/* Limit the room name to the container width and prevent it from
* wrapping the full label when using a flex display; this is needed for
* the edit button and the ellipsis in the name to work as expected. */
overflow: hidden;

.label {
white-space: nowrap;
Expand Down
18 changes: 16 additions & 2 deletions js/views/callinfoview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,14 @@
OCA.SpreedMe.Views = OCA.SpreedMe.Views || {};

var TEMPLATE =
'<div class="room-name"></div>' +
'<div class="room-name-container">' +
' <div class="room-name"></div>' +
' {{#if isRoomForFile}}' +
' <a class="file-link" href="{{fileLink}}" target="_blank" rel="noopener noreferrer" data-original-title="{{fileLinkTitle}}">' +
' <span class="icon icon-file"></span>' +
' </a>' +
' {{/if}}' +
'</div>' +
'<div class="call-controls-container">' +
' <div class="call-button"></div>' +
'{{#if canModerate}}' +
Expand Down Expand Up @@ -77,7 +84,9 @@
templateContext: function() {
var canModerate = this._canModerate();
return $.extend(this.model.toJSON(), {
isGuest: this.model.get('participantType') === 4,
isRoomForFile: this.model.get('objectType') === 'file',
fileLink: OC.generateUrl('/f/{fileId}', { fileId: this.model.get('objectId') }),
fileLinkTitle: t('spreed', 'Go to file'),
canModerate: canModerate,
canFullModerate: this._canFullModerate(),
isPublic: this.model.get('type') === 3,
Expand All @@ -88,6 +97,7 @@

ui: {
'roomName': 'div.room-name',
'fileLink': '.file-link',
'shareLinkOptions': '.share-link-options',
'clipboardButton': '.clipboard-button',
'linkCheckbox': '.link-checkbox',
Expand Down Expand Up @@ -223,6 +233,10 @@
title: (this.model.get('hasPassword')) ? t('spreed', 'Change password') : t('spreed', 'Set password')
});

// Set the body as the container to show the tooltip in front of the
// header.
this.ui.fileLink.tooltip({container: $('body')});

var self = this;
OC.registerMenu($(this.ui.passwordButton), $(this.ui.passwordMenu), function() {
$(self.ui.passwordInput).focus();
Expand Down