diff options
-rw-r--r-- | apps/files_external/css/settings.css | 8 | ||||
-rw-r--r-- | apps/files_external/js/settings.js | 78 | ||||
-rw-r--r-- | apps/files_external/templates/settings.php | 6 | ||||
-rw-r--r-- | core/css/apps.scss | 23 |
4 files changed, 57 insertions, 58 deletions
diff --git a/apps/files_external/css/settings.css b/apps/files_external/css/settings.css index bac89e26b09..7aa7ab1a6b0 100644 --- a/apps/files_external/css/settings.css +++ b/apps/files_external/css/settings.css @@ -30,9 +30,15 @@ td.mountPoint, td.backend { width:160px; } #addMountPoint>td.applicable { visibility:hidden; } #addMountPoint>td.hidden { visibility:hidden; } +#externalStorage td.mountOptionsToggle { + position: relative; + padding: 0 !important; + width: 44px; +} #externalStorage .icon-settings { - padding: 11px 20px; + padding: 14px; vertical-align: text-bottom; + cursor: pointer; } #selectBackend { diff --git a/apps/files_external/js/settings.js b/apps/files_external/js/settings.js index cb9b7ad6822..bb34bc4ebc2 100644 --- a/apps/files_external/js/settings.js +++ b/apps/files_external/js/settings.js @@ -12,31 +12,42 @@ // TODO: move to a separate file var MOUNT_OPTIONS_DROPDOWN_TEMPLATE = - '<div class="drop dropdown mountOptionsDropdown">' + - // FIXME: options are hard-coded for now - ' <div class="optionRow">' + - ' <input id="mountOptionsEncrypt" name="encrypt" type="checkbox" value="true" checked="checked"/>' + - ' <label for="mountOptionsEncrypt">{{t "files_external" "Enable encryption"}}</label>' + - ' </div>' + - ' <div class="optionRow">' + - ' <input id="mountOptionsPreviews" name="previews" type="checkbox" value="true" checked="checked"/>' + - ' <label for="mountOptionsPreviews">{{t "files_external" "Enable previews"}}</label>' + - ' </div>' + - ' <div class="optionRow">' + - ' <input id="mountOptionsSharing" name="enable_sharing" type="checkbox" value="true"/>' + - ' <label for="mountOptionsSharing">{{t "files_external" "Enable sharing"}}</label>' + - ' </div>' + - ' <div class="optionRow">' + - ' <label for="mountOptionsFilesystemCheck">{{t "files_external" "Check for changes"}}</label>' + - ' <select id="mountOptionsFilesystemCheck" name="filesystem_check_changes" data-type="int">' + - ' <option value="0">{{t "files_external" "Never"}}</option>' + - ' <option value="1" selected="selected">{{t "files_external" "Once every direct access"}}</option>' + - ' </select>' + - ' </div>' + - ' <div class="optionRow">' + - ' <input id="mountOptionsEncoding" name="encoding_compatibility" type="checkbox" value="true"/>' + - ' <label for="mountOptionsEncoding">{{mountOptionsEncodingLabel}}</label>' + - ' </div>' + + '<div class="popovermenu open">'+ + ' <ul>'+ + ' <li>'+ + ' <span class="menuitem">'+ + ' <input id="mountOptionsEncrypt" class="checkbox" name="encrypt" type="checkbox" value="true" checked="checked"/>'+ + ' <label for="mountOptionsEncrypt">{{t "files_external" "Enable encryption"}}</label>'+ + ' </span>'+ + ' </li>'+ + ' <li>'+ + ' <span class="menuitem">'+ + ' <input id="mountOptionsPreviews" class="checkbox" name="previews" type="checkbox" value="true" checked="checked"/>'+ + ' <label for="mountOptionsPreviews">{{t "files_external" "Enable previews"}}</label>'+ + ' </span>'+ + ' </li>'+ + ' <li>'+ + ' <span class="menuitem">'+ + ' <input id="mountOptionsSharing" class="checkbox" name="enable_sharing" type="checkbox" value="true"/>'+ + ' <label for="mountOptionsSharing">{{t "files_external" "Enable sharing"}}</label>'+ + ' </span>'+ + ' </li>'+ + ' <li>'+ + ' <span class="menuitem">'+ + ' <label for="mountOptionsFilesystemCheck">{{t "files_external" "Check for changes"}}</label>'+ + ' <select id="mountOptionsFilesystemCheck" name="filesystem_check_changes" data-type="int">'+ + ' <option value="0">{{t "files_external" "Never"}}</option>'+ + ' <option value="1" selected="selected">{{t "files_external" "Once every direct access"}}</option>'+ + ' </select>'+ + ' </span>'+ + ' </li>'+ + ' <li>'+ + ' <span class="menuitem">'+ + ' <input id="mountOptionsEncoding" class="checkbox" name="encoding_compatibility" type="checkbox" value="true"/>'+ + ' <label for="mountOptionsEncoding">{{mountOptionsEncodingLabel}}</label>'+ + ' </span>'+ + ' </li>'+ + ' </ul>'+ '</div>'; /** @@ -724,7 +735,7 @@ MountConfigListView.prototype = _.extend({ self.saveStorageConfig($(this).closest('tr')); }); - this.$el.on('click', 'td.mountOptionsToggle>img', function() { + this.$el.on('click', 'td.mountOptionsToggle>.icon-settings', function() { self._showMountOptionsDropdown($(this).closest('tr')); }); @@ -1278,11 +1289,6 @@ MountConfigListView.prototype = _.extend({ * @param {Object} $tr configuration row */ _showMountOptionsDropdown: function($tr) { - if (this._preventNextDropdown) { - // prevented because the click was on the toggle - this._preventNextDropdown = false; - return; - } var self = this; var storage = this.getStorageConfig($tr); var $toggle = $tr.find('.mountOptionsToggle'); @@ -1299,15 +1305,7 @@ MountConfigListView.prototype = _.extend({ dropDown.show($toggle, storage.mountOptions || [], visibleOptions); $('body').on('mouseup.mountOptionsDropdown', function(event) { var $target = $(event.target); - if ($toggle.has($target).length) { - // why is it always so hard to make dropdowns behave ? - // this prevents the click on the toggle to cause - // the dropdown to reopen itself - // (preventDefault doesn't work here because the click - // event is already in the queue and cannot be cancelled) - self._preventNextDropdown = true; - } - if ($target.closest('.dropdown').length) { + if ($target.closest('.popovermenu').length) { return; } dropDown.hide(); diff --git a/apps/files_external/templates/settings.php b/apps/files_external/templates/settings.php index 237985bfd0f..ac5b0d01a15 100644 --- a/apps/files_external/templates/settings.php +++ b/apps/files_external/templates/settings.php @@ -143,11 +143,7 @@ </td> <?php endif; ?> <td class="mountOptionsToggle hidden"> - <img class="svg" - title="<?php p($l->t('Advanced settings')); ?>" - alt="<?php p($l->t('Advanced settings')); ?>" - src="<?php print_unescaped(image_path('core', 'actions/settings.svg')); ?>" - /> + <div class="icon-settings" title="<?php p($l->t('Advanced settings')); ?>"></div> <input type="hidden" class="mountOptions" value="" /> </td> <td class="remove hidden"> diff --git a/core/css/apps.scss b/core/css/apps.scss index a92db4ed4ab..50c48d132ef 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -683,10 +683,9 @@ kbd { /* DROPDOWN ----------------------------------------------------------------- */ .dropdown { - background: nc-darken($color-main-background, 8%); - border-bottom-left-radius: 5px; - border-bottom-right-radius: 5px; - box-shadow: 0 1px 1px $color-box-shadow; + background: $color-main-background; + border-radius: 0 0 $border-radius $border-radius; + filter: drop-shadow(0 1px 3px $color-box-shadow); display: block; margin-right: 0; position: absolute; @@ -868,17 +867,17 @@ kbd { width: 16px; padding: 0 10px; } + /* checkbox/radio fixes */ + > input.radio + label, > input.checkbox + label { padding: 0 !important; - &::before { - margin: -2px 12px 0; - } + width: 100%; } - > input.radio + label { - padding: 0 !important; - &::before { - margin: -2px 11px 0; - } + > input.checkbox + label::before { + margin: -2px 12px 0; + } + > input.radio + label::before { + margin: -2px 11px 0; } } > button { |