From 3964616a9e2d2902f3e9be1f142938290eb34972 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Wed, 28 Feb 2018 12:55:33 +0100 Subject: [PATCH 01/13] Updated popover rules to allow form inputs and added input submit for new File MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- apps/files/css/files.scss | 8 -------- apps/files/js/newfilemenu.js | 10 ++++++++-- core/css/apps.scss | 21 ++++++++++++++------- 3 files changed, 22 insertions(+), 17 deletions(-) diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss index 1be58cff5a..3012ca171a 100644 --- a/apps/files/css/files.scss +++ b/apps/files/css/files.scss @@ -696,14 +696,6 @@ table.dragshadow td.size { z-index: 1001; } -.newFileMenu .filenameform { - display: inline-block; -} - -.newFileMenu .filenameform input { - margin: 2px 0; -} - #filestable .filename .action .icon, #filestable .selectedActions a .icon, #filestable .filename .favorite-mark .icon, diff --git a/apps/files/js/newfilemenu.js b/apps/files/js/newfilemenu.js index 18d9104dc4..09420328f2 100644 --- a/apps/files/js/newfilemenu.js +++ b/apps/files/js/newfilemenu.js @@ -28,6 +28,7 @@ '
' + '' + '' + + '' '
'; /** @@ -116,7 +117,7 @@ } if ($target.find('form').length) { - $target.find('input').focus(); + $target.find('input[type=\'text\']').focus(); return; } @@ -138,7 +139,8 @@ $target.append($form); // 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 checkInput = function () { @@ -171,6 +173,10 @@ } }); + $submit.click(function(){ + $form.submit(); + }); + $input.focus(); // pre select name up to the extension lastPos = newName.lastIndexOf('.'); diff --git a/core/css/apps.scss b/core/css/apps.scss index 691a0c0713..cbacec0725 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -811,10 +811,9 @@ kbd { flex: 0 0 auto; > button, > a, - > .menuitem, - > label { + > .menuitem { cursor: pointer; - line-height: 36px; + line-height: 38px; border: 0; background-color: transparent; display: flex; @@ -827,8 +826,8 @@ kbd { color: $color-main-text; /* Override the app-navigation li opacity */ opacity: .7 !important; - [class^='icon-'], - [class*=' icon-'], + span[class^='icon-'], + span[class*=' icon-'], &[class^='icon-'], &[class*=' icon-'] { min-width: 0; /* Overwrite icons*/ @@ -836,8 +835,8 @@ kbd { background-position: 10px center; background-size: 16px; } - [class^='icon-'], - [class*=' icon-'] { + span[class^='icon-'], + span[class*=' icon-'] { /* Keep padding to define the width to assure correct position of a possible text */ padding: 18px 0 18px 36px; @@ -889,6 +888,14 @@ kbd { > input:not([type=radio]):not([type=checkbox]):not([type=image]) { width: 150px; } + input { + min-width: 34px; + max-height: 34px; + margin: 2px 0; + ~ input { + margin-left: 5px; + } + } } > button { padding: 0; From a7a36402241ef98a3e1403c85e32a2170c6b2ca0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Wed, 28 Feb 2018 13:09:11 +0100 Subject: [PATCH 02/13] fixup! Updated popover rules to allow form inputs and added input submit for new File MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/apps.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/core/css/apps.scss b/core/css/apps.scss index cbacec0725..1389938a32 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -888,10 +888,16 @@ kbd { > input:not([type=radio]):not([type=checkbox]):not([type=image]) { width: 150px; } + form { + display: flex; + flex: 1 1 auto; + } + /* Inputs inside popover supports text, submit & reset */ input { min-width: 34px; max-height: 34px; margin: 2px 0; + flex: 1 1 auto; ~ input { margin-left: 5px; } From 955c2ee1a7d4936aa5fc4168cb1c8bff41f7ad8b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Mon, 5 Mar 2018 17:17:10 +0100 Subject: [PATCH 03/13] PoC inline icon-confirm with inputs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- apps/files/js/newfilemenu.js | 2 +- core/css/inputs.scss | 35 +++++++++++++++++++++++++++++++++++ 2 files changed, 36 insertions(+), 1 deletion(-) diff --git a/apps/files/js/newfilemenu.js b/apps/files/js/newfilemenu.js index 09420328f2..0b28e158fe 100644 --- a/apps/files/js/newfilemenu.js +++ b/apps/files/js/newfilemenu.js @@ -28,7 +28,7 @@ '
' + '' + '' + - '' + '' '
'; /** diff --git a/core/css/inputs.scss b/core/css/inputs.scss index 7b74d64548..91f74fbf1f 100644 --- a/core/css/inputs.scss +++ b/core/css/inputs.scss @@ -212,6 +212,41 @@ select { 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 */ + } + /* only show confirm borders if input is not focused */ + &:not(:active):not(:hover):not(:focus){ + + .icon-confirm { + &:active, + &:hover, + &:focus { + border-left-color: $color-primary-element !important; + border-radius: $border-radius !important; + } + } + } + &:active, + &:hover, + &:focus { + + .icon-confirm { + border-color: $color-primary-element !important; + border-left-color: transparent !important; + } + } + } + +} + + /* Various Fixes */ button img, .button img { From 4e6043fd6b8853a6ea20fab6d9f71e21f35f0825 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Mon, 5 Mar 2018 17:37:05 +0100 Subject: [PATCH 04/13] Fixed tooltip positionning & error display MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- apps/files/css/files.scss | 5 +++-- apps/files/js/newfilemenu.js | 2 +- core/css/inputs.scss | 1 + 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss index 3012ca171a..f2d2e7d54f 100644 --- a/apps/files/css/files.scss +++ b/apps/files/css/files.scss @@ -38,10 +38,11 @@ font-weight: normal; } -.newFileMenu .error, #fileList .error { +.newFileMenu .error, +.newFileMenu .error + .icon-confirm, +#fileList .error { color: $color-error; border-color: $color-error; - box-shadow: 0 0 6px #f8b9b7; } /* FILE TABLE */ diff --git a/apps/files/js/newfilemenu.js b/apps/files/js/newfilemenu.js index 0b28e158fe..e27ccd9771 100644 --- a/apps/files/js/newfilemenu.js +++ b/apps/files/js/newfilemenu.js @@ -157,7 +157,7 @@ } } catch (error) { $input.attr('title', error); - $input.tooltip({placement: 'right', trigger: 'manual'}); + $input.tooltip({placement: 'right', trigger: 'manual', 'container': '.newFileMenu'}); $input.tooltip('fixTitle'); $input.tooltip('show'); $input.addClass('error'); diff --git a/core/css/inputs.scss b/core/css/inputs.scss index 91f74fbf1f..0e2a748304 100644 --- a/core/css/inputs.scss +++ b/core/css/inputs.scss @@ -222,6 +222,7 @@ input { 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; } /* only show confirm borders if input is not focused */ &:not(:active):not(:hover):not(:focus){ From 8d986160b899684dd5e76c3996ba04902152df4e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Tue, 6 Mar 2018 10:21:35 +0100 Subject: [PATCH 05/13] Improved inline confirm icon with opacity and fixed ext share loading state MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- apps/files_sharing/css/public.scss | 16 ------- apps/files_sharing/js/public.js | 44 ++++++++++--------- .../lib/Template/ExternalShareMenuAction.php | 4 +- core/css/icons.scss | 4 ++ core/css/inputs.scss | 18 +++++--- core/img/actions/confirm-fade.svg | 1 + 6 files changed, 42 insertions(+), 45 deletions(-) create mode 100644 core/img/actions/confirm-fade.svg diff --git a/apps/files_sharing/css/public.scss b/apps/files_sharing/css/public.scss index e040d44912..e30c97ae7a 100644 --- a/apps/files_sharing/css/public.scss +++ b/apps/files_sharing/css/public.scss @@ -105,25 +105,9 @@ thead { border-color: rgba(0,0,0,0.3) !important; } -/* within #save */ -#save .save-form { - position: relative; - margin-right: -10px; -} #remote_address { 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 { diff --git a/apps/files_sharing/js/public.js b/apps/files_sharing/js/public.js index ae19500080..607c50f502 100644 --- a/apps/files_sharing/js/public.js +++ b/apps/files_sharing/js/public.js @@ -271,7 +271,7 @@ OCA.Sharing.PublicApp = { }); $('#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); } else { $('#save-button-confirm').prop('disabled', false); @@ -329,6 +329,7 @@ OCA.Sharing.PublicApp = { */ _legacyCreateFederatedShare: function (remote, token, owner, ownerDisplayName, name, isProtected) { + var self = this; var location = window.location.protocol + '//' + window.location.host + OC.webroot; if(remote.substr(-1) !== '/') { @@ -346,6 +347,7 @@ OCA.Sharing.PublicApp = { // 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) { if (protocol !== 'http' && protocol !== 'https') { + self._toggleLoading(); OC.dialogs.alert(t('files_sharing', 'No compatible server found at {remote}', {remote: remote}), t('files_sharing', 'Invalid server URL')); } else { @@ -355,30 +357,30 @@ OCA.Sharing.PublicApp = { } }, + _toggleLoading: function() { + var loading = $('#save > .icon.icon-loading-small').length === 0; + if (loading) { + $('#save > .icon-external') + .removeClass("icon-external") + .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); + + } + }, + _createFederatedShare: function (remote, token, owner, ownerDisplayName, name, isProtected) { + var self = this; - var toggleLoading = function() { - var iconClass = $('#save-button-confirm').attr('class'); - var loading = iconClass.indexOf('icon-loading-small') !== -1; - if(loading) { - $('#save-button-confirm') - .removeClass("icon-loading-small") - .addClass("icon-confirm"); - - } - else { - $('#save-button-confirm') - .removeClass("icon-confirm") - .addClass("icon-loading-small"); - - } - }; - - toggleLoading(); + this._toggleLoading(); if (remote.indexOf('@') === -1) { this._legacyCreateFederatedShare(remote, token, owner, ownerDisplayName, name, isProtected); - toggleLoading(); return; } @@ -402,7 +404,7 @@ OCA.Sharing.PublicApp = { function (jqXHR) { OC.dialogs.alert(JSON.parse(jqXHR.responseText).message, t('files_sharing', 'Failed to add the public link to your Nextcloud')); - toggleLoading(); + self._toggleLoading(); } ); } diff --git a/apps/files_sharing/lib/Template/ExternalShareMenuAction.php b/apps/files_sharing/lib/Template/ExternalShareMenuAction.php index f548a3bc6f..635b301e57 100644 --- a/apps/files_sharing/lib/Template/ExternalShareMenuAction.php +++ b/apps/files_sharing/lib/Template/ExternalShareMenuAction.php @@ -60,9 +60,9 @@ class ExternalShareMenuAction extends SimpleMenuAction { '' . Util::sanitizeHTML($this->getLabel()) . '' . '' . '' . ''; } -} \ No newline at end of file +} diff --git a/core/css/icons.scss b/core/css/icons.scss index 3c3dff56c1..b4505e24e1 100644 --- a/core/css/icons.scss +++ b/core/css/icons.scss @@ -165,6 +165,10 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] { 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 { background-image: url('../img/actions/confirm-white.svg?v=2'); } diff --git a/core/css/inputs.scss b/core/css/inputs.scss index 0e2a748304..caa8209bdb 100644 --- a/core/css/inputs.scss +++ b/core/css/inputs.scss @@ -149,11 +149,6 @@ input[type='reset'] { cursor: pointer; box-sizing: border-box; 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 */ @@ -223,6 +218,14 @@ input { 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){ @@ -230,8 +233,11 @@ input { &:active, &:hover, &:focus { - border-left-color: $color-primary-element !important; + border-color: $color-primary-element !important; border-radius: $border-radius !important; + &:disabled { + border-color: nc-darken($color-main-background, 14%) !important; + } } } } diff --git a/core/img/actions/confirm-fade.svg b/core/img/actions/confirm-fade.svg new file mode 100644 index 0000000000..122af34cd7 --- /dev/null +++ b/core/img/actions/confirm-fade.svg @@ -0,0 +1 @@ + From 966ceca8eaf9d06d9f0528c83168a2942ca7e279 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Wed, 7 Mar 2018 10:29:09 +0100 Subject: [PATCH 06/13] Removed unwanted conflicting props MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/styles.scss | 23 ++++++----------------- 1 file changed, 6 insertions(+), 17 deletions(-) diff --git a/core/css/styles.scss b/core/css/styles.scss index 18a298d39b..5a927046c0 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -254,28 +254,17 @@ body { } #controls { - .button, button { - box-sizing: border-box; - display: inline-block; - height: 36px; - padding: 7px 10px; - } - input { - &[type='submit'], &[type='text'], &[type='password'] { + > div, + & { + > .button, button { box-sizing: border-box; display: inline-block; height: 36px; padding: 7px 10px; } - } - select { - box-sizing: border-box; - display: inline-block; - height: 36px; - padding: 7px 10px; - } - .button.hidden { - display: none; + .button.hidden { + display: none; + } } } From e77bddf56b80c0f9ebcb1c3322c8086af7231330 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Wed, 7 Mar 2018 12:42:26 +0100 Subject: [PATCH 07/13] Css hack to add margin on first or last visible inputs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/apps.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/core/css/apps.scss b/core/css/apps.scss index 1389938a32..9f8a33956e 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -903,6 +903,15 @@ kbd { } } } + /* css hack, only first not hidden*/ + &:not(.hidden):not([style*='display: none']) { + &:first-of-type input { + margin-top: 10px; + } + &:last-of-type input { + margin-bottom: 10px; + } + } > button { padding: 0; span { From e2910e17b09acc0a1c29ba687ffd78f13c1dbdc0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Wed, 7 Mar 2018 13:16:19 +0100 Subject: [PATCH 08/13] Default left margin for entries without icons MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/apps.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/core/css/apps.scss b/core/css/apps.scss index 9f8a33956e..670924ee0f 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -841,6 +841,16 @@ kbd { assure correct position of a possible text */ padding: 18px 0 18px 36px; } + // 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-of-type { + margin-left: 36px; + } + } + } &[class^='icon-'], &[class*=' icon-'] { padding: 0 10px 0 36px !important; From 446a3a9d5a9ea552f93b7621bb798b0f573f1bd7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Wed, 7 Mar 2018 14:57:07 +0100 Subject: [PATCH 09/13] Fixed ext share style and use varable for popover height MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- apps/files/js/newfilemenu.js | 1 - apps/files_sharing/css/public.scss | 3 +- apps/files_sharing/js/public.js | 6 -- .../lib/Template/ExternalShareMenuAction.php | 8 ++- core/css/apps.scss | 59 +++++++++++++------ 5 files changed, 48 insertions(+), 29 deletions(-) diff --git a/apps/files/js/newfilemenu.js b/apps/files/js/newfilemenu.js index e27ccd9771..cbe9ced8af 100644 --- a/apps/files/js/newfilemenu.js +++ b/apps/files/js/newfilemenu.js @@ -26,7 +26,6 @@ var TEMPLATE_FILENAME_FORM = '
' + - '' + '' + '' '
'; diff --git a/apps/files_sharing/css/public.scss b/apps/files_sharing/css/public.scss index e30c97ae7a..cc3788884e 100644 --- a/apps/files_sharing/css/public.scss +++ b/apps/files_sharing/css/public.scss @@ -105,8 +105,7 @@ thead { border-color: rgba(0,0,0,0.3) !important; } - -#remote_address { +#share-menu input[type='text'] { width: 200px; } diff --git a/apps/files_sharing/js/public.js b/apps/files_sharing/js/public.js index 607c50f502..4b3ede2438 100644 --- a/apps/files_sharing/js/public.js +++ b/apps/files_sharing/js/public.js @@ -278,12 +278,6 @@ OCA.Sharing.PublicApp = { } }); - $('#save #save-button').click(function () { - $(this).hide(); - $('.save-form').css('display', 'inline'); - $('#remote_address').focus(); - }); - // legacy window.FileList = this.fileList; }, diff --git a/apps/files_sharing/lib/Template/ExternalShareMenuAction.php b/apps/files_sharing/lib/Template/ExternalShareMenuAction.php index 635b301e57..0a6608ac8c 100644 --- a/apps/files_sharing/lib/Template/ExternalShareMenuAction.php +++ b/apps/files_sharing/lib/Template/ExternalShareMenuAction.php @@ -58,11 +58,15 @@ class ExternalShareMenuAction extends SimpleMenuAction { '' . '' . '' . Util::sanitizeHTML($this->getLabel()) . '' . - ''; } } diff --git a/core/css/apps.scss b/core/css/apps.scss index 670924ee0f..e6f1aaf9d3 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -737,6 +737,9 @@ kbd { } /* POPOVER MENU ------------------------------------------------------------- */ +$popoveritem-height: 38px; +$popovericon-size: 16px; + .ie, .edge { .bubble, .bubble:after, @@ -813,11 +816,11 @@ kbd { > a, > .menuitem { cursor: pointer; - line-height: 38px; + line-height: $popoveritem-height; border: 0; background-color: transparent; display: flex; - align-items: center; + align-items: flex-start; height: auto; margin: 0; font-weight: 300; @@ -832,28 +835,28 @@ kbd { &[class*=' icon-'] { min-width: 0; /* Overwrite icons*/ min-height: 0; - background-position: 10px center; - background-size: 16px; + background-position: #{($popoveritem-height - $popovericon-size) / 2} center; + background-size: $popovericon-size; } span[class^='icon-'], span[class*=' icon-'] { /* Keep padding to define the width to 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-of-type { - margin-left: 36px; + &:not([class^='icon-']):not([class*='icon-']):first-child { + margin-left: $popoveritem-height; } } } &[class^='icon-'], &[class*=' icon-'] { - padding: 0 10px 0 36px !important; + padding: 0 #{($popoveritem-height - $popovericon-size) / 2} 0 $popoveritem-height !important; } &:hover, &:focus, &.active { opacity: 1 !important; @@ -879,9 +882,11 @@ kbd { &:not(:empty) { padding-right: 10px !important; } + /* DEPRECATED! old img in popover fallback + * TODO: to remove */ > img { - width: 16px; - padding: 0 10px; + width: $popovericon-size; + padding: #{($popoveritem-height - $popovericon-size) / 2}; } /* checkbox/radio fixes */ > input.radio + label, @@ -901,25 +906,43 @@ kbd { 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: 34px; - max-height: 34px; + min-width: #{$popoveritem-height - 4px}; /* twice the margin */ + max-height: #{$popoveritem-height - 4px}; /* twice the margin */ margin: 2px 0; flex: 1 1 auto; - ~ input { + &:not(:first-child) { margin-left: 5px; } } } /* css hack, only first not hidden*/ - &:not(.hidden):not([style*='display: none']) { - &:first-of-type input { - margin-top: 10px; + &:not(.hidden):not([style*='display:none']) { + &:first-of-type { + > button, > a, > .menuitem { + > form, > input { + margin-top: 10px; + } + } } - &:last-of-type input { - margin-bottom: 10px; + &:last-of-type { + > button, > a, > .menuitem { + > form, > input { + margin-bottom: 10px; + } + } } } > button { From 5dbd09f07cddafd59d96ee632ca967df151ab701 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Wed, 7 Mar 2018 15:17:54 +0100 Subject: [PATCH 10/13] Align radio & checkboxes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/apps.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/core/css/apps.scss b/core/css/apps.scss index e6f1aaf9d3..fc255aca67 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -895,10 +895,10 @@ $popovericon-size: 16px; width: 100%; } > input.checkbox + label::before { - margin: -2px 12px 0; + margin: -2px 13px 0; } > input.radio + label::before { - margin: -2px 11px 0; + margin: -2px 12px 0; } > input:not([type=radio]):not([type=checkbox]):not([type=image]) { width: 150px; From e1ec4514ccc8550d174cb63df53a361e96f749f8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Wed, 7 Mar 2018 15:28:03 +0100 Subject: [PATCH 11/13] Use label for better focus on external share MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- apps/files_sharing/lib/Template/ExternalShareMenuAction.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/files_sharing/lib/Template/ExternalShareMenuAction.php b/apps/files_sharing/lib/Template/ExternalShareMenuAction.php index 0a6608ac8c..e30a77cb2e 100644 --- a/apps/files_sharing/lib/Template/ExternalShareMenuAction.php +++ b/apps/files_sharing/lib/Template/ExternalShareMenuAction.php @@ -57,7 +57,7 @@ class ExternalShareMenuAction extends SimpleMenuAction { return '
  • ' . '' . '' . - '' . Util::sanitizeHTML($this->getLabel()) . '' . + '' . '' . '
    • ' . '
  • ' . From 3ef4131533f0fd2c06b05fd2e893d5c4f9720063 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Wed, 7 Mar 2018 17:10:46 +0100 Subject: [PATCH 12/13] Fixed event propagation on safari MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- apps/files/js/newfilemenu.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/apps/files/js/newfilemenu.js b/apps/files/js/newfilemenu.js index cbe9ced8af..a340b8b621 100644 --- a/apps/files/js/newfilemenu.js +++ b/apps/files/js/newfilemenu.js @@ -172,7 +172,9 @@ } }); - $submit.click(function(){ + $submit.click(function(event) { + event.stopPropagation(); + event.preventDefault(); $form.submit(); }); From cee5be6ff262cf28af81a10c18e8cfd415b129aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 8 Mar 2018 10:31:33 +0100 Subject: [PATCH 13/13] Fixed jsunit MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- apps/files/tests/js/newfilemenuSpec.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/files/tests/js/newfilemenuSpec.js b/apps/files/tests/js/newfilemenuSpec.js index 20f617d24d..af998c1491 100644 --- a/apps/files/tests/js/newfilemenuSpec.js +++ b/apps/files/tests/js/newfilemenuSpec.js @@ -67,7 +67,8 @@ describe('OCA.Files.NewFileMenu', 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'); }); it('prevents entering invalid file names', function() {