diff --git a/src/content/themes/default/index.php b/src/content/themes/default/index.php
index b440dc5..10b539b 100644
--- a/src/content/themes/default/index.php
+++ b/src/content/themes/default/index.php
@@ -16,7 +16,7 @@
-
+rtl()) echo 'dir="rtl"'; ?>>
diff --git a/src/content/themes/default/mobile.css b/src/content/themes/default/mobile.css
index 4e3dbb1..8a52140 100644
--- a/src/content/themes/default/mobile.css
+++ b/src/content/themes/default/mobile.css
@@ -31,6 +31,7 @@ h2 { margin:0; margin-bottom:2px; font-size:1rem; }
.task-date { display:none; }
.task-note-actions { display:block; padding-top:8px; }
.task-note-block { margin-left:0px; border-left:1px solid #777777; background:none; padding-left:4px; display:none; }
+body[dir="rtl"] .task-note-block { border-left:none; border-right:1px solid #777777; padding-left:0; padding-right:4px; }
.task-note-area textarea { width:95%; }
#tasklist li .task-through { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@@ -53,7 +54,7 @@ h2 { margin:0; margin-bottom:2px; font-size:1rem; }
#loading { padding:0px; padding-top:1px; padding-right:1px; height:16px; overflow:hidden; }
#loading img { /*width:8px; height:8px;*/ }
-#tagcloud { max-width:100%; }
+#tagcloud { max-width:100%; margin:0px 5px 5px 5px; }
.mtt-settings-table .in350 { min-width:50px; }
.mtt-notes-showhide { display:none; }
@@ -62,3 +63,5 @@ h2 { margin:0; margin-bottom:2px; font-size:1rem; }
.mtt-menu-container li { padding-top:0.3rem; padding-bottom:0.3rem; }
#slmenucontainer { max-width:100vw; }
#slmenucontainer a { overflow:hidden; text-overflow:ellipsis; }
+#cmenulistscontainer { max-width:100vw; }
+#cmenulistscontainer li { overflow:hidden; text-overflow:ellipsis; }
\ No newline at end of file
diff --git a/src/content/themes/default/style.css b/src/content/themes/default/style.css
index e2dcd76..1074bdf 100644
--- a/src/content/themes/default/style.css
+++ b/src/content/themes/default/style.css
@@ -280,9 +280,12 @@ a.mtt-back-button { font-size:0.8rem; }
#tagcloudload { display:none; height:24px; background:url(images/loading48.gif) center no-repeat; background-size:24px 24px; }
#tagcloud {
overflow: hidden; z-index:100; background-color:#fff; border:1px solid #cccccc; padding:5px;
- width:100%; max-width:450px; margin:0px 7px 7px 7px; text-align:center;
+ width:100%; max-width:450px; text-align:center;
box-shadow:1px 2px 5px rgba(0,0,0,0.5);
-}
+}
+#tagcloud.mtt-left-adjusted { margin-left:5px; }
+#tagcloud.mtt-right-adjusted { margin-right:5px; }
+#tagcloud.mtt-left-adjusted.mtt-right-adjusted { margin-bottom:5px; }
#tagcloud .tag { margin:1px 0px; padding:2px; line-height:140%; color:black; }
#tagcloud .tag:hover { background-color:#999988; color:white; }
#tagcloud .w0 { font-size:80%; }
@@ -331,9 +334,11 @@ a.mtt-back-button { font-size:0.8rem; }
background-color:#f9f9f9; border:1px solid #cccccc; padding:2px 0px;
box-shadow:1px 2px 5px rgba(0,0,0,0.5);
border-radius:5px;
- margin:0px 7px 7px 0px; /* for shadows */
user-select:none;
-}
+}
+.mtt-menu-container.mtt-left-adjusted { margin-left:5px; }
+.mtt-menu-container.mtt-right-adjusted { margin-right:5px; }
+.mtt-menu-container.mtt-right-adjusted.mtt-left-adjusted { margin-bottom:5px; }
.mtt-menu-container ul { list-style: none; padding:0; margin:0; }
.mtt-menu-container li { margin:1px 0px; cursor:default; color:#000; white-space:nowrap; padding-top:0.20rem; padding-bottom:0.20rem; padding-left:28px; padding-right:28px; position:relative; }
.mtt-menu-container li:hover, .mtt-menu-container li.mtt-menu-item-active {
diff --git a/src/content/themes/default/style_rtl.css b/src/content/themes/default/style_rtl.css
index 7306a6d..512d9f2 100644
--- a/src/content/themes/default/style_rtl.css
+++ b/src/content/themes/default/style_rtl.css
@@ -25,11 +25,13 @@ h2 { padding-left:10px; padding-right:0px; }
.duedate:before { content:'\20\2190\20'; }
.task-date-completed { margin-left:0; margin-right:5px; }
+#tagcloud { box-shadow:-1px 2px 5px rgba(0,0,0,0.5); }
#tagcloudcancel { float:left; }
#taskedit-date { float:left; }
#page_taskedit .form-row-short { float:right; margin-left:12px; margin-right:0; }
.alltags-cell { padding-left:0; padding-right:5px; }
+.mtt-menu-container { box-shadow:-1px 2px 5px rgba(0,0,0,0.5); }
.mtt-menu-container .menu-icon { left:auto; right:6px; }
li.mtt-menu-indicator .submenu-icon { left:6px; right:auto; transform:rotate(180deg); }
\ No newline at end of file
diff --git a/src/includes/mytinytodo.js b/src/includes/mytinytodo.js
index bf6fee8..a069f47 100644
--- a/src/includes/mytinytodo.js
+++ b/src/includes/mytinytodo.js
@@ -143,7 +143,7 @@ var mytinytodo = window.mytinytodo = _mtt = {
_mtt.applySingletab(!_mtt.options.singletab);
return false;
}
- if(!_mtt.menus.selectlist) _mtt.menus.selectlist = new mttMenu('slmenucontainer', {onclick:slmenuSelect});
+ if(!_mtt.menus.selectlist) _mtt.menus.selectlist = new mttMenu('slmenucontainer', {onclick:slmenuSelect, adjustWidth:true, alignRight:true});
_mtt.menus.selectlist.show(this);
});
@@ -234,7 +234,7 @@ var mytinytodo = window.mytinytodo = _mtt = {
$('#tagcloudload').show();
loadTags(curList.id, function(){$('#tagcloudload').hide();});
}
- }, adjustWidth:true
+ }, adjustWidth:true, alignRight:true
});
_mtt.menus.tagcloud.show(this);
});
@@ -1704,6 +1704,16 @@ function mttMenu(container, options)
this.showTimer = null;
this.ts = (new Date).getTime();
this.container.mttmenu = this.ts;
+
+ if (!this.options.hasOwnProperty('isRTL')) {
+ this.options.isRTL = ($('body').css('direction') == 'rtl') ? true : false;
+ }
+ if (!this.options.hasOwnProperty('alignRight')) {
+ this.options.alignRight = false;
+ }
+ if (!this.options.hasOwnProperty('adjustWidth')) {
+ this.options.adjustWidth = true;
+ }
this.$container.find('li').click(function(){
var r = menu.onclick(this, menu);
@@ -1810,17 +1820,33 @@ function mttMenu(container, options)
this.options.beforeShow();
// adjust width
- if(this.options.adjustWidth && this.$container.outerWidth(true) > $(window).width())
- this.$container.width($(window).width() - (this.$container.outerWidth(true) - this.$container.width()));
+ this.$container.removeClass('mtt-left-adjusted mtt-right-adjusted');
+ if ( this.options.adjustWidth && this.$container.outerWidth(true) > $(window).width() ) {
+ this.$container.addClass('mtt-left-adjusted mtt-right-adjusted');
+ this.$container.width( $(window).width() - (this.$container.outerWidth(true) - this.$container.width()) );
+ }
$caller.addClass('mtt-menu-button-active');
var offset = $caller.offset();
- var x2 = $(window).width() + $(document).scrollLeft() - this.$container.outerWidth(true) - 1;
- var x = offset.left < x2 ? offset.left : x2;
- if(x<0) x=0;
- var y = offset.top+caller.offsetHeight-1;
+ var containerWidth = this.$container.outerWidth(true);
+ var alignRight = this.options.isRTL ^ this.options.alignRight; //alignRight is not for submenu
+
+ var x2 = $(window).width() + $(document).scrollLeft() - containerWidth - 1; // TODO: rtl?
+ var x = alignRight ? offset.left + $caller.outerWidth() - containerWidth : offset.left;
+
+ if (x > x2) {
+ x = x2; //move left if container overflows right edge
+ this.$container.addClass('mtt-right-adjusted');
+ }
+ if (x < 0) {
+ x = 0; //do not cross left edge
+ this.$container.addClass('mtt-left-adjusted');
+ }
+
+ var y = offset.top + caller.offsetHeight - 1;
if(y + this.$container.outerHeight(true) > $(window).height() + $(document).scrollTop()) y = offset.top - this.$container.outerHeight();
if(y<0) y=0;
+
this.$container.css({ position: 'absolute', top: y, left: x, width:this.$container.width() /*, 'min-width': $caller.width()*/ }).show();
var menu = this;
$(document).bind('mousedown.mttmenuclose', function(e){ menu.close(e) });
@@ -1829,14 +1855,42 @@ function mttMenu(container, options)
this.showSub = function()
{
+ // adjust width
+ this.$container.removeClass('mtt-left-adjusted mtt-right-adjusted');
+ if ( this.options.adjustWidth && this.$container.outerWidth(true) > $(window).width() ) {
+ this.$container.addClass('mtt-left-adjusted mtt-right-adjusted');
+ this.$container.width( $(window).width() - (this.$container.outerWidth(true) - this.$container.width()) );
+ }
this.$caller.addClass('mtt-menu-item-active');
var offset = this.$caller.offset();
- var x = offset.left+this.$caller.outerWidth();
- if(x + this.$container.outerWidth(true) > $(window).width() + $(document).scrollLeft()) x = offset.left - this.$container.outerWidth() - 1;
- if(x<0) x=0;
+ var containerWidth = this.$container.outerWidth(true);
+
+ var x = 0;
+ if (this.options.isRTL) {
+ x = offset.left - containerWidth - 1;
+ if (x < 0) {
+ x = offset.left + this.$caller.outerWidth();
+ }
+ if ( x + containerWidth > $(window).width() + $(document).scrollLeft() ) {
+ x = $(window).width() + $(document).scrollLeft() - containerWidth; // TODO: rtl?
+ this.$container.addClass('mtt-right-adjusted');
+ }
+ }
+ else {
+ x = offset.left + this.$caller.outerWidth();
+ if ( x + containerWidth > $(window).width() + $(document).scrollLeft() ) { // TODO: rtl?
+ x = offset.left - containerWidth - 1;
+ }
+ if (x < 0) {
+ x = 0;
+ this.$container.addClass('mtt-left-adjusted');
+ }
+ }
+
var y = offset.top + this.parent.$container.offset().top-this.parent.$container.find('li:first').offset().top;
if(y + this.$container.outerHeight(true) > $(window).height() + $(document).scrollTop()) y = $(window).height() + $(document).scrollTop()- this.$container.outerHeight(true) - 1;
if(y<0) y=0;
+
this.$container.css({ position: 'absolute', top: y, left: x, width:this.$container.width() /*, 'min-width': this.$caller.outerWidth()*/ }).show();
this.menuOpen = true;
};
@@ -1859,7 +1913,8 @@ function taskContextMenu(el, id)
beforeShow: function() {
$('#cmenupriocontainer li').removeClass('mtt-item-checked');
$('#cmenu_prio\\:'+ taskList[_mtt.menus.cmenu.tag].prio).addClass('mtt-item-checked');
- }
+ },
+ alignRight: true
});
_mtt.menus.cmenu.tag = id;
_mtt.menus.cmenu.show(el);