mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #8575 from nextcloud/new-folder-button 

Updated popover rules to allow form inputs and added input submit for…
This commit is contained in:
Roeland Jago Douma 2018-03-08 21:09:44 +01:00 committed by GitHub
parent 633d0581a3 cee5be6ff2
commit 7e374200c4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 179 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
apps/files/css/files.scss
View File

@ -38,10 +38,11 @@
font-weight: normal; font-weight: normal;
} }
.newFileMenu .error, #fileList .error { .newFileMenu .error,
.newFileMenu .error + .icon-confirm,
#fileList .error {
color: $color-error; color: $color-error;
border-color: $color-error; border-color: $color-error;
box-shadow: 0 0 6px #f8b9b7;
} }
/* FILE TABLE */ /* FILE TABLE */
@ -696,14 +697,6 @@ table.dragshadow td.size {
z-index: 1001; z-index: 1001;
} }
.newFileMenu .filenameform {
display: inline-block;
}
.newFileMenu .filenameform input {
margin: 2px 0;
}
#filestable .filename .action .icon, #filestable .filename .action .icon,
#filestable .selectedActions a .icon, #filestable .selectedActions a .icon,
#filestable .filename .favorite-mark .icon, #filestable .filename .favorite-mark .icon,

15
apps/files/js/newfilemenu.js
View File

@ -26,8 +26,8 @@
var TEMPLATE_FILENAME_FORM = var TEMPLATE_FILENAME_FORM =
'<form class="filenameform">' + '<form class="filenameform">' +
'<label class="hidden-visually" for="{{cid}}-input-{{fileType}}">{{fileName}}</label>' +
'<input id="{{cid}}-input-{{fileType}}" type="text" value="{{fileName}}" autocomplete="off" autocapitalize="off">' + '<input id="{{cid}}-input-{{fileType}}" type="text" value="{{fileName}}" autocomplete="off" autocapitalize="off">' +
'<input type="submit" value=" " class="icon-confirm" />'
'</form>'; '</form>';
/** /**
@ -116,7 +116,7 @@
} }
if ($target.find('form').length) { if ($target.find('form').length) {
$target.find('input').focus(); $target.find('input[type=\'text\']').focus();
return; return;
} }
@ -138,7 +138,8 @@
$target.append($form); $target.append($form);
// here comes the OLD code // here comes the OLD code
var $input = $form.find('input'); var $input = $form.find('input[type=\'text\']');
var $submit = $form.find('input[type=\'submit\']');
var lastPos; var lastPos;
var checkInput = function () { var checkInput = function () {
@ -155,7 +156,7 @@
} }
} catch (error) { } catch (error) {
$input.attr('title', error); $input.attr('title', error);
$input.tooltip({placement: 'right', trigger: 'manual'}); $input.tooltip({placement: 'right', trigger: 'manual', 'container': '.newFileMenu'});
$input.tooltip('fixTitle'); $input.tooltip('fixTitle');
$input.tooltip('show'); $input.tooltip('show');
$input.addClass('error'); $input.addClass('error');
@ -171,6 +172,12 @@
} }
}); });
$submit.click(function(event) {
event.stopPropagation();
event.preventDefault();
$form.submit();
});
$input.focus(); $input.focus();
// pre select name up to the extension // pre select name up to the extension
lastPos = newName.lastIndexOf('.'); lastPos = newName.lastIndexOf('.');

3
apps/files/tests/js/newfilemenuSpec.js
View File

@ -67,7 +67,8 @@ describe('OCA.Files.NewFileMenu', function() {
}); });
it('sets default text in field', function() { it('sets default text in field', function() {
expect($input.length).toEqual(1); // text + submit
expect($input.length).toEqual(2);
expect($input.val()).toEqual('New folder'); expect($input.val()).toEqual('New folder');
}); });
it('prevents entering invalid file names', function() { it('prevents entering invalid file names', function() {

19
apps/files_sharing/css/public.scss
View File

@ -105,25 +105,8 @@ thead {
border-color: rgba(0,0,0,0.3) !important; border-color: rgba(0,0,0,0.3) !important;
} }
/* within #save */ #share-menu input[type='text'] {
#save .save-form {
position: relative;
margin-right: -10px;
}
#remote_address {
width: 200px; width: 200px;
margin-right: 4px;
height: 31px;
}
#save-button-confirm {
position: absolute;
background-color: transparent;
border: none;
margin: 0;
right: 0px;
height: 40px;
} }
#public-upload .avatardiv { #public-upload .avatardiv {

46
apps/files_sharing/js/public.js
View File

@ -271,19 +271,13 @@ OCA.Sharing.PublicApp = {
}); });
$('#remote_address').on("keyup paste", function() { $('#remote_address').on("keyup paste", function() {
if ($(this).val() === '') { if ($(this).val() === '' || $('#save > .icon.icon-loading-small').length > 0) {
$('#save-button-confirm').prop('disabled', true); $('#save-button-confirm').prop('disabled', true);
} else { } else {
$('#save-button-confirm').prop('disabled', false); $('#save-button-confirm').prop('disabled', false);
} }
}); });
$('#save #save-button').click(function () {
$(this).hide();
$('.save-form').css('display', 'inline');
$('#remote_address').focus();
});
// legacy // legacy
window.FileList = this.fileList; window.FileList = this.fileList;
}, },
@ -329,6 +323,7 @@ OCA.Sharing.PublicApp = {
*/ */
_legacyCreateFederatedShare: function (remote, token, owner, ownerDisplayName, name, isProtected) { _legacyCreateFederatedShare: function (remote, token, owner, ownerDisplayName, name, isProtected) {
var self = this;
var location = window.location.protocol + '//' + window.location.host + OC.webroot; var location = window.location.protocol + '//' + window.location.host + OC.webroot;
if(remote.substr(-1) !== '/') { if(remote.substr(-1) !== '/') {
@ -346,6 +341,7 @@ OCA.Sharing.PublicApp = {
// this check needs to happen on the server due to the Content Security Policy directive // this check needs to happen on the server due to the Content Security Policy directive
$.get(OC.generateUrl('apps/files_sharing/testremote'), {remote: remote}).then(function (protocol) { $.get(OC.generateUrl('apps/files_sharing/testremote'), {remote: remote}).then(function (protocol) {
if (protocol !== 'http' && protocol !== 'https') { if (protocol !== 'http' && protocol !== 'https') {
self._toggleLoading();
OC.dialogs.alert(t('files_sharing', 'No compatible server found at {remote}', {remote: remote}), OC.dialogs.alert(t('files_sharing', 'No compatible server found at {remote}', {remote: remote}),
t('files_sharing', 'Invalid server URL')); t('files_sharing', 'Invalid server URL'));
} else { } else {
@ -355,30 +351,30 @@ OCA.Sharing.PublicApp = {
} }
}, },
_createFederatedShare: function (remote, token, owner, ownerDisplayName, name, isProtected) { _toggleLoading: function() {
var loading = $('#save > .icon.icon-loading-small').length === 0;
var toggleLoading = function() { if (loading) {
var iconClass = $('#save-button-confirm').attr('class'); $('#save > .icon-external')
var loading = iconClass.indexOf('icon-loading-small') !== -1; .removeClass("icon-external")
if(loading) {
$('#save-button-confirm')
.removeClass("icon-loading-small")
.addClass("icon-confirm");
}
else {
$('#save-button-confirm')
.removeClass("icon-confirm")
.addClass("icon-loading-small"); .addClass("icon-loading-small");
$('#save #save-button-confirm').prop("disabled", true);
} else {
$('#save > .icon-loading-small')
.addClass("icon-external")
.removeClass("icon-loading-small");
$('#save #save-button-confirm').prop("disabled", false);
} }
}; },
toggleLoading(); _createFederatedShare: function (remote, token, owner, ownerDisplayName, name, isProtected) {
var self = this;
this._toggleLoading();
if (remote.indexOf('@') === -1) { if (remote.indexOf('@') === -1) {
this._legacyCreateFederatedShare(remote, token, owner, ownerDisplayName, name, isProtected); this._legacyCreateFederatedShare(remote, token, owner, ownerDisplayName, name, isProtected);
toggleLoading();
return; return;
} }
@ -402,7 +398,7 @@ OCA.Sharing.PublicApp = {
function (jqXHR) { function (jqXHR) {
OC.dialogs.alert(JSON.parse(jqXHR.responseText).message, OC.dialogs.alert(JSON.parse(jqXHR.responseText).message,
t('files_sharing', 'Failed to add the public link to your Nextcloud')); t('files_sharing', 'Failed to add the public link to your Nextcloud'));
toggleLoading(); self._toggleLoading();
} }
); );
} }

14
apps/files_sharing/lib/Template/ExternalShareMenuAction.php
View File

@ -57,12 +57,16 @@ class ExternalShareMenuAction extends SimpleMenuAction {
return '<li>' . return '<li>' .
'<a id="save" data-protected="false" data-owner-display-name="' . Util::sanitizeHTML($this->displayname) . '" data-owner="' . Util::sanitizeHTML($this->owner) . '" data-name="' . Util::sanitizeHTML($this->shareName) . '">' . '<a id="save" data-protected="false" data-owner-display-name="' . Util::sanitizeHTML($this->displayname) . '" data-owner="' . Util::sanitizeHTML($this->owner) . '" data-name="' . Util::sanitizeHTML($this->shareName) . '">' .
'<span class="icon ' . Util::sanitizeHTML($this->getIcon()) . '"></span>' . '<span class="icon ' . Util::sanitizeHTML($this->getIcon()) . '"></span>' .
'<span id="save-button">' . Util::sanitizeHTML($this->getLabel()) . '</span>' . '<label for="remote_address">' . Util::sanitizeHTML($this->getLabel()) . '</label>' .
'<form class="save-form hidden" action="#">' .
'<input type="text" id="remote_address" placeholder="user@yourNextcloud.org">' .
'<button id="save-button-confirm" class="icon-confirm svg" disabled=""></button>' .
'</form>' .
'</a>' . '</a>' .
'</li>' .
'<li>' .
'<span class="menuitem">' .
'<form class="save-form" action="#">' .
'<input type="text" id="remote_address" placeholder="user@yourNextcloud.org">' .
'<input type="submit" value=" " id="save-button-confirm" class="icon-confirm" disabled="disabled"></button>' .
'</form>' .
'</span>' .
'</li>'; '</li>';
} }
} }

87
core/css/apps.scss
View File

@ -737,6 +737,9 @@ kbd {
} }
/* POPOVER MENU ------------------------------------------------------------- */ /* POPOVER MENU ------------------------------------------------------------- */
$popoveritem-height: 38px;
$popovericon-size: 16px;
.ie, .ie,
.edge { .edge {
.bubble, .bubble:after, .bubble, .bubble:after,
@ -811,14 +814,13 @@ kbd {
flex: 0 0 auto; flex: 0 0 auto;
> button, > button,
> a, > a,
> .menuitem, > .menuitem {
> label {
cursor: pointer; cursor: pointer;
line-height: 36px; line-height: $popoveritem-height;
border: 0; border: 0;
background-color: transparent; background-color: transparent;
display: flex; display: flex;
align-items: center; align-items: flex-start;
height: auto; height: auto;
margin: 0; margin: 0;
font-weight: 300; font-weight: 300;
@ -827,24 +829,34 @@ kbd {
color: $color-main-text; color: $color-main-text;
/* Override the app-navigation li opacity */ /* Override the app-navigation li opacity */
opacity: .7 !important; opacity: .7 !important;
[class^='icon-'], span[class^='icon-'],
[class*=' icon-'], span[class*=' icon-'],
&[class^='icon-'], &[class^='icon-'],
&[class*=' icon-'] { &[class*=' icon-'] {
min-width: 0; /* Overwrite icons*/ min-width: 0; /* Overwrite icons*/
min-height: 0; min-height: 0;
background-position: 10px center; background-position: #{($popoveritem-height - $popovericon-size) / 2} center;
background-size: 16px; background-size: $popovericon-size;
} }
[class^='icon-'], span[class^='icon-'],
[class*=' icon-'] { span[class*=' icon-'] {
/* Keep padding to define the width to /* Keep padding to define the width to
assure correct position of a possible text */ assure correct position of a possible text */
padding: 18px 0 18px 36px; padding: #{$popoveritem-height / 2} 0 #{$popoveritem-height / 2} $popoveritem-height;
}
// If no icons set, force left margin to align
&:not([class^='icon-']):not([class*='icon-']) {
> span,
> input,
> form {
&:not([class^='icon-']):not([class*='icon-']):first-child {
margin-left: $popoveritem-height;
}
}
} }
&[class^='icon-'], &[class^='icon-'],
&[class*=' icon-'] { &[class*=' icon-'] {
padding: 0 10px 0 36px !important; padding: 0 #{($popoveritem-height - $popovericon-size) / 2} 0 $popoveritem-height !important;
} }
&:hover, &:focus, &.active { &:hover, &:focus, &.active {
opacity: 1 !important; opacity: 1 !important;
@ -870,9 +882,11 @@ kbd {
&:not(:empty) { &:not(:empty) {
padding-right: 10px !important; padding-right: 10px !important;
} }
/* DEPRECATED! old img in popover fallback
* TODO: to remove */
> img { > img {
width: 16px; width: $popovericon-size;
padding: 0 10px; padding: #{($popoveritem-height - $popovericon-size) / 2};
} }
/* checkbox/radio fixes */ /* checkbox/radio fixes */
> input.radio + label, > input.radio + label,
@ -881,14 +895,55 @@ kbd {
width: 100%; width: 100%;
} }
> input.checkbox + label::before { > input.checkbox + label::before {
margin: -2px 12px 0; margin: -2px 13px 0;
} }
> input.radio + label::before { > input.radio + label::before {
margin: -2px 11px 0; margin: -2px 12px 0;
} }
> input:not([type=radio]):not([type=checkbox]):not([type=image]) { > input:not([type=radio]):not([type=checkbox]):not([type=image]) {
width: 150px; width: 150px;
} }
form {
display: flex;
flex: 1 1 auto;
/* put a small space between text and form
if there is an element before */
&:not(:first-child) {
margin-left: 5px;
}
}
/* no margin if hidden span before */
> span.hidden + form,
> span[style*='display:none'] + form {
margin-left: 0;
}
/* Inputs inside popover supports text, submit & reset */
input {
min-width: #{$popoveritem-height - 4px}; /* twice the margin */
max-height: #{$popoveritem-height - 4px}; /* twice the margin */
margin: 2px 0;
flex: 1 1 auto;
&:not(:first-child) {
margin-left: 5px;
}
}
}
/* css hack, only first not hidden*/
&:not(.hidden):not([style*='display:none']) {
&:first-of-type {
> button, > a, > .menuitem {
> form, > input {
margin-top: 10px;
}
}
}
&:last-of-type {
> button, > a, > .menuitem {
> form, > input {
margin-bottom: 10px;
}
}
}
} }
> button { > button {
padding: 0; padding: 0;

4
core/css/icons.scss
View File

@ -165,6 +165,10 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
background-image: url('../img/actions/confirm.svg?v=2'); background-image: url('../img/actions/confirm.svg?v=2');
} }
.icon-confirm-fade {
background-image: url('../img/actions/confirm-fade.svg?v=2');
}
.icon-confirm-white { .icon-confirm-white {
background-image: url('../img/actions/confirm-white.svg?v=2'); background-image: url('../img/actions/confirm-white.svg?v=2');
} }

52
core/css/inputs.scss
View File

@ -149,11 +149,6 @@ input[type='reset'] {
cursor: pointer; cursor: pointer;
box-sizing: border-box; box-sizing: border-box;
background-color: nc-darken($color-main-background, 3%); background-color: nc-darken($color-main-background, 3%);
&.icon-confirm:not(:empty),
&.icon-confirm[value]:not([value=""]) {
background-position: calc(100% - 6px) center;
padding-right: 30px;
}
} }
/* Buttons */ /* Buttons */
@ -212,6 +207,53 @@ select {
padding-right: 24px !important; padding-right: 24px !important;
} }
/* Confirm inputs */
input {
&[type='text'],
&[type='password'],
&[type='email'] {
+ .icon-confirm {
margin-left: -8px !important;
border-left-color: transparent !important;
border-radius: 0 $border-radius $border-radius 0 !important;
background-clip: padding-box; /* Avoid background under border */
background-color: $color-main-background !important;
opacity: 1;
width: 16px;
padding: 7px 6px;
cursor: pointer;
&:disabled {
cursor: default;
background-image: url('../img/actions/confirm-fade.svg?v=2') !important;
}
}
/* only show confirm borders if input is not focused */
&:not(:active):not(:hover):not(:focus){
+ .icon-confirm {
&:active,
&:hover,
&:focus {
border-color: $color-primary-element !important;
border-radius: $border-radius !important;
&:disabled {
border-color: nc-darken($color-main-background, 14%) !important;
}
}
}
}
&:active,
&:hover,
&:focus {
+ .icon-confirm {
border-color: $color-primary-element !important;
border-left-color: transparent !important;
}
}
}
}
/* Various Fixes */ /* Various Fixes */
button img, button img,
.button img { .button img {

19
core/css/styles.scss
View File

@ -254,21 +254,9 @@ body {
} }
#controls { #controls {
.button, button { > div,
box-sizing: border-box; & {
display: inline-block; > .button, button {
height: 36px;
padding: 7px 10px;
}
input {
&[type='submit'], &[type='text'], &[type='password'] {
box-sizing: border-box;
display: inline-block;
height: 36px;
padding: 7px 10px;
}
}
select {
box-sizing: border-box; box-sizing: border-box;
display: inline-block; display: inline-block;
height: 36px; height: 36px;
@ -277,6 +265,7 @@ body {
.button.hidden { .button.hidden {
display: none; display: none;
} }
}
} }
#content { #content {

1
core/img/actions/confirm-fade.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" width="16" version="1.1" height="16"><path opacity=".5" d="m8.5 0.5c-0.8974 0-1.3404 1.0909-0.6973 1.7168l4.7837 4.7832h-11.573c-1.3523-0.019125-1.3523 2.0191 0 2h11.572l-4.7832 4.7832c-0.98163 0.94251 0.47155 2.3957 1.4141 1.4141l6.4911-6.49c0.387-0.3878 0.391-1.0228 0-1.414l-6.4906-6.4903c-0.1883-0.1935-0.4468-0.30268-0.7168-0.3027z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 406 B