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 @@
margin-top: 0.5em;
}
body[dir="rtl"] #page_wrapper {
text-align: right;
}
#loading-wrapper{
position:absolute;
width:250px;
......@@ -156,6 +160,10 @@ div.edit-form {
width:78%;
}
body[dir="rtl"] #tabs {
float: right;
}
#tabs ul {
margin : 0em;
padding: 0em;
......@@ -177,6 +185,10 @@ li.tab {
margin-right: 1px;
}
body[dir="rtl"] li.tab {
float: right;
}
#tabs li span{
padding: 0px 10px;
display: block;
......@@ -226,6 +238,10 @@ div.toggable_dialog{
border-style: none;
}
body[dir="rtl"] #add_new_tab_dialog_link{
float: right;
}
#create_own_pad_dialog_link{
cursor: pointer;
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
\ No newline at end of file
erp5_ui_test_core
erp5_l10n_fa
\ No newline at end of file
......@@ -150,6 +150,14 @@ div.index_html table {
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 {
margin-left: 0.5em;
text-indent: -0.5em;
......@@ -157,6 +165,11 @@ div.index_html table {
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,
#context_bar button .description, /* BBB */
......@@ -194,6 +207,13 @@ div.index_html table {
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,
#main_bar .jump, /* BBB */
......@@ -217,6 +237,13 @@ div.index_html table {
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,
#context_bar button, /* BBB */
......@@ -253,6 +280,11 @@ div.index_html table {
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,
#context_bar button .image, /* BBB */
......@@ -400,10 +432,16 @@ fieldset.bottom > .field > label {
float: left;
}
body[dir="rtl"] .content .field label,
body[dir="rtl"] .content .field .input {
float: right;
}
/* Exception case of the previous generic rule
The CSS statement below fix bug #517: it doesn't make sense to have
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;
}
......@@ -466,6 +504,21 @@ span.search {
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 */
span.favourites button .image {
background-image: url('images/favourite.png');
......@@ -503,6 +556,11 @@ span.search button .image {
padding-bottom: .4em;
}
body[dir="rtl"] #status, /* BBB */
body[dir="rtl"] .status {
direction: rtl;
}
/* Context bar */
#context_bar, /* BBB */
......@@ -524,6 +582,11 @@ span.search button .image {
margin-right: 2px;
}
body[dir="rtl"] #context_bar .tool_buttons a, /* BBB */
body[dir="rtl"] .context_bar .tool_buttons a {
float: right;
}
.separator {
height: 24px;
width: 2px;
......@@ -533,6 +596,10 @@ span.search button .image {
float: left;
}
body[dir="rtl"] .separator {
float: right;
}
#main_bar .separator, /* BBB */
.main_bar .separator {
background-image: url('images/sepafon.png');
......@@ -697,6 +764,11 @@ span.search button .image {
margin-bottom: 5px;
}
body[dir="rtl"] #breadcrumb, /* BBB */
body[dir="rtl"] .breadcrumb {
float: right;
}
#breadcrumb a, /* BBB */
.breadcrumb a {
color: <dtml-var link_color>;
......@@ -707,6 +779,11 @@ span.search button .image {
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{
color: <dtml-var link_color>;
......@@ -773,6 +850,10 @@ span.search button .image {
float: right;
}
body[dir="rtl"] .document .actions button.save {
float: left;
}
.document .actions button.save span.image {
width: 48px;
height: 50px;
......@@ -789,6 +870,12 @@ span.search button .image {
bottom: -1px;
}
body[dir="rtl"] .document .actions ul {
float: right;
margin-right: inherit;
margin-left: 50px;
}
.document .actions li {
float: left;
border: 1px solid <dtml-var document_border_color>;
......@@ -799,6 +886,10 @@ span.search button .image {
-webkit-border-top-right-radius: 10px;
}
body[dir="rtl"] .document .actions li {
float: right;
}
.document .actions li.selected {
border-bottom-color: <dtml-var background_color>;
}
......@@ -1080,6 +1171,10 @@ div.pdf-preview-navigation img.last{
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 {
width: auto;
padding-top: 2px;
......@@ -1113,3 +1208,12 @@ fieldset > div.large-gadget {
a.zocial {
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{
width:auto;
}
body[dir="rtl"] div.listbox-head div.listbox-head-title{
float:right;
}
div.listbox-head div.listbox-head-navigation{
float:right;
width:auto;
}
body[dir="rtl"] div.listbox-head div.listbox-head-navigation{
float:left;
}
div.listbox-head div.listbox-head-results{
float: right;
width: auto;
......@@ -139,10 +147,20 @@ div.listbox-header-box{
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{
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 */
div.listbox-footer{
float:left;
......@@ -343,6 +361,11 @@ table.listbox td {
font-weight: normal;
}
body[dir="rtl"] table.listbox th,
body[dir="rtl"] table.listbox td {
text-align:right;
}
table.listbox tr.listbox-label-line{
background-color:#C1DAEB;
color:#001730;
......@@ -356,6 +379,11 @@ table.listbox tr.listbox-search-line th{
padding-left:1px;
}
body[dir="rtl"] table.listbox tr.listbox-search-line th{
padding-right:1px;
padding-left:5px;
}
/* Select columns */
table.listbox tr.listbox-label-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{
background: transparent;
}
body[dir="rtl"] table.listbox th button{
float:right;
}
table.listbox th button.sort-button {
text-decoration: underline;
padding: 0px;
......
......@@ -36,6 +36,7 @@
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 selected_language portal/Localizer/get_selected_language;
global language_direction python: ((selected_language == 'fa') and 'rtl') or 'ltr';
" />
</tal:block>
<tal:block metal:define-macro="header_boilerplate">
......
......@@ -27,7 +27,7 @@ DEPRECATION:
<tal:block metal:use-macro="global_definitions_macros/render_css_js" />
<tal:block metal:define-slot="head"></tal:block>
</head>
<body tal:attributes="class body_css_class|nothing">
<body tal:attributes="class body_css_class|nothing; dir language_direction;">
<form id="main_form"
class="main_form"
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