Skip to content

Commit 8ba5174

Browse files
florianMoflorianMo
authored
Improved: style helveticus locale selection page, add filter (OFBIZ-13354) (#954)
Improved: Style locale selection page on Helveticus theme. Add a plain text filter to quickly find what you're searching. (OFBIZ-13354) Thanks: Néréide team
1 parent 594ad28 commit 8ba5174

File tree

6 files changed

+445
-0
lines changed

6 files changed

+445
-0
lines changed

‎framework/common/config/CommonUiLabels.xml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13729,6 +13729,15 @@
1372913729
<value xml:lang="zh-CN">邮编</value>
1373013730
<value xml:lang="zh-TW">郵遞區號</value>
1373113731
</property>
13732+
<property key="CommonTypeToFilter">
13733+
<value xml:lang="ar">تصفية</value>
13734+
<value xml:lang="de">filtern</value>
13735+
<value xml:lang="en">filter</value>
13736+
<value xml:lang="es">filtrar</value>
13737+
<value xml:lang="es-CL">filtrar</value>
13738+
<value xml:lang="es-MX">filtrar</value>
13739+
<value xml:lang="fr">filtrer</value>
13740+
</property>
1373213741
<property key="Content">
1373313742
<value xml:lang="ar">المحتوى</value>
1373413743
<value xml:lang="cs">Obsah</value>

‎themes/helveticus/template/includes/ListLocales.ftl‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
<#--
2+
Licensed to the Apache Software Foundation (ASF) under one
3+
or more contributor license agreements. See the NOTICE file
4+
distributed with this work for additional information
5+
regarding copyright ownership. The ASF licenses this file
6+
to you under the Apache License, Version 2.0 (the
7+
"License"); you may not use this file except in compliance
8+
with the License. You may obtain a copy of the License at
9+
10+
http://www.apache.org/licenses/LICENSE-2.0
11+
12+
Unless required by applicable law or agreed to in writing,
13+
software distributed under the License is distributed on an
14+
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
15+
KIND, either express or implied. See the License for the
16+
specific language governing permissions and limitations
17+
under the License.
18+
-->
19+
<div id="localeContainer">
20+
<div id="header">
21+
<input class="filter" id="search" type="text" placeholder="${uiLabelMap.CommonTypeToFilter}" autofocus/>
22+
<a href="<@ofbizUrl>main</@ofbizUrl>">${uiLabelMap.CommonCancel}</a>
23+
</div>
24+
<div id="locales">
25+
<#assign availableLocales = Static["org.apache.ofbiz.base.util.UtilMisc"].availableLocales()/>
26+
<#list availableLocales as availableLocale>
27+
<#assign langAttr = availableLocale.toString()?replace("_", "-")>
28+
<#assign langDir = "ltr">
29+
<#if !Static["java.awt.ComponentOrientation"].getOrientation(availableLocale).isLeftToRight()>
30+
<#assign langDir = "rtl">
31+
</#if>
32+
<div class="locale" lang="${langAttr}" dir="${langDir}">
33+
<a href="<@ofbizUrl>setSessionLocale?newLocale=${availableLocale.toString()}</@ofbizUrl>">
34+
${availableLocale.getDisplayName(availableLocale)}&nbsp;[${langAttr}]
35+
</a>
36+
</div>
37+
</#list>
38+
</div>
39+
</div>
40+
41+
<script>
42+
$(document).ready( function() {
43+
$('#search').on('keyup', function() {
44+
const value = $(this).val().toLowerCase();
45+
$('#locales .locale').filter(function() {
46+
const t = $(this);
47+
t.toggle(t.text().toLowerCase().indexOf(value) > -1)
48+
});
49+
});
50+
});
51+
</script>
52+
53+
<style>
54+
/* always reserve scrollbar width, to prevent flickering when filtering locales and scrollbar appears/disappears */
55+
html {
56+
scrollbar-gutter: stable;
57+
}
58+
59+
body {
60+
display: flex;
61+
flex-direction: column;
62+
padding: 2rem;
63+
background-color: #181c32 !important;
64+
65+
#localeContainer {
66+
display: flex;
67+
flex-direction: column;
68+
align-items: center;
69+
70+
#header {
71+
display: flex;
72+
flex-direction: column;
73+
align-items: center;
74+
width: 100%;
75+
max-width: 52rem;
76+
margin: 2rem 0;
77+
78+
input {
79+
height: 4rem;
80+
font-size: 3rem;
81+
padding: 2rem;
82+
background-color: #3F4254;
83+
color: white;
84+
}
85+
86+
a {
87+
display: inline-block;
88+
font-size: 2rem;
89+
margin-top: 2rem;
90+
color: white;
91+
92+
&:hover {
93+
text-decoration: underline;
94+
}
95+
}
96+
}
97+
98+
#locales {
99+
display: flex;
100+
justify-content: space-between;
101+
flex-wrap: wrap;
102+
gap: 1rem;
103+
104+
/* avoid a last line with big gaps between locales */
105+
&::after {
106+
content: "";
107+
flex: auto;
108+
}
109+
110+
.locale {
111+
width: fit-content;
112+
border: 1px solid #dfe0e4;
113+
border-radius: 0.5rem;
114+
transition: all 0.1s ease-in-out;
115+
background-color: #3F4254;
116+
font-size: 1.6rem;
117+
118+
&:hover {
119+
background-color: #e1f0ff;
120+
border: 1px solid #e1f0ff;
121+
}
122+
123+
a {
124+
display: inline-block;
125+
padding: 1rem;
126+
color: white;
127+
font-weight: bold;
128+
cursor: pointer;
129+
130+
&:hover {
131+
color: #181c32
132+
}
133+
}
134+
}
135+
}
136+
}
137+
}
138+
</style>

‎themes/helveticus/template/includes/Lookup.ftl‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<#--
2+
Licensed to the Apache Software Foundation (ASF) under one
3+
or more contributor license agreements. See the NOTICE file
4+
distributed with this work for additional information
5+
regarding copyright ownership. The ASF licenses this file
6+
to you under the Apache License, Version 2.0 (the
7+
"License"); you may not use this file except in compliance
8+
with the License. You may obtain a copy of the License at
9+
10+
http://www.apache.org/licenses/LICENSE-2.0
11+
12+
Unless required by applicable law or agreed to in writing,
13+
software distributed under the License is distributed on an
14+
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
15+
KIND, either express or implied. See the License for the
16+
specific language governing permissions and limitations
17+
under the License.
18+
-->
19+
20+
<#assign docLangAttr = locale.toString()?replace("_", "-")>
21+
<#assign initialLocale = locale.toString()>
22+
<#assign langDir = "ltr">
23+
<#if "ar.iw"?contains(docLangAttr?substring(0, 2))>
24+
<#assign langDir = "rtl">
25+
</#if>
26+
<html lang="${docLangAttr}" dir="${langDir}" xmlns="http://www.w3.org/1999/xhtml">
27+
<head>
28+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
29+
<title>${title!}</title>
30+
<#if layoutSettings.shortcutIcon?has_content>
31+
<#assign shortcutIcon = layoutSettings.shortcutIcon/>
32+
<#elseif layoutSettings.VT_SHORTCUT_ICON?has_content>
33+
<#assign shortcutIcon = layoutSettings.VT_SHORTCUT_ICON />
34+
</#if>
35+
<#if shortcutIcon?has_content>
36+
<link rel="shortcut icon" href="<@ofbizContentUrl>${StringUtil.wrapString(shortcutIcon)+".ico"}</@ofbizContentUrl>" type="image/x-icon">
37+
<link rel="icon" href="<@ofbizContentUrl>${StringUtil.wrapString(shortcutIcon)+".png"}</@ofbizContentUrl>" type="image/png">
38+
<link rel="icon" sizes="32x32" href="<@ofbizContentUrl>${StringUtil.wrapString(shortcutIcon)+"-32.png"}</@ofbizContentUrl>" type="image/png">
39+
<link rel="icon" sizes="64x64" href="<@ofbizContentUrl>${StringUtil.wrapString(shortcutIcon)+"-64.png"}</@ofbizContentUrl>" type="image/png">
40+
<link rel="icon" sizes="96x96" href="<@ofbizContentUrl>${StringUtil.wrapString(shortcutIcon)+"-96.png"}</@ofbizContentUrl>" type="image/png">
41+
</#if>
42+
<#if layoutSettings.VT_STYLESHEET_LESS?has_content>
43+
<#list layoutSettings.VT_STYLESHEET_LESS as styleSheet>
44+
<link rel="stylesheet/less" href="<@ofbizContentUrl>${StringUtil.wrapString(styleSheet)}</@ofbizContentUrl>" type="text/css"/>
45+
</#list>
46+
</#if>
47+
<#if layoutSettings.javaScripts?has_content>
48+
<#--layoutSettings.javaScripts is a list of java scripts. -->
49+
<#-- use a Set to make sure each javascript is declared only once, but iterate the list to maintain the correct order -->
50+
<#assign javaScriptsSet = Static["org.apache.ofbiz.base.util.UtilMisc"].toSet(layoutSettings.javaScripts)/>
51+
<#list layoutSettings.javaScripts as javaScript>
52+
<#if javaScriptsSet.contains(javaScript)>
53+
<#assign nothing = javaScriptsSet.remove(javaScript)/>
54+
<script src="<@ofbizContentUrl>${StringUtil.wrapString(javaScript)}</@ofbizContentUrl>"
55+
type="text/javascript"></script>
56+
</#if>
57+
</#list>
58+
</#if>
59+
<#if layoutSettings.styleSheets?has_content>
60+
<#list layoutSettings.styleSheets as styleSheet>
61+
<link rel="stylesheet" href="<@ofbizContentUrl>${styleSheet}</@ofbizContentUrl>" type="text/css"/>
62+
</#list>
63+
</#if>
64+
<#if layoutSettings.VT_STYLESHEET?has_content>
65+
<#list layoutSettings.VT_STYLESHEET as styleSheet>
66+
<link rel="stylesheet" href="<@ofbizContentUrl>${styleSheet}</@ofbizContentUrl>" type="text/css"/>
67+
</#list>
68+
</#if>
69+
<#if layoutSettings.VT_HELPSTYLESHEET?has_content && lookupType?has_content>
70+
<#list layoutSettings.VT_HELPSTYLESHEET as styleSheet>
71+
<link rel="stylesheet" href="<@ofbizContentUrl>${styleSheet}</@ofbizContentUrl>" type="text/css"/>
72+
</#list>
73+
</#if>
74+
<#if layoutSettings.rtlStyleSheets?has_content && "rtl" == langDir>
75+
<#list layoutSettings.rtlStyleSheets as styleSheet>
76+
<link rel="stylesheet" href="<@ofbizContentUrl>${styleSheet}</@ofbizContentUrl>" type="text/css"/>
77+
</#list>
78+
</#if>
79+
<#if layoutSettings.VT_RTL_STYLESHEET?has_content && "rtl" == langDir>
80+
<#list layoutSettings.VT_RTL_STYLESHEET as styleSheet>
81+
<link rel="stylesheet" href="<@ofbizContentUrl>${styleSheet}</@ofbizContentUrl>" type="text/css"/>
82+
</#list>
83+
</#if>
84+
85+
<script type="text/javascript">
86+
// This code inserts the value lookedup by a popup window back into the associated form element
87+
var re_id = new RegExp('id=(\\d+)');
88+
var num_id = (re_id.exec(String(window.location))
89+
? new Number(RegExp.$1) : 0);
90+
var obj_caller = (window.opener ? window.opener.lookups[num_id] : null);
91+
if (obj_caller == null)
92+
obj_caller = window.opener;
93+
94+
// function passing selected value to calling window
95+
function set_multivalues(value) {
96+
obj_caller.target.value = value;
97+
var thisForm = obj_caller.target.form;
98+
var evalString = "";
99+
100+
if (arguments.length > 2) {
101+
for (var i = 1; i < arguments.length; i = i + 2) {
102+
evalString = "setSourceColor(thisForm." + arguments[i] + ")";
103+
eval(evalString);
104+
evalString = "thisForm." + arguments[i] + ".value='" + arguments[i + 1] + "'";
105+
eval(evalString);
106+
}
107+
}
108+
window.close();
109+
}
110+
</script>
111+
</head>
112+
<body style="background-color: WHITE;">

0 commit comments

Comments
 (0)