isa/gnome-shell
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improve calendar layout and legibitily

Browse Source 
This fixes some alignment issues with the calendar
events pane. It also makes some legitibility improvements
by using bigger fonts and clearer colors.
This commit is contained in:
Allan Day 2012-07-13 15:44:33 +01:00 committed by Allan Day
parent 10a0762fe7
commit 63cdb1848e
2 changed files with 81 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
data/theme/calendar-today.svg
View File

@ -10,11 +10,11 @@
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="28" width="29"
height="25" height="29"
id="svg10621" id="svg10621"
version="1.1" version="1.1"
inkscape:version="0.48.1 r9760" inkscape:version="0.48.2 r9819"
sodipodi:docname="calendar-today.svg"> sodipodi:docname="calendar-today.svg">
<defs <defs
id="defs10623"> id="defs10623">
@ -118,6 +118,17 @@
fx="51" fx="51"
fy="30" fy="30"
r="42" /> r="42" />
<radialGradient
inkscape:collect="always"
xlink:href="#linearGradient34508-1-3"
id="radialGradient3113"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0.72146227,0,0,0.27484277,14.205424,21.754717)"
cx="51"
cy="30"
fx="51"
fy="30"
r="42" />
</defs> </defs>
<sodipodi:namedview <sodipodi:namedview
id="base" id="base"
@ -127,20 +138,29 @@
inkscape:pageopacity="0" inkscape:pageopacity="0"
inkscape:pageshadow="2" inkscape:pageshadow="2"
inkscape:zoom="15.839192" inkscape:zoom="15.839192"
inkscape:cx="8.3750933" inkscape:cx="20.652108"
inkscape:cy="8.0837211" inkscape:cy="11.839084"
inkscape:document-units="px" inkscape:document-units="px"
inkscape:current-layer="layer1" inkscape:current-layer="layer1"
showgrid="false" showgrid="true"
fit-margin-top="0" fit-margin-top="0"
fit-margin-left="0" fit-margin-left="0"
fit-margin-right="0" fit-margin-right="0"
fit-margin-bottom="0" fit-margin-bottom="0"
inkscape:window-width="1440" inkscape:window-width="1280"
inkscape:window-height="843" inkscape:window-height="741"
inkscape:window-x="0" inkscape:window-x="0"
inkscape:window-y="26" inkscape:window-y="27"
inkscape:window-maximized="1" /> inkscape:window-maximized="1"
borderlayer="true">
<inkscape:grid
type="xygrid"
id="grid3109"
empspacing="5"
visible="true"
enabled="true"
snapvisiblegridlinesonly="true" />
</sodipodi:namedview>
<metadata <metadata
id="metadata10626"> id="metadata10626">
<rdf:RDF> <rdf:RDF>
@ -157,31 +177,28 @@
inkscape:label="Layer 1" inkscape:label="Layer 1"
inkscape:groupmode="layer" inkscape:groupmode="layer"
id="layer1" id="layer1"
transform="translate(-469.08263,-536.99307)"> transform="translate(-469.08263,-532.99307)">
<g <path
id="g3003"> sodipodi:type="arc"
<path style="opacity:0.4625;color:#000000;fill:url(#radialGradient3113);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
inkscape:export-ydpi="90" id="path34506-3"
inkscape:export-xdpi="90" sodipodi:cx="51"
inkscape:export-filename="/home/jimmac/src/cvs/gnome/gnome-shell-design/mockups/motion/textures/panel.png" sodipodi:cy="30"
transform="matrix(0.43692393,0,0,1.3783114,460.60467,517.48289)" sodipodi:rx="42"
sodipodi:end="6.2831853" sodipodi:ry="16"
sodipodi:start="3.1415927" d="M 9,29.999999 A 42,16 0 0 1 93,30 l -42,0 z"
d="M 9,29.999999 C 9.0000011,21.163443 27.804042,14 51.000002,14 74.195961,14 93,21.163444 93,30 l -42,0 z" sodipodi:start="3.1415927"
sodipodi:ry="16" sodipodi:end="6.2831853"
sodipodi:rx="42" transform="matrix(0.43692393,0,0,1.3783114,461.29951,517.6437)"
sodipodi:cy="30" inkscape:export-filename="/home/jimmac/src/cvs/gnome/gnome-shell-design/mockups/motion/textures/panel.png"
sodipodi:cx="51" inkscape:export-xdpi="90"
id="path34506-3" inkscape:export-ydpi="90" />
style="opacity:0.4625;color:#000000;fill:url(#radialGradient2997);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" <rect
sodipodi:type="arc" /> style="fill:#ffffff;fill-opacity:0.50196078;stroke-width:0.43599999;stroke-miterlimit:4;stroke-dasharray:none"
<rect id="rect2996"
y="558.85046" width="31"
x="468.96878" height="3"
height="3.1425927" x="468.08264"
width="28.149134" y="558.99304" />
id="rect2996"
style="fill:#ffffff;fill-opacity:0.50196078;stroke-width:0.43599999;stroke-miterlimit:4;stroke-dasharray:none" />
</g>
</g> </g>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.7 KiB

After

Width:  |  Height:  |  Size: 6.1 KiB

67
data/theme/gnome-shell.css
View File

@ -942,7 +942,7 @@ StScrollBar StButton#vhandle:hover
#calendarEventsArea { #calendarEventsArea {
/* this is the width of the second column of the popup */ /* this is the width of the second column of the popup */
min-width: 400px; min-width: 320px;
} }
.calendar-vertical-separator { .calendar-vertical-separator {
@ -951,29 +951,22 @@ StScrollBar StButton#vhandle:hover
width: 0.3em; width: 0.3em;
} }
#calendarPopup {
border-radius: 5px;
background: rgba(0,0,0,0.9);
border: 1px solid rgba(128,128,128,0.45);
color: white;
}
#calendarPopup .calendar { #calendarPopup .calendar {
padding: 10px; padding: 10px;
} }
.calendar { .calendar {
padding: .4em 1.75em; padding: .4em 1.75em .8em 1.75em;
spacing-rows: 0px; spacing-rows: 0px;
spacing-columns: 0px; spacing-columns: 0px;
} }
.calendar-month-label { .calendar-month-label {
color: #666666; color: #888a85;
font-size: 7.5pt; font-size: 9.5pt;
font-weight: bold;
padding-bottom: 8px; padding-bottom: 8px;
padding-top: 8px; padding-top: 8px;
font-weight: bold;
} }
.calendar-change-month-back { .calendar-change-month-back {
@ -1013,14 +1006,14 @@ StScrollBar StButton#vhandle:hover
} }
.datemenu-date-label { .datemenu-date-label {
padding: .4em 1.75em; padding: .4em 1.7em;
color: #cccccc;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
color: #eeeeec;
} }
.calendar-day-base { .calendar-day-base {
font-size: 7.5pt; font-size: 9pt;
text-align: center; text-align: center;
width: 2.4em; width: 2.4em;
height: 2.4em; height: 2.4em;
@ -1028,33 +1021,37 @@ StScrollBar StButton#vhandle:hover
.calendar-day-base:hover { .calendar-day-base:hover {
background-color: #777777; background-color: #777777;
color: #fff;
} }
.calendar-day-base:active { .calendar-day-base:active {
font-size: 9pt;
background-color: #555555; background-color: #555555;
color: white;
} }
.calendar-day-heading { .calendar-day-heading {
color: #666666; color: #888a85;
padding-top: 1em; padding-top: .2em;
height: 1.7em;
} }
.calendar-week-number { .calendar-week-number {
color: #666666; color: #babdb6;
font-weight: bold; font-weight: bold;
} }
/* Hack used in lieu of border-collapse - see calendar.js */ /* Hack used in lieu of border-collapse - see calendar.js */
.calendar-day { .calendar-day {
border: 1px solid #333333; border: 1px solid #505050;
color: #888888; color: #babdb6;
border-top-width: 0; border-top-width: 0;
border-left-width: 0; border-left-width: 0;
} }
.calendar-day-top { .calendar-day-top {
border-top-width: 1px; border-top-width: 1px;
} }
.calendar-day-left { .calendar-day-left {
border-left-width: 1px; border-left-width: 1px;
} }
@ -1069,7 +1066,6 @@ StScrollBar StButton#vhandle:hover
.calendar-today { .calendar-today {
background-image: url("calendar-today.svg"); background-image: url("calendar-today.svg");
text-shadow: black 0px 2px 2px; text-shadow: black 0px 2px 2px;
color: #ffffff;
font-weight: bold; font-weight: bold;
} }
@ -1079,38 +1075,33 @@ StScrollBar StButton#vhandle:hover
.calendar-day-with-events { .calendar-day-with-events {
font-weight: bold; font-weight: bold;
color: #cccccc; color: white;
} }
.events-header-vbox { .events-header-vbox {
spacing: 6pt; spacing: 6pt;
padding-right: 1.75em; padding-right: .5em;
} }
.events-header-vbox:rtl { .events-header-vbox:rtl {
padding-right: 0em; padding-left: .5em;
padding-left: 1.75em;
} }
.events-header-hbox { .events-header-hbox {
padding: 0.3em; padding: 0.3em 1.4em;
} }
.events-day-header { .events-day-header {
font-size: 9pt;
font-weight: bold; font-weight: bold;
color: rgba(153, 153, 153, 1.0); color: #999999;
padding-left: 1.8em; padding: 0.4em 1.4em 0em 1.4em;
padding-top: 0.8em;
} }
.events-day-header:rtl { .events-day-header:rtl {
padding-left: 0em; padding: 0em 1.4em 0.4em 1.4em;
padding-right: 0.3em;
} }
.events-day-dayname { .events-day-dayname {
font-size: 9pt;
color: rgba(153, 153, 153, 1.0); color: rgba(153, 153, 153, 1.0);
text-align: left; text-align: left;
} }
@ -1120,7 +1111,6 @@ StScrollBar StButton#vhandle:hover
} }
.events-day-time { .events-day-time {
font-size: 9pt;
color: #fff; color: #fff;
text-align: right; text-align: right;
} }
@ -1130,7 +1120,6 @@ StScrollBar StButton#vhandle:hover
} }
.events-day-task { .events-day-task {
font-size: 9pt;
color: rgba(153, 153, 153, 1.0); color: rgba(153, 153, 153, 1.0);
} }
@ -1139,13 +1128,13 @@ StScrollBar StButton#vhandle:hover
} }
.events-time-box { .events-time-box {
min-width: 53pt; min-width: 48pt;
padding-right: 6pt; padding-right: 12pt;
} }
.events-time-box:rtl { .events-time-box:rtl {
padding-right: 0px; padding-right: 0px;
padding-left: 6pt; padding-left: 12pt;
} }
.events-event-box { .events-event-box {