Use popovermenu instead of dropdown and small fix to popovermenu
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv)
parent
c2c2c06546
commit
1e2a082cd2
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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,19 +867,19 @@ kbd {
|
|||
width: 16px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
/* checkbox/radio fixes */
|
||||
> input.radio + label,
|
||||
> input.checkbox + label {
|
||||
padding: 0 !important;
|
||||
&::before {
|
||||
width: 100%;
|
||||
}
|
||||
> input.checkbox + label::before {
|
||||
margin: -2px 12px 0;
|
||||
}
|
||||
}
|
||||
> input.radio + label {
|
||||
padding: 0 !important;
|
||||
&::before {
|
||||
> input.radio + label::before {
|
||||
margin: -2px 11px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
> button {
|
||||
padding: 0;
|
||||
span {
|
||||
|
|
|
|||
Loading…
Reference in New Issue