Commit f136eef9 authored by Romain Courteaud's avatar Romain Courteaud

[erp5_xhtml_style] Add right to left language display support

This is activated only for erp5_l10n_fa by adding the language direction on the body element.

Thanks to Ali Hallaji for the original work.
parent 9e3f2c48
...@@ -14,6 +14,10 @@ ...@@ -14,6 +14,10 @@
margin-top: 0.5em; margin-top: 0.5em;
} }
body[dir="rtl"] #page_wrapper {
text-align: right;
}
#loading-wrapper{ #loading-wrapper{
position:absolute; position:absolute;
width:250px; width:250px;
...@@ -156,6 +160,10 @@ div.edit-form { ...@@ -156,6 +160,10 @@ div.edit-form {
width:78%; width:78%;
} }
body[dir="rtl"] #tabs {
float: right;
}
#tabs ul { #tabs ul {
margin : 0em; margin : 0em;
padding: 0em; padding: 0em;
...@@ -177,6 +185,10 @@ li.tab { ...@@ -177,6 +185,10 @@ li.tab {
margin-right: 1px; margin-right: 1px;
} }
body[dir="rtl"] li.tab {
float: right;
}
#tabs li span{ #tabs li span{
padding: 0px 10px; padding: 0px 10px;
display: block; display: block;
...@@ -226,6 +238,10 @@ div.toggable_dialog{ ...@@ -226,6 +238,10 @@ div.toggable_dialog{
border-style: none; border-style: none;
} }
body[dir="rtl"] #add_new_tab_dialog_link{
float: right;
}
#create_own_pad_dialog_link{ #create_own_pad_dialog_link{
cursor: pointer; cursor: pointer;
background: url("images/configure.png") no-repeat !important; background: url("images/configure.png") no-repeat !important;
......
<?xml version="1.0"?>
<ZopeData>
<record id="1" aka="AAAAAAAAAAE=">
<pickle>
<global name="ZopePageTemplate" module="Products.PageTemplates.ZopePageTemplate"/>
</pickle>
<pickle>
<dictionary>
<item>
<key> <string>_bind_names</string> </key>
<value>
<object>
<klass>
<global name="NameAssignments" module="Shared.DC.Scripts.Bindings"/>
</klass>
<tuple/>
<state>
<dictionary>
<item>
<key> <string>_asgns</string> </key>
<value>
<dictionary>
<item>
<key> <string>name_subpath</string> </key>
<value> <string>traverse_subpath</string> </value>
</item>
</dictionary>
</value>
</item>
</dictionary>
</state>
</object>
</value>
</item>
<item>
<key> <string>content_type</string> </key>
<value> <string>text/html</string> </value>
</item>
<item>
<key> <string>expand</string> </key>
<value> <int>0</int> </value>
</item>
<item>
<key> <string>id</string> </key>
<value> <string>testRTL</string> </value>
</item>
<item>
<key> <string>output_encoding</string> </key>
<value> <string>utf-8</string> </value>
</item>
<item>
<key> <string>title</string> </key>
<value> <unicode></unicode> </value>
</item>
</dictionary>
</pickle>
</record>
</ZopeData>
<html xmlns:tal="http://xml.zope.org/namespaces/tal"
xmlns:metal="http://xml.zope.org/namespaces/metal">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test RTL</title>
</head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">RTL Zuite</td></tr>
</thead><tbody>
<tal:block metal:use-macro="here/Zuite_CommonTemplate/macros/init" />
<tr>
<td>open</td>
<td>${base_url}</td>
<td></td>
</tr>
<tr>
<td>assertElementPresent</td>
<td>//body[@dir='ltr']</td>
<td></td>
</tr>
<tr>
<td>assertElementNotPresent</td>
<td>//body[@dir='rtl']</td>
<td></td>
</tr>
<tr>
<td>select</td>
<td>name=select_language</td>
<td>فارسی</td>
</tr>
<tr>
<td>clickAndWait</td>
<td>Base_doLanguage:method</td>
<td></td>
</tr>
<tr>
<td>assertElementPresent</td>
<td>//body[@dir='rtl']</td>
<td></td>
</tr>
<tr>
<td>assertElementNotPresent</td>
<td>//body[@dir='ltr']</td>
<td></td>
</tr>
</tbody></table>
</body></html>
\ No newline at end of file
erp5_ui_test_core erp5_ui_test_core
\ No newline at end of file erp5_l10n_fa
\ No newline at end of file
...@@ -150,6 +150,14 @@ div.index_html table { ...@@ -150,6 +150,14 @@ div.index_html table {
text-align: left; text-align: left;
} }
body[dir="rtl"] div.index_html table {
text-align: right;
}
body[dir="rtl"] div.index_html {
text-align: right !important;
}
.ModuleShortcut div { .ModuleShortcut div {
margin-left: 0.5em; margin-left: 0.5em;
text-indent: -0.5em; text-indent: -0.5em;
...@@ -157,6 +165,11 @@ div.index_html table { ...@@ -157,6 +165,11 @@ div.index_html table {
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
body[dir="rtl"] .ModuleShortcut div {
margin-left: inherit;
margin-right: 0.5em;
}
#main_bar button .description, /* BBB */ #main_bar button .description, /* BBB */
.main_bar button .description, .main_bar button .description,
#context_bar button .description, /* BBB */ #context_bar button .description, /* BBB */
...@@ -194,6 +207,13 @@ div.index_html table { ...@@ -194,6 +207,13 @@ div.index_html table {
vertical-align: middle; vertical-align: middle;
} }
body[dir="rtl"] #main_bar .first, /* BBB */
body[dir="rtl"] .main_bar .first,
body[dir="rtl"] #context_bar .first, /* BBB */
body[dir="rtl"] .context_bar .first {
float: right;
}
#context_bar #jump, /* BBB */ #context_bar #jump, /* BBB */
.context_bar .jump, .context_bar .jump,
#main_bar .jump, /* BBB */ #main_bar .jump, /* BBB */
...@@ -217,6 +237,13 @@ div.index_html table { ...@@ -217,6 +237,13 @@ div.index_html table {
vertical-align: middle; vertical-align: middle;
} }
body[dir="rtl"] #main_bar .second, /* BBB */
body[dir="rtl"] .main_bar .second,
body[dir="rtl"] #context_bar .second, /* BBB */
body[dir="rtl"] .context_bar .second {
float: left;
}
#main_bar button, /* BBB */ #main_bar button, /* BBB */
.main_bar button, .main_bar button,
#context_bar button, /* BBB */ #context_bar button, /* BBB */
...@@ -253,6 +280,11 @@ div.index_html table { ...@@ -253,6 +280,11 @@ div.index_html table {
float: left; float: left;
} }
body[dir="rtl"] #context_bar .tool_buttons button, /* BBB */
body[dir="rtl"] .context_bar .tool_buttons button {
float: right;
}
#main_bar button .image, /* BBB */ #main_bar button .image, /* BBB */
.main_bar button .image, .main_bar button .image,
#context_bar button .image, /* BBB */ #context_bar button .image, /* BBB */
...@@ -400,10 +432,16 @@ fieldset.bottom > .field > label { ...@@ -400,10 +432,16 @@ fieldset.bottom > .field > label {
float: left; float: left;
} }
body[dir="rtl"] .content .field label,
body[dir="rtl"] .content .field .input {
float: right;
}
/* Exception case of the previous generic rule /* Exception case of the previous generic rule
The CSS statement below fix bug #517: it doesn't make sense to have The CSS statement below fix bug #517: it doesn't make sense to have
floating div in bottom field since label are hidden. */ floating div in bottom field since label are hidden. */
fieldset.bottom .field .input { fieldset.bottom .field .input,
body[dir="rtl"] fieldset.bottom .field .input {
float: inherit; float: inherit;
} }
...@@ -466,6 +504,21 @@ span.search { ...@@ -466,6 +504,21 @@ span.search {
float: left; float: left;
} }
body[dir="rtl"] #jump, /* BBB */
body[dir="rtl"] span.jump,
body[dir="rtl"] #action, /* BBB */
body[dir="rtl"] span.action,
body[dir="rtl"] #favourites, /* BBB */
body[dir="rtl"] span.favourites,
body[dir="rtl"] #modules, /* BBB */
body[dir="rtl"] span.modules,
body[dir="rtl"] #language, /* BBB */
body[dir="rtl"] span.language,
body[dir="rtl"] #search, /* BBB */
body[dir="rtl"] span.search {
float: right;
}
#favourites button .image, /* BBB */ #favourites button .image, /* BBB */
span.favourites button .image { span.favourites button .image {
background-image: url('images/favourite.png'); background-image: url('images/favourite.png');
...@@ -503,6 +556,11 @@ span.search button .image { ...@@ -503,6 +556,11 @@ span.search button .image {
padding-bottom: .4em; padding-bottom: .4em;
} }
body[dir="rtl"] #status, /* BBB */
body[dir="rtl"] .status {
direction: rtl;
}
/* Context bar */ /* Context bar */
#context_bar, /* BBB */ #context_bar, /* BBB */
...@@ -524,6 +582,11 @@ span.search button .image { ...@@ -524,6 +582,11 @@ span.search button .image {
margin-right: 2px; margin-right: 2px;
} }
body[dir="rtl"] #context_bar .tool_buttons a, /* BBB */
body[dir="rtl"] .context_bar .tool_buttons a {
float: right;
}
.separator { .separator {
height: 24px; height: 24px;
width: 2px; width: 2px;
...@@ -533,6 +596,10 @@ span.search button .image { ...@@ -533,6 +596,10 @@ span.search button .image {
float: left; float: left;
} }
body[dir="rtl"] .separator {
float: right;
}
#main_bar .separator, /* BBB */ #main_bar .separator, /* BBB */
.main_bar .separator { .main_bar .separator {
background-image: url('images/sepafon.png'); background-image: url('images/sepafon.png');
...@@ -697,6 +764,11 @@ span.search button .image { ...@@ -697,6 +764,11 @@ span.search button .image {
margin-bottom: 5px; margin-bottom: 5px;
} }
body[dir="rtl"] #breadcrumb, /* BBB */
body[dir="rtl"] .breadcrumb {
float: right;
}
#breadcrumb a, /* BBB */ #breadcrumb a, /* BBB */
.breadcrumb a { .breadcrumb a {
color: <dtml-var link_color>; color: <dtml-var link_color>;
...@@ -707,6 +779,11 @@ span.search button .image { ...@@ -707,6 +779,11 @@ span.search button .image {
float: right; float: right;
} }
body[dir="rtl"] #logged_in_as, /* BBB */
body[dir="rtl"] .logged_in_as {
float: left;
}
#logged_in_as .logged_txt, /* BBB */ #logged_in_as .logged_txt, /* BBB */
.logged_in_as .logged_txt{ .logged_in_as .logged_txt{
color: <dtml-var link_color>; color: <dtml-var link_color>;
...@@ -773,6 +850,10 @@ span.search button .image { ...@@ -773,6 +850,10 @@ span.search button .image {
float: right; float: right;
} }
body[dir="rtl"] .document .actions button.save {
float: left;
}
.document .actions button.save span.image { .document .actions button.save span.image {
width: 48px; width: 48px;
height: 50px; height: 50px;
...@@ -789,6 +870,12 @@ span.search button .image { ...@@ -789,6 +870,12 @@ span.search button .image {
bottom: -1px; bottom: -1px;
} }
body[dir="rtl"] .document .actions ul {
float: right;
margin-right: inherit;
margin-left: 50px;
}
.document .actions li { .document .actions li {
float: left; float: left;
border: 1px solid <dtml-var document_border_color>; border: 1px solid <dtml-var document_border_color>;
...@@ -799,6 +886,10 @@ span.search button .image { ...@@ -799,6 +886,10 @@ span.search button .image {
-webkit-border-top-right-radius: 10px; -webkit-border-top-right-radius: 10px;
} }
body[dir="rtl"] .document .actions li {
float: right;
}
.document .actions li.selected { .document .actions li.selected {
border-bottom-color: <dtml-var background_color>; border-bottom-color: <dtml-var background_color>;
} }
...@@ -1080,6 +1171,10 @@ div.pdf-preview-navigation img.last{ ...@@ -1080,6 +1171,10 @@ div.pdf-preview-navigation img.last{
width: auto; width: auto;
} }
body[dir="rtl"] .horizontal_align_form_box > div.input > fieldset > div.field {
float: right;
}
.horizontal_align_form_box > div.input > fieldset > div.field > label { .horizontal_align_form_box > div.input > fieldset > div.field > label {
width: auto; width: auto;
padding-top: 2px; padding-top: 2px;
...@@ -1113,3 +1208,12 @@ fieldset > div.large-gadget { ...@@ -1113,3 +1208,12 @@ fieldset > div.large-gadget {
a.zocial { a.zocial {
margin-top: 10px; margin-top: 10px;
} }
body[dir="rtl"] .access_tab_table td > div {
float: right !important;
}
body[dir="rtl"] .access_tab_table td > div > ul {
padding-right: 10px !important;
padding-left: 0 !important;
}
...@@ -106,11 +106,19 @@ div.listbox-head div.listbox-head-title{ ...@@ -106,11 +106,19 @@ div.listbox-head div.listbox-head-title{
width:auto; width:auto;
} }
body[dir="rtl"] div.listbox-head div.listbox-head-title{
float:right;
}
div.listbox-head div.listbox-head-navigation{ div.listbox-head div.listbox-head-navigation{
float:right; float:right;
width:auto; width:auto;
} }
body[dir="rtl"] div.listbox-head div.listbox-head-navigation{
float:left;
}
div.listbox-head div.listbox-head-results{ div.listbox-head div.listbox-head-results{
float: right; float: right;
width: auto; width: auto;
...@@ -139,10 +147,20 @@ div.listbox-header-box{ ...@@ -139,10 +147,20 @@ div.listbox-header-box{
padding-right: 5px; padding-right: 5px;
} }
body[dir="rtl"] div.listbox-header-box{
float:right;
padding-left: 5px;
padding-right: inherit;
}
table.listbox tr.listbox-label-line th.listbox-table-header-cell span.listbox-table-header-column-title{ table.listbox tr.listbox-label-line th.listbox-table-header-cell span.listbox-table-header-column-title{
float:left; float:left;
} }
body[dir="rtl"] table.listbox tr.listbox-label-line th.listbox-table-header-cell span.listbox-table-header-column-title{
float:right;
}
/* Listbox Footer */ /* Listbox Footer */
div.listbox-footer{ div.listbox-footer{
float:left; float:left;
...@@ -343,6 +361,11 @@ table.listbox td { ...@@ -343,6 +361,11 @@ table.listbox td {
font-weight: normal; font-weight: normal;
} }
body[dir="rtl"] table.listbox th,
body[dir="rtl"] table.listbox td {
text-align:right;
}
table.listbox tr.listbox-label-line{ table.listbox tr.listbox-label-line{
background-color:#C1DAEB; background-color:#C1DAEB;
color:#001730; color:#001730;
...@@ -356,6 +379,11 @@ table.listbox tr.listbox-search-line th{ ...@@ -356,6 +379,11 @@ table.listbox tr.listbox-search-line th{
padding-left:1px; padding-left:1px;
} }
body[dir="rtl"] table.listbox tr.listbox-search-line th{
padding-right:1px;
padding-left:5px;
}
/* Select columns */ /* Select columns */
table.listbox tr.listbox-label-line th.listbox-table-select-cell, table.listbox tr.listbox-label-line th.listbox-table-select-cell,
table.listbox tr.listbox-search-line th.listbox-table-select-cell, table.listbox tr.listbox-search-line th.listbox-table-select-cell,
...@@ -424,6 +452,10 @@ table.listbox th button{ ...@@ -424,6 +452,10 @@ table.listbox th button{
background: transparent; background: transparent;
} }
body[dir="rtl"] table.listbox th button{
float:right;
}
table.listbox th button.sort-button { table.listbox th button.sort-button {
text-decoration: underline; text-decoration: underline;
padding: 0px; padding: 0px;
......
...@@ -36,6 +36,7 @@ ...@@ -36,6 +36,7 @@
global preferred_html_style_acknowledgeable_message portal_preferences/getPreferredHtmlStyleAcknowledgeableMessage; global preferred_html_style_acknowledgeable_message portal_preferences/getPreferredHtmlStyleAcknowledgeableMessage;
global developper_shortcut_render python: (preferred_html_style_developper_mode or preferred_html_style_translator_mode) and portal.developper_shortcut_render; global developper_shortcut_render python: (preferred_html_style_developper_mode or preferred_html_style_translator_mode) and portal.developper_shortcut_render;
global selected_language portal/Localizer/get_selected_language; global selected_language portal/Localizer/get_selected_language;
global language_direction python: ((selected_language == 'fa') and 'rtl') or 'ltr';
" /> " />
</tal:block> </tal:block>
<tal:block metal:define-macro="header_boilerplate"> <tal:block metal:define-macro="header_boilerplate">
......
...@@ -27,7 +27,7 @@ DEPRECATION: ...@@ -27,7 +27,7 @@ DEPRECATION:
<tal:block metal:use-macro="global_definitions_macros/render_css_js" /> <tal:block metal:use-macro="global_definitions_macros/render_css_js" />
<tal:block metal:define-slot="head"></tal:block> <tal:block metal:define-slot="head"></tal:block>
</head> </head>
<body tal:attributes="class body_css_class|nothing"> <body tal:attributes="class body_css_class|nothing; dir language_direction;">
<form id="main_form" <form id="main_form"
class="main_form" class="main_form"
onsubmit="changed=false; return true" onsubmit="changed=false; return true"
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment