Bug 293390: layout issues on date/time picker to use system colors and clean up layout.

patch by andrew@progressivex.com, r=vladimir
This commit is contained in:
mvl%exedo.nl 2005-05-10 12:27:00 +00:00
Родитель cce9f2e13a
Коммит fdcd299302
3 изменённых файлов: 128 добавлений и 71 удалений

Просмотреть файл

@ -363,27 +363,28 @@
<binding id="timepicker-hour">
<content>
<xul:spacer flex="1"/>
<xul:vbox anonid="hourbox"
onclick="clickHour(this.parentNode, this.parentNode.getAttribute('value'))">
<xul:spacer flex="1"/>
<xul:box>
<xul:label class="time-picker-hour-label" anonid="hourlabel" xbl:inherits="value=label"/>
<xul:label class="time-picker-hour-label" anonid="hourlabel" xbl:inherits="value=label,selected"/>
</xul:box>
<xul:spacer flex="1"/>
</xul:vbox>
<xul:spacer flex="1"/>
</content>
</binding>
<binding id="timepicker-minute">
<content>
<xul:spacer flex="1"/>
<xul:vbox anonid="minutebox"
xbl:inherits="class"
onclick="clickMinute(this.parentNode, this.parentNode.getAttribute('value'))">
<xul:spacer flex="1"/>
<xul:box>
<xul:label class="time-picker-minute-label" anonid="minutelabel" xbl:inherits="value=label"/>
<xul:label class="time-picker-minute-label" anonid="minutelabel" xbl:inherits="value=label,selected"/>
</xul:box>
<xul:spacer flex="1"/>
</xul:vbox>
<xul:spacer flex="1"/>
</content>
</binding>
@ -1394,9 +1395,12 @@
this.pmRegExp = new RegExp("^(?:"+pmExpr+")$");
// build time display format that mimics "%x" format without seconds
var ampmSep = (pmProbeString.indexOf(' ') != -1? " " : "");
this.kTimeFormatString =
(this.ampmIndex == PRE_INDEX? "%p" + ampmSep + "%I:%M" :
this.ampmIndex == POST_INDEX? "%I:%M" + ampmSep + "%p" : "%H:%M");
if (this.ampmIndex == PRE_INDEX)
this.kTimeFormatString = "%p" + ampmSep + "%I:%M";
else if (this.ampmIndex == POST_INDEX)
this.kTimeFormatString = "%I:%M" + ampmSep + "%p";
else
this.kTimeFormatString = "%H:%M";
]]>
</body>
</method>

Просмотреть файл

@ -68,7 +68,7 @@
/* Box that occupies whole window */
vbox[anonid="time-picker-grids"] {
background-color : #F8F8F8;
background-color : ffffff;
font-size : 8pt;
margin-bottom : 1px;
margin-right : 1px;
@ -77,8 +77,10 @@ vbox[anonid="time-picker-grids"] {
/* Grid for hours */
grid[anonid="time-picker-hour-grid"] {
border-top : 1px solid #2060c7;
border-left : 1px solid #2060c7;
background-color : -moz-Dialog;
color : -moz-DialogText;
border-top : 1px solid -moz-DialogText;
border-left : 1px solid -moz-DialogText;
margin-top : 1px;
}
@ -86,43 +88,57 @@ grid[anonid="time-picker-hour-grid"] {
.time-picker-hour-box-class {
-moz-box-align : center;
border-right : 1px solid #2060c7;
border-bottom : 1px solid #2060c7;
border-right : 1px solid ThreeDShadow;
border-bottom : 1px solid ThreeDShadow;
}
.time-picker-hour-box-class:hover {
color : #ff0000;
background-color : InactiveCaption;
color : InactiveCaptionText;
cursor : pointer;
}
/* selected hour box */
.time-picker-hour-box-class[selected="true"] {
background-color : #6699CC;
background-color : Highlight;
color : HighlightText;
}
.time-picker-hour-box-class[selected="true"]:hover {
background-color : Highlight;
color : HighlightText;
}
/* label inside each minute/hour */
.time-picker-minute-label {
align : center;
}
.time-picker-hour-label {
align : center;
}
.time-picker-minute-label:hover {
color : #ff0000;
cursor: pointer !important;
cursor : pointer !important;
}
.time-picker-hour-label:hover {
color : #ff0000;
cursor: pointer !important;
cursor : pointer !important;
}
.time-picker-minute-box-class {
-moz-box-align : center;
border-right : 1px solid #2060c7;
border-bottom : 1px solid #2060c7;
border-right : 1px solid ThreeDShadow;
border-bottom : 1px solid ThreeDShadow;
}
.time-picker-minute-box-class:hover {
color : #ff0000;
cursor : pointer;
background-color : -moz-Dialog;
color : -moz-DialogText;
}
/* box around five minute grid */
@ -136,29 +152,34 @@ vbox[anonid="time-picker-five-minute-grid-box"] {
grid[anonid="time-picker-five-minute-grid"] {
margin-top : 2px;
margin-right : 2px;
border-top : 1px solid #003399;
border-left : 1px solid #003399;
border-right : 1px solid #003399;
background-color : #e7eeec;
margin-right : 1px;
border-top : 1px solid ThreeDShadow;
border-left : 1px solid ThreeDShadow;
border-right : 1px solid ThreeDShadow;
background-color : ffffff;
}
/* box in five-minute grid elements */
.time-picker-five-minute-class {
-moz-box-align : center;
.time-picker-five-minute-class:hover {
background-color : InactiveCaption;
color : InactiveCaptionText;
cursor : pointer;
}
.time-picker-five-minute-class:hover {
color: #ff0000;
cursor: pointer;
.time-picker-minute-label[selected="true"]:hover {
background-color : Highlight;
color : HighlightText;
cursor : pointer;
}
/* selected five-minute grid element box */
.time-picker-five-minute-class[selected="true"] {
background-color : #6699CC;
background-color : Highlight;
color : HighlightText;
}
/* box around one minute grid */
@ -172,11 +193,11 @@ vbox[anonid="time-picker-one-minute-grid-box"] {
grid[anonid="time-picker-one-minute-grid"] {
margin-top : 2px;
margin-right : 2px;
border-top : 1px solid #003399;
border-left : 1px solid #003399;
border-right : 1px solid #003399;
background-color : #e7eeec;
margin-right : 1px;
border-top : 1px solid ThreeDShadow;
border-left : 1px solid ThreeDShadow;
border-right : 1px solid ThreeDShadow;
background-color : ffffff;
}
/* box in one-minute grid elements */
@ -186,41 +207,54 @@ grid[anonid="time-picker-one-minute-grid"] {
}
.time-picker-one-minute-class:hover {
color: #ff0000;
cursor: pointer;
background-color : InactiveCaption;
color : InactiveCaptionText;
cursor : pointer;
}
.time-picker-one-minute-class[selected="true"]>label:hover {
background-color : Highlight !important;
color : HighlightText !important;
cursor : pointer;
}
/* selected one-minute grid element box */
.time-picker-one-minute-class[selected="true"] {
background-color : #6699CC;
.time-picker-one-minute-class[selected="true"]{
background-color : Highlight;
color : HighlightText;
}
.time-picker-more-control-label {
background-color : #6699CC;
color : #ffffff;
background-color : Highlight;
color : HighlightText;
font-size : 12pt;
height : 12px;
min-width : 40px;
margin : 0px;
border : 1px solid #003399;
border : 1px solid -moz-Dialog;
text-align : center;
}
.time-picker-more-control-label:hover {
background-color : #477eb7;
border-top: 1px solid ThreeDHighlight;
border-left: 1px solid ThreeDHighlight;
border-right: 1px solid ThreeDShadow;
border-bottom: 1px solid ThreeDShadow;
}
.time-picker-more-control-label:hover:active {
background-color : #2063a8;
border-top: 1px solid ThreeDShadow;
border-left: 1px solid ThreeDShadow;
border-right: 1px solid ThreeDHighlight;
border-bottom: 1px solid ThreeDHighlight;
}
/* line across the bottom of the minute boxes, made to line up with more & less tabs */
.time-picker-minutes-bottom {
background-color : #e7eeec;
border-bottom : 1px solid #003399;
border-left : 1px solid #003399;
border-right : 1px solid #003399;
margin-right : 2px;
background-color : -moz-Dialog;
color : -moz-DialogText;
border : 1px solid ThreeDShadow;
margin-right : 1px;
}

Просмотреть файл

@ -42,7 +42,8 @@
}
.minimonth-month-box {
background-color: #EEEEEE;
background-color: -moz-Dialog;
color: -moz-DialogText;
}
.minimonth-month-name {
@ -51,8 +52,10 @@
font-weight: bold;
color: #000000;
text-align: center;
padding: 1px;
border: 1px solid #EEEEEE;
padding: 0px 4px;
margin-top: 2px;
margin-bottom: 2px;
border: 1px solid -moz-Dialog;
}
.minimonth-year-name {
@ -61,14 +64,19 @@
font-weight: bold;
color: #000000;
text-align: center;
margin-left: 6px;
padding: 1px;
border: 1px solid #EEEEEE;
padding: 0px 4px;
margin-left: 2px;
margin-top: 2px;
margin-bottom: 2px;
border: 1px solid -moz-Dialog;
}
.minimonth-month-name:hover,
.minimonth-year-name:hover {
border: 1px solid #d2d2d2;
border-top: 1px solid ThreeDHighlight;
border-left: 1px solid ThreeDHighlight;
border-right: 1px solid ThreeDShadow;
border-bottom: 1px solid ThreeDShadow;
}
.minimonth-navbtn {
@ -105,6 +113,7 @@
font-family: Arial;
color: blue;
text-align: center;
padding-bottom: 2px;
}
.minimonth-row-body {
@ -118,32 +127,42 @@
}
.minimonth-day[othermonth="true"] {
color: #d2d2d2;
color: GrayText;
}
.minimonth-day[budy="true"] {
font-weight : bold;
font-weight: bold;
}
.minimonth-day[selected="true"] {
background-color: #778899;
color: #ffffff;
background-color: Highlight;
color: HighlightText;
}
.minimonth-day[busy="true"] {
font-weight : bold;
font-weight: bold;
}
.minimonth-day:hover {
color: #ff0000;
cursor: pointer;
border: 1px solid #d2d2d2;
font-weight: bold;
border: 1px solid Highlight;
}
.minimonth-day:active {
background-color: #d2d2d2;
background-color: Highlight;
color: HighlightText;
}
.minimonth-list {
padding: 2px 4px;
}
.minimonth-list[current="true"] {
font-weight: bold;
}
.minimonth-list:hover {
background-color: Highlight;
color: HighlightText;
cursor: pointer;
}