From a4b7bbb3343e4ccbcc18a1e13694ace896b1c408 Mon Sep 17 00:00:00 2001 From: "Fawzi E. Abdulfattah" Date: Fri, 16 Apr 2021 00:02:53 +0200 Subject: [PATCH] support RTL mode - Designer Signed-off-by: Fawzi E. Abdulfattah --- js/src/designer/move.js | 27 ++++++++++--------- libraries/classes/Database/Designer.php | 6 +++++ .../database/designer/database_tables.twig | 2 +- templates/database/designer/main.twig | 1 + 4 files changed, 23 insertions(+), 13 deletions(-) diff --git a/js/src/designer/move.js b/js/src/designer/move.js index 369a93e345..995aca7def 100644 --- a/js/src/designer/move.js +++ b/js/src/designer/move.js @@ -55,6 +55,9 @@ DesignerMove.markUnsaved = function () { $('#saved_state').text('*'); }; +var mainDirection = $('html').attr('dir') === 'rtl' ? 'right' : 'left'; +// Will be used to multiply the offsetLeft by -1 if the direction is rtl. +var directionEffect = mainDirection === 'right' ? -1 : 1; var curClick = null; var smS = 0; var smAdd = 10; @@ -130,13 +133,13 @@ DesignerMove.mouseMove = function (e) { var $curClick = $(curClick); - var curX = parseFloat($curClick.attr('data-left') || $curClick.css('left')); + var curX = parseFloat($curClick.attr('data-' + mainDirection) || $curClick.css(mainDirection)); var curY = parseFloat($curClick.attr('data-top') || $curClick.css('top')); - var newX = curX - deltaX; + var newX = curX - directionEffect * deltaX; var newY = curY - deltaY; - $curClick.attr('data-left', newX); + $curClick.attr('data-' + mainDirection, newX); $curClick.attr('data-top', newY); if (onGrid) { @@ -149,14 +152,14 @@ DesignerMove.mouseMove = function (e) { } else if (newY < 0) { newY = 0; } - $curClick.css('left', newX + 'px'); + $curClick.css(mainDirection, newX + 'px'); $curClick.css('top', newY + 'px'); } else if (layerMenuCurClick) { if (menuMoved) { deltaX = -deltaX; } var $layerMenu = $('#layer_menu'); - var newWidth = $layerMenu.width() + deltaX; + var newWidth = $layerMenu.width() + directionEffect * deltaX; if (newWidth < 150) { newWidth = 150; } @@ -259,7 +262,7 @@ DesignerMove.resizeOsnTab = function () { var maxX = 0; var maxY = 0; for (var key in jTabs) { - var kX = parseInt(document.getElementById(key).style.left, 10) + document.getElementById(key).offsetWidth; + var kX = parseInt(document.getElementById(key).style[mainDirection], 10) + document.getElementById(key).offsetWidth; var kY = parseInt(document.getElementById(key).style.top, 10) + document.getElementById(key).offsetHeight; maxX = maxX < kX ? kX : maxX; maxY = maxY < kY ? kY : maxY; @@ -372,9 +375,9 @@ DesignerMove.reload = function () { var osnTab = document.getElementById('osn_tab'); DesignerMove.line0( - x1 + osnTab.offsetLeft, + x1 + directionEffect * osnTab.offsetLeft, y1 - osnTab.offsetTop, - x2 + osnTab.offsetLeft, + x2 + directionEffect * osnTab.offsetLeft, y2 - osnTab.offsetTop, DesignerMove.getColorByTarget(contr[K][key][key2][key3][0] + '.' + contr[K][key][key2][key3][1]) ); @@ -1544,9 +1547,9 @@ DesignerMove.canvasClick = function (id, event) { var osnTab = document.getElementById('osn_tab'); if (!selected && localX > x1 - 10 && localX < x1 + 10 && localY > y1 - 7 && localY < y1 + 7) { DesignerMove.line0( - x1 + osnTab.offsetLeft, + x1 + directionEffect * osnTab.offsetLeft, y1 - osnTab.offsetTop, - x2 + osnTab.offsetLeft, + x2 + directionEffect * osnTab.offsetLeft, y2 - osnTab.offsetTop, 'rgba(255,0,0,1)'); @@ -1558,9 +1561,9 @@ DesignerMove.canvasClick = function (id, event) { Key = K; } else { DesignerMove.line0( - x1 + osnTab.offsetLeft, + x1 + directionEffect * osnTab.offsetLeft, y1 - osnTab.offsetTop, - x2 + osnTab.offsetLeft, + x2 + directionEffect * osnTab.offsetLeft, y2 - osnTab.offsetTop, DesignerMove.getColorByTarget(contr[K][key][key2][key3][0] + '.' + contr[K][key][key2][key3][1]) ); diff --git a/libraries/classes/Database/Designer.php b/libraries/classes/Database/Designer.php index 2fa6e7deaa..394c1b9dab 100644 --- a/libraries/classes/Database/Designer.php +++ b/libraries/classes/Database/Designer.php @@ -256,6 +256,8 @@ class Designer array $tables_all_keys, array $tables_pk_or_unique_keys ) { + global $text_dir; + $columns_type = []; foreach ($designerTables as $designerTable) { $table_name = $designerTable->getDbTableString(); @@ -288,6 +290,7 @@ class Designer return $this->template->render('database/designer/database_tables', [ 'db' => $GLOBALS['db'], + 'text_dir' => $text_dir, 'get_db' => $db, 'has_query' => isset($_REQUEST['query']), 'tab_pos' => $tab_pos, @@ -337,6 +340,8 @@ class Designer array $tablesAllKeys, array $tablesPkOrUniqueKeys ): string { + global $text_dir; + $cfgRelation = $this->relation->getRelationsParam(); $columnsType = []; foreach ($designerTables as $designerTable) { @@ -388,6 +393,7 @@ class Designer return $this->template->render('database/designer/main', [ 'db' => $db, + 'text_dir' => $text_dir, 'get_db' => $getDb, 'designer_config' => json_encode($designerConfig), 'display_page' => (int) $displayPage, diff --git a/templates/database/designer/database_tables.twig b/templates/database/designer/database_tables.twig index 615ef7e0f1..3217264570 100644 --- a/templates/database/designer/database_tables.twig +++ b/templates/database/designer/database_tables.twig @@ -15,7 +15,7 @@ cellpadding="0" cellspacing="0" class="pma-table designer_tab" - style="position:absolute; left: + style="position:absolute; {{ text_dir == 'rtl' ? 'right' : 'left' }}: {{- tab_pos[t_n] is defined ? tab_pos[t_n]['X'] : random(range(20, 700)) }}px; top: {{- tab_pos[t_n] is defined ? tab_pos[t_n]['Y'] : random(range(20, 550)) }}px; display: {{- tab_pos[t_n] is defined or display_page == -1 ? 'block' : 'none' }}; z-index: 1;"> diff --git a/templates/database/designer/main.twig b/templates/database/designer/main.twig index 319d2dadd7..d075a4c72e 100644 --- a/templates/database/designer/main.twig +++ b/templates/database/designer/main.twig @@ -234,6 +234,7 @@ var designerConfig = {{ designer_config|raw }}; {# end layer_menu #} {% include 'database/designer/database_tables.twig' with { 'db': db, + 'text_dir': text_dir, 'get_db': get_db, 'has_query': has_query, 'tab_pos': tab_pos,