IDEMPIERE-4506: When using font icon, changing Calendar theme to grey (#318)

This commit is contained in:
Deepak Pansheriya 2020-10-26 08:02:17 +05:30 committed by GitHub
parent 57e4e3fceb
commit 692533fda5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 100 additions and 19 deletions

View File

@ -295,3 +295,6 @@
.z-icon-GetMail:before { .z-icon-GetMail:before {
content: "\f0e0"; content: "\f0e0";
} }
.z-icon-Calendar:before {
content: "\f073";
}

View File

@ -13,15 +13,15 @@
color: blue !important; color: blue !important;
} }
.tabs * { .tabs * {
background: #7EAAC6; background: #ececec;
cursor: pointer; cursor: pointer;
} }
.tabs .bd { .tabs .bd {
background: #7EAAC6; background: #c5c5c5;
zoom: 1; zoom: 1;
} }
.tabs .t1, .tabs .t2, .tabs .t3 { .tabs .t1, .tabs .t2, .tabs .t3 {
background: #7EAAC6; background: #e4e4e4;
font-size: 0; font-size: 0;
line-height: 0; line-height: 0;
margin: 0 2px; margin: 0 2px;
@ -38,7 +38,7 @@
margin: 0 1px; margin: 0 1px;
} }
.tabs .b1, .tabs .b2, .tabs .b3 { .tabs .b1, .tabs .b2, .tabs .b3 {
background: #7EAAC6; background: #e4e4e4;
font-size: 0; font-size: 0;
line-height: 0; line-height: 0;
margin: 0 2px; margin: 0 2px;
@ -55,7 +55,7 @@
margin: 0 1px; margin: 0 1px;
} }
.tabs .cm { .tabs .cm {
background: #C3E0F2; background: #c7c7c7;
margin: 0 1px; margin: 0 1px;
border-left: 1px solid white; border-left: 1px solid white;
border-right: 1px solid white; border-right: 1px solid white;
@ -66,7 +66,7 @@
vertical-align: middle; vertical-align: middle;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
color: #0F3B82; color: #000000;
padding: 2px 5px; padding: 2px 5px;
} }
.tabs .text, .tabs .text * { .tabs .text, .tabs .text * {
@ -76,8 +76,7 @@
position: relative; position: relative;
} }
.top { .top {
background: #f1fcff; border-bottom: 0.2em solid #dedede;
border-bottom: 0.2em solid #B5D5E9;
overflow: hidden; overflow: hidden;
height: 0.7em; height: 0.7em;
position: absolute; position: absolute;
@ -156,3 +155,64 @@
.purple { .purple {
background: #B373B3!important; background: #B373B3!important;
} }
.z-font-Calendar .text {
color: #333333;
}
.z-font-Calendar .cnt {
background: #ffffff;
}
.z-font-Calendar .bd {
background: #ffffff;
}
.z-font-Calendar .t1,.z-font-Calendar .t2,.z-font-Calendar .t3 {
background: #ffffff;
}
.z-font-Calendar .b1,.z-font-Calendar .b2,.z-font-Calendar .b3 {
background: #ffffff;
}
.z-cal-font-theme .z-calendars-inner {
background: #e4e4e4;
}
.z-cal-font-theme .z-calendars-body {
background: #e4e4e4;
}
.z-cal-font-theme .z-calendars-t1,
.z-cal-font-theme .z-calendars-t2,
.z-cal-font-theme .z-calendars-t3 {
background: #e4e4e4;
}
.z-cal-font-theme .z-calendars-b1,
.z-cal-font-theme .z-calendars-b2,
.z-cal-font-theme .z-calendars-b3 {
background: #e4e4e4;
}
.z-cal-font-theme .z-calendars-month-header {
background-color: #e4e4e4;
}
.z-cal-font-theme .z-calendars-month-date {
background-color: #e9e9e9;
}
.z-cal-font-theme .z-calendars-month-date-off {
background-color: #c5c5c5;
}
.z-calendars-week-cnt .z-calendars-timezone {
background-color: #cfcfcf;
border-right: 1px solid #a2a2a2;
color: #000000;
}
.z-calendars-timezone {
color: #000000;
}
.z-calendars-week-cnt {
background-color: #ececec;
}
.z-calendars-daylong-body {
background-color: #ececec;
border-color: #808080 white white #747474;
}
.z-calendars-hour-of-day,
.z-calendars-day-of-week-inner,
.z-calendars-day-of-week-inner .z-calendars-week-today,
.z-calendars-month-header .z-calendars-day-of-week {
color: #000000 !important;
}

View File

@ -6,6 +6,8 @@
import org.compiere.util.Msg; import org.compiere.util.Msg;
import org.compiere.util.Env; import org.compiere.util.Env;
import org.compiere.util.Util; import org.compiere.util.Util;
import org.adempiere.webui.theme.ThemeManager;
var today = Msg.getMsg(Env.getCtx(),"Today"); var today = Msg.getMsg(Env.getCtx(),"Today");
var refresh = Util.cleanAmp(Msg.getMsg(Env.getCtx(),"Refresh")); var refresh = Util.cleanAmp(Msg.getMsg(Env.getCtx(),"Refresh"));
var switchTimeZone = Msg.getMsg(Env.getCtx(),"SwitchTimeZone"); var switchTimeZone = Msg.getMsg(Env.getCtx(),"SwitchTimeZone");
@ -17,16 +19,22 @@
var FirstDayofWeek = Msg.getMsg(Env.getCtx(),"FirstDayofWeek"); var FirstDayofWeek = Msg.getMsg(Env.getCtx(),"FirstDayofWeek");
var RequestType = Msg.getElement(Env.getCtx(),"RequestType"); var RequestType = Msg.getElement(Env.getCtx(),"RequestType");
var isFontIcon = ThemeManager.isUseFontIconForImage();
var leftBtn = isFontIcon ? "z-icon-PreviousRecord" : "arrow-left";
var rightBtn = isFontIcon ? "z-icon-NextRecord" : "arrow-right";
var fontClass = isFontIcon ? "z-font-Calendar" : "";
var calendarClass = isFontIcon ? "z-cal-font-theme" : "";
]]></zscript> ]]></zscript>
<style src="/theme/default/zul/calendar/calendar.css"/> <style src="/theme/default/zul/calendar/calendar.css"/>
<borderlayout id="main"> <borderlayout id="main">
<center border="none"> <center border="none">
<calendars firstDayOfWeek="Monday" mold="month" id="cal" xmlns:w="client" w:onBind="try{_overrideMsgCal(); var me=this; setTimeout(function(){me.onSize();},50); }catch(error){} "> <calendars class="${calendarClass}" firstDayOfWeek="Monday" mold="month" id="cal" xmlns:w="client" w:onBind="try{_overrideMsgCal(); var me=this; setTimeout(function(){me.onSize();},50); }catch(error){} ">
<toolbar sclass="calendar-toolbar"> <toolbar sclass="calendar-toolbar">
<div class="float-left"> <div class="float-left">
<hbox> <hbox sclass="cal-header-filter">
<divarrow id="divArrowLeft" type="arrow-left"/> <divarrow id="divArrowLeft" type="${leftBtn}" fontClass="${fontClass}"/>
<divarrow id="divArrowRight" type="arrow-right"/> <divarrow id="divArrowRight" type="${rightBtn}" fontClass="${fontClass}"/>
<div> <div>
<button id="btnCurrentDate" mold="os" label="${today}"/> <button id="btnCurrentDate" mold="os" label="${today}"/>
<button id="btnSwitchTimeZone" mold="os" label="${switchTimeZone}"/> <button id="btnSwitchTimeZone" mold="os" label="${switchTimeZone}"/>

View File

@ -6,22 +6,32 @@
import org.compiere.util.Msg; import org.compiere.util.Msg;
import org.compiere.util.Env; import org.compiere.util.Env;
import org.compiere.util.Util; import org.compiere.util.Util;
import org.adempiere.webui.theme.ThemeManager;
var today = Msg.getMsg(Env.getCtx(),"Today"); var today = Msg.getMsg(Env.getCtx(),"Today");
var refresh = Util.cleanAmp(Msg.getMsg(Env.getCtx(),"Refresh")); var refresh = Util.cleanAmp(Msg.getMsg(Env.getCtx(),"Refresh"));
var isFontIcon = ThemeManager.isUseFontIconForImage();
var leftBtn = isFontIcon ? "z-icon-PreviousRecord" : "arrow-left";
var rightBtn = isFontIcon ? "z-icon-NextRecord" : "arrow-right";
var fontClass = isFontIcon ? "z-font-Calendar" : "";
var calIconClass = isFontIcon ? "z-icon-Calendar" : "";
var calendarClass = isFontIcon ? "z-cal-font-theme" : "";
calendarIcon = isFontIcon ? "" : calendarIcon;
]]></zscript> ]]></zscript>
<style src="/theme/default/zul/calendar/calendar.css"/> <style src="/theme/default/zul/calendar/calendar.css"/>
<calendars firstDayOfWeek="Monday" mold="month" id="cal" xmlns:w="client" w:onBind="try{_overrideMsgCal(); var me=this; setTimeout(function(){me.onSize();},50); }catch(error){} "> <calendars sclass="${calendarClass}" firstDayOfWeek="Monday" mold="month" id="cal" xmlns:w="client" w:onBind="try{_overrideMsgCal(); var me=this; setTimeout(function(){me.onSize();},50); }catch(error){} ">
<toolbar sclass="calendar-toolbar"> <toolbar sclass="calendar-toolbar">
<div class="float-left"> <div class="float-left">
<hbox align="center"> <hbox align="center">
<divarrow id="divArrowLeft" type="arrow-left"/> <divarrow id="divArrowLeft" type="${leftBtn}" fontClass="${fontClass}"/>
<divarrow id="divArrowRight" type="arrow-right"/> <divarrow id="divArrowRight" type="${rightBtn}" fontClass="${fontClass}"/>
<div> <div>
<button id="btnCurrentDate" label="${today}" sclass="btn-small"/> <button id="btnCurrentDate" label="${today}" sclass="btn-small"/>
<separator orient="vertical" spacing="2px"/> <separator orient="vertical" spacing="2px"/>
<label id="lblDate"/> <label id="lblDate"/>
<toolbarbutton id="btnRefresh" label="${refresh}" class="refresh"/> <toolbarbutton id="btnRefresh" label="${refresh}" class="refresh"/>
<toolbarbutton id="btnCal" image="${calendarIcon}"/> <toolbarbutton id="btnCal" image="${calendarIcon}" class="${calIconClass}"/>
</div> </div>
</hbox> </hbox>
</div> </div>

View File

@ -1,4 +1,4 @@
<div class="tabs arrows" xmlns:w="client" forward="onMoveDate(${arg.type})" <div class="tabs arrows ${arg.fontClass}" xmlns:w="client" forward="onMoveDate(${arg.type})"
w:unbind_="function(skipper, after){this.$unbind_(skipper, after);jq(this).unbind('mouseover').unbind('mouseout');}"> w:unbind_="function(skipper, after){this.$unbind_(skipper, after);jq(this).unbind('mouseover').unbind('mouseout');}">
<attribute w:name="bind_"><![CDATA[ <attribute w:name="bind_"><![CDATA[
function (desktop, skipper, after) { function (desktop, skipper, after) {