summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--apps/files_external/css/settings.css8
-rw-r--r--apps/files_external/js/settings.js78
-rw-r--r--apps/files_external/templates/settings.php6
-rw-r--r--core/css/apps.scss23
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 {