diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index 1be58cff5a..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 */
@@ -696,14 +697,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..a340b8b621 100644
--- a/apps/files/js/newfilemenu.js
+++ b/apps/files/js/newfilemenu.js
@@ -26,8 +26,8 @@
var TEMPLATE_FILENAME_FORM =
'';
/**
@@ -116,7 +116,7 @@
}
if ($target.find('form').length) {
- $target.find('input').focus();
+ $target.find('input[type=\'text\']').focus();
return;
}
@@ -138,7 +138,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 () {
@@ -155,7 +156,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');
@@ -171,6 +172,12 @@
}
});
+ $submit.click(function(event) {
+ event.stopPropagation();
+ event.preventDefault();
+ $form.submit();
+ });
+
$input.focus();
// pre select name up to the extension
lastPos = newName.lastIndexOf('.');
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() {
diff --git a/apps/files_sharing/css/public.scss b/apps/files_sharing/css/public.scss
index e040d44912..cc3788884e 100644
--- a/apps/files_sharing/css/public.scss
+++ b/apps/files_sharing/css/public.scss
@@ -105,25 +105,8 @@ thead {
border-color: rgba(0,0,0,0.3) !important;
}
-/* within #save */
-#save .save-form {
- position: relative;
- margin-right: -10px;
-}
-
-#remote_address {
+#share-menu input[type='text'] {
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..4b3ede2438 100644
--- a/apps/files_sharing/js/public.js
+++ b/apps/files_sharing/js/public.js
@@ -271,19 +271,13 @@ 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);
}
});
- $('#save #save-button').click(function () {
- $(this).hide();
- $('.save-form').css('display', 'inline');
- $('#remote_address').focus();
- });
-
// legacy
window.FileList = this.fileList;
},
@@ -329,6 +323,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 +341,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 +351,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 +398,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..e30a77cb2e 100644
--- a/apps/files_sharing/lib/Template/ExternalShareMenuAction.php
+++ b/apps/files_sharing/lib/Template/ExternalShareMenuAction.php
@@ -57,12 +57,16 @@ class ExternalShareMenuAction extends SimpleMenuAction {
return '' .
'' .
'' .
- '' . Util::sanitizeHTML($this->getLabel()) . '' .
- '' .
+ '' .
'' .
+ '' .
+ '' .
+ '' .
'';
}
-}
\ No newline at end of file
+}
diff --git a/core/css/apps.scss b/core/css/apps.scss
index 691a0c0713..fc255aca67 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,
@@ -811,14 +814,13 @@ kbd {
flex: 0 0 auto;
> button,
> a,
- > .menuitem,
- > label {
+ > .menuitem {
cursor: pointer;
- line-height: 36px;
+ 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;
@@ -827,24 +829,34 @@ 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*/
min-height: 0;
- background-position: 10px center;
- background-size: 16px;
+ background-position: #{($popoveritem-height - $popovericon-size) / 2} center;
+ background-size: $popovericon-size;
}
- [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;
+ 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-'] {
- padding: 0 10px 0 36px !important;
+ padding: 0 #{($popoveritem-height - $popovericon-size) / 2} 0 $popoveritem-height !important;
}
&:hover, &:focus, &.active {
opacity: 1 !important;
@@ -870,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,
@@ -881,14 +895,55 @@ kbd {
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;
}
+ 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 {
padding: 0;
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 7b74d64548..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 */
@@ -212,6 +207,53 @@ 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 */
+ 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 */
button img,
.button img {
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;
+ }
}
}
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 @@
+