diff options
| -rw-r--r-- | apps/files/js/newfilemenu.js | 1 | ||||
| -rw-r--r-- | apps/files_sharing/css/public.scss | 3 | ||||
| -rw-r--r-- | apps/files_sharing/js/public.js | 6 | ||||
| -rw-r--r-- | apps/files_sharing/lib/Template/ExternalShareMenuAction.php | 8 | ||||
| -rw-r--r-- | 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 e27ccd9771f..cbe9ced8af4 100644 --- a/apps/files/js/newfilemenu.js +++ b/apps/files/js/newfilemenu.js @@ -26,7 +26,6 @@ var TEMPLATE_FILENAME_FORM = '<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 type="submit" value=" " class="icon-confirm" />' '</form>'; diff --git a/apps/files_sharing/css/public.scss b/apps/files_sharing/css/public.scss index e30c97ae7aa..cc3788884e7 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 607c50f5028..4b3ede24389 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 635b301e57c..0a6608ac8ca 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 { '<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 id="save-button">' . Util::sanitizeHTML($this->getLabel()) . '</span>' . - '<form class="save-form hidden" action="#">' . + '</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>' . - '</a>' . + '</span>' . '</li>'; } } diff --git a/core/css/apps.scss b/core/css/apps.scss index 670924ee0fb..e6f1aaf9d36 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 { |