Merge pull request #2136 from nextcloud/sharing-layout

Sharing layout fixes
This commit is contained in:
Jan-Christoph Borchardt 2016-11-18 00:40:46 +01:00 committed by GitHub
commit 6fa5c18a79
9 changed files with 47 additions and 33 deletions

View file

@ -19,8 +19,8 @@
}
#app-sidebar .mainFileInfoView .permalink {
margin-left: 10px;
opacity: .5;
padding: 6px 10px;
vertical-align: text-top;
}
#app-sidebar .mainFileInfoView .permalink-field>input {
clear: both;

View file

@ -61,9 +61,9 @@ table td.filename .nametext .innernametext {
max-width: 50%;
}
/* ellipsis on user names in share sidebar */
/* ellipsis on user names in share sidebar, less on mobile */
#shareWithList .username {
max-width: 80px !important;
max-width: 80px !important;
}
/* proper notification area for multi line messages */

View file

@ -15,7 +15,7 @@
'<div class="fileName">' +
'<h3 title="{{name}}" class="ellipsis">{{name}}</h3>' +
'<a class="permalink" href="{{permalink}}" title="{{permalinkTitle}}">' +
'<span class="icon icon-public"></span>' +
'<span class="icon icon-clippy"></span>' +
'<span class="hidden-visually">{{permalinkTitle}}</span>' +
'</a>' +
'</div>' +
@ -157,7 +157,7 @@
starAltText: isFavorite ? t('files', 'Favorited') : t('files', 'Favorite'),
starIcon: OC.imagePath('core', isFavorite ? 'actions/starred' : 'actions/star'),
permalink: this._makePermalink(this.model.get('id')),
permalinkTitle: t('files', 'Local link')
permalinkTitle: t('files', 'Copy local link')
}));
// TODO: we really need OC.Previews

View file

@ -2,7 +2,10 @@
min-height: 100px;
}
.shareTabView .oneline { white-space: nowrap; }
.shareTabView .oneline {
white-space: nowrap;
position: relative;
}
.shareTabView .shareWithLoading {
padding-left: 10px;
@ -12,7 +15,10 @@
.shareTabView .shareWithRemoteInfo,
.shareTabView .clipboardButton {
padding-left: 10px;
position: absolute;
right: -7px;
top: -4px;
padding: 14px;
}
.shareTabView label {
@ -24,15 +30,14 @@
vertical-align: middle;
}
.shareTabView input[type="text"],
.shareTabView input[type="password"] {
width: 94%;
margin-left: 0;
}
.shareTabView input[type="text"].shareWithField,
.shareTabView input[type="text"].emailField,
.shareTabView input[type="text"].linkText {
width: 80%;
.shareTabView input[type="text"].linkText,
.shareTabView input[type="password"] {
width: 100%;
box-sizing: border-box;
padding-right: 32px;
text-overflow: ellipsis;
}
.shareTabView form {
@ -54,16 +59,21 @@
}
#shareWithList .unshare img, #shareWithList .showCruds img {
vertical-align:text-bottom; /* properly align icons */
vertical-align: text-bottom; /* properly align icons */
}
#shareWithList .sharingOptionsGroup .icon-more,
#shareWithList .unshare .icon-delete {
vertical-align: sub;
#shareWithList .sharingOptionsGroup .icon-more {
padding: 7px;
vertical-align: middle;
opacity: .5;
}
#shareWithList .unshare {
padding: 0;
padding: 4px;
vertical-align: text-bottom;
}
#shareWithList .unshare .icon {
vertical-align: text-top;
}
#shareWithList .unshare .icon-delete {
@ -71,21 +81,23 @@
background-position-x: 0;
}
#shareWithList label input[type=checkbox]{
#shareWithList label input[type=checkbox] {
margin-left: 0;
position: relative;
}
#shareWithList .username{
#shareWithList .username {
padding-right: 8px;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 254px;
max-width: 110px;
display: inline-block;
overflow: hidden;
vertical-align: middle;
}
#shareWithList li label{
#shareWithList li label {
padding: 6px;
margin-right: 8px;
vertical-align: text-top;
}
.shareTabView .icon-loading-small {

View file

@ -632,7 +632,7 @@ em {
clear: left;
}
.tabsContainer .tab {
padding: 15px;
padding: 0 15px 15px;
}
/* popover menu styles (use together with "bubble" class) */

View file

@ -144,6 +144,10 @@ img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading-
background-image: url('../img/actions/checkmark-color.svg?v=1');
}
.icon-clippy {
background-image: url('../img/actions/clippy.svg?v=2');
}
.icon-close {
background-image: url('../img/actions/close.svg?v=1');
}
@ -422,7 +426,3 @@ img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading-
.icon-picture {
background-image: url('../img/places/picture.svg?v=1');
}
.icon-clippy {
background-image: url('../img/actions/clippy.svg?v=1');
}

View file

@ -82,8 +82,8 @@
}
#shareWithList .sharingOptionsGroup .popovermenu {
right: -22px;
top: 30px;
right: -14px;
top: 40px;
}
#shareWithList .shareOption {

View file

@ -1 +1,4 @@
<svg height="1024" width="896" xmlns="http://www.w3.org/2000/svg"><path opacity=".5" d="M704 896H64V320h640v192h64V192c0-35-29-64-64-64H512C512 57 455 0 384 0S256 57 256 128H64c-35 0-64 29-64 64v704c0 35 29 64 64 64h640c35 0 64-29 64-64V768h-64v128zM192 192h64c35 0 64-29 64-64s29-64 64-64 64 29 64 64 32 64 64 64h64c31 0 64 29 64 64H128c0-39 28-64 64-64zm-64 512h128v-64H128v64zm448-128V448L320 640l256 192V704h320V576H576zM128 832h192v-64H128v64zm320-448H128v64h320v-64zM256 512H128v64h128v-64z"/></svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.1" viewBox="0 0 16 16">
<path opacity=".5" d="m13 15h-11l0.0005-10h11v3.0002l1-0.0004 0.0005-5.0001c0.000058-0.5834-0.4165-1.0002-1.0005-1.0001l-3.467 0.0005c0.0008-1.183-0.9492-2.0001-2.1325-2.0001s-2.1333 0.8171-2.1333 2.0004h-3.2c-0.5834 0-1.0662 0.4166-1.0662 0.9999l-0.0005 12c-0.0000243 0.584 0.4833 1 1.0667 1l10.933-0.0005c0.584-0.001 1-0.416 1-1v-3h-1zm-8.8005-12h1.0672c0.5833 0 1.0666-0.4162 1.0666-0.9996 0-0.5833 0.4834-0.9337 1.0667-0.9337s1.0667 0.3504 1.0667 0.9337c0 0.5834 0.5333 0.9996 1.0666 0.9996h1.2667c0.517 0 1.2 0.4166 1.2 1h-9c-0.0004-0.65 0.5988-1 1.1988-1zm-1.1995 8h2v-1h-2zm7.9998-2v-2l-4 3 3.9998 3v-2l5.0002-0.00005v-2l-4.9998-0.00005zm-8 4h4v-1h-4zm6-7h-6v1h6zm-3 2h-3v1h3z"/>
</svg>

Before

Width:  |  Height:  |  Size: 505 B

After

Width:  |  Height:  |  Size: 848 B

View file

@ -78,7 +78,6 @@
'</ul>' +
'</div>' +
'{{/unless}}' +
'<a href="#" class="unshare"><span class="icon-loading-small hidden"></span><span class="icon icon-delete"></span><span class="hidden-visually">{{unshareLabel}}</span></a>' +
'</span>' +
'</li>' +
'{{/each}}' +