Merge #16814 - Fix #15566 - Designer - support RTL mode

Signed-off-by: William Desportes <williamdes@wdes.fr>
This commit is contained in:
William Desportes 2021-04-19 19:14:19 +02:00
commit ae31556515
No known key found for this signature in database
GPG Key ID: 90A0EF1B8251A889
4 changed files with 23 additions and 13 deletions

View File

@ -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])
);

View File

@ -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,

View File

@ -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;"> <!--"-->

View File

@ -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,