make it look purty
authorRichard Fairhurst <richard@systemed.net>
Mon, 6 Dec 2010 09:29:34 +0000 (09:29 +0000)
committerRichard Fairhurst <richard@systemed.net>
Mon, 6 Dec 2010 09:29:34 +0000 (09:29 +0000)
embedded/information.svg [new file with mode: 0644]
net/systemeD/potlatch2/RelationSelectPanel.mxml
net/systemeD/potlatch2/TagViewer.mxml
net/systemeD/potlatch2/Toolbox.mxml
net/systemeD/potlatch2/help/HelpDialog.mxml
net/systemeD/potlatch2/options/OptionsDialog.mxml
net/systemeD/potlatch2/save/OAuthPanel.mxml
net/systemeD/potlatch2/save/SaveDialog.mxml
potlatch2.mxml
resources/map_features.xml
styles/Application.css

diff --git a/embedded/information.svg b/embedded/information.svg
new file mode 100644 (file)
index 0000000..5c0fdea
--- /dev/null
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 11 Build 196, SVG Export Plug-In . SVG Version: 6.0.0 Build 78)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
+       <!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
+       <!ENTITY ns_svg "http://www.w3.org/2000/svg">
+       <!ENTITY ns_xlink "http://www.w3.org/1999/xlink">
+]>
+<svg  xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+        width="16" height="16" viewBox="0 0 16 16" overflow="visible" enable-background="new 0 0 16 16" xml:space="preserve">
+               <g id="Layer_1">
+                       <circle fill="#6495ED" cx="8" cy="8" r="8"/> 
+                       <path fill="#FFFFFF" d="M5.434,8.039L5.227,7.604l1.126-0.831c0.575-0.406,0.962-0.665,1.158-0.775
+                               C7.828,5.823,8.111,5.697,8.357,5.62c0.153-0.044,0.287-0.066,0.404-0.066c0.131,0,0.246,0.055,0.349,0.164
+                               c0.101,0.11,0.151,0.26,0.151,0.451c0,0.208-0.022,0.424-0.065,0.648C9.124,7.167,8.93,7.931,8.607,9.105
+                               c-0.322,1.177-0.521,1.946-0.601,2.31c-0.078,0.364-0.117,0.603-0.117,0.718c0,0.088,0.022,0.156,0.07,0.205
+                               c0.045,0.049,0.096,0.074,0.151,0.074c0.065,0,0.168-0.038,0.312-0.115c0.322-0.169,0.683-0.391,1.083-0.664l0.222,0.435
+                               c-0.433,0.308-0.921,0.639-1.467,0.992c-0.545,0.354-0.944,0.578-1.201,0.673c-0.164,0.06-0.321,0.09-0.475,0.09
+                               c-0.186,0-0.338-0.069-0.458-0.209s-0.181-0.354-0.181-0.646c0-0.23,0.024-0.469,0.074-0.716c0.059-0.328,0.2-0.915,0.424-1.76
+                               c0.46-1.743,0.689-2.769,0.689-3.075c0-0.071-0.019-0.126-0.054-0.164C7.043,7.214,6.998,7.194,6.944,7.194
+                               C6.724,7.194,6.219,7.477,5.434,8.039z"/>
+                       <path fill="#FFFFFF" d="M7.851,3.457c0-0.359,0.111-0.651,0.335-0.878C8.406,2.354,8.68,2.24,9.003,2.24
+                               c0.275,0,0.497,0.083,0.665,0.249c0.166,0.166,0.25,0.386,0.25,0.657c0,0.388-0.106,0.699-0.322,0.937
+                               C9.383,4.32,9.11,4.438,8.782,4.438c-0.292,0-0.52-0.084-0.684-0.254C7.933,4.017,7.851,3.773,7.851,3.457z"/>
+               </g>
+       </svg>
index 6e95fce..ea3712a 100644 (file)
@@ -60,8 +60,8 @@
     <mx:List width="100%" height="100%" id="relationSelector" verticalScrollPolicy="on"> 
     </mx:List>
     <mx:ControlBar>
-      <mx:Button label="New Relation..." click="closeAndNewRelation();"/>
+      <mx:Button label="New Relation..." click="closeAndNewRelation();" styleName="titleWindowButton" />
       <mx:Spacer width="100%"/>
-      <mx:Button label="Select" click="updateEntityAndClose();" enabled="{relationSelector.selectedItem != null? true : false}"/>
+      <mx:Button label="Select" click="updateEntityAndClose();" enabled="{relationSelector.selectedItem != null? true : false}" styleName="titleWindowButton" />
     </mx:ControlBar>
 </mx:TitleWindow>
index 9e9af63..2b9b293 100644 (file)
 <mx:ViewStack id="sidebar" width="100%" height="100%" creationPolicy="all">
   <mx:VBox id="dndPanel" width="100%" height="100%" horizontalScrollPolicy="off" styleName="dndPanelVbox">
     <mx:Text id="dndPanelText" text="{dndPrompt}" width="100%" styleName="helpInfo" />
-       <mx:Repeater id="dndRep" dataProvider="{MapFeatures.getInstance().getCategoriesForType('point')}">
-               <mx:HBox width="100%"><mx:Label text="{dndRep.currentItem.name}:" styleName="dndPanelCategoryLabel"/></mx:HBox>
+       <mx:Repeater id="dndRep" dataProvider="{MapFeatures.getInstance().getCategoriesForType('point')}" styleName="dndRepeater">
+               <mx:HBox width="100%" styleName="dndPanelCategory">
+                       <mx:Label text="{dndRep.currentItem.name}:" styleName="dndPanelCategoryLabel"/>
+               </mx:HBox>
 
                <mx:TileList dataProvider="{dndRep.currentItem.getFeaturesForType('point')}" width="100%" height="1"
                                     rowHeight="32" columnWidth="32" updateComplete="resizePOIGrid(event)" styleName="dndPanelTileList">
           <mx:HBox width="100%" id="iconContainer" styleName="featureSelector">
             <mx:Image id="iconImage"/>
             <mx:Text condenseWhite="true" width="100%" id="iconText" styleName="dndIconText"/>
-            <mx:LinkButton label="?" click="openDescription()" id="helpLabel" styleName="helpInfo"/>
           </mx:HBox>
-          <mx:PopUpButton id="popupChange" creationComplete="initFeatureBox()" openAlways="true" width="100%" styleName="dndTagPopUpMenu"/>
+          <mx:HBox width="100%">
+            <mx:PopUpButton id="popupChange" creationComplete="initFeatureBox()" openAlways="true" width="100%" styleName="dndTagPopUpMenu"/>
+            <mx:LinkButton icon="@Embed('../../../embedded/information.svg')" click="openDescription()" id="helpLabel" styleName="helpInfo"/>
+          </mx:HBox>
         </mx:VBox>
       </mx:VBox>
       <mx:VBox width="100%" height="100%" label="Advanced" id="advancedContainer" initialize="checkAdvanced()" verticalGap="1">
                        iconText.htmlText = "<i>Nothing selected</i>";
             tw.setNoSelectedFeature();
                  } else if (entity.hasTags()) {
-                       iconText.htmlText = "<b>Not recognised</b><br/>Try looking at the tags under the advanced properties";
+                       iconText.htmlText = "<b>Not recognised</b><br/><font size='10pt'>Try looking at the tags under the advanced properties</font>";
             tw.setSelectedFeature(null);
                  } else {
-                       iconText.htmlText = "<b>No tags set</b><br/>Please use the menu below to define what this "+entity.getType()+" is";
+                       iconText.htmlText = "<b>No tags set</b><br/><font size='10pt'>Please use the menu below to define what this "+entity.getType()+" is</font>";
             tw.setSelectedFeature(null);
           }
           helpLabel.visible = false;
index 6b85239..6007b5f 100644 (file)
@@ -2,10 +2,7 @@
 <mx:Panel
        xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:potlatch2="net.systemeD.potlatch2.*"
-       height="76" width="129" 
-       headerHeight="6" headerColors="[black, gray]" 
-       borderThicknessRight="0" borderThicknessLeft="0" borderThicknessBottom="0" 
-       paddingLeft="4" paddingTop="4" layout="absolute"
+       height="76" width="129" layout="absolute"
        styleName="theToolBox">
 
                <mx:Image data="@Embed('../../../embedded/close_small.png')"
index a3deebd..8df1fcd 100644 (file)
   <mx:ControlBar>
     <mx:Label text="Version: {Application.application.version} Build: {Application.application.build_number}" />
     <mx:Spacer width="100%"/>
-    <mx:Button label="Ok" click="PopUpManager.removePopUp(this);"/>
+    <mx:Button label="Ok" click="PopUpManager.removePopUp(this);" styleName="titleWindowButton" />
   </mx:ControlBar>
 
 </mx:TitleWindow>
index 4c5518f..b75c8fd 100644 (file)
        <mx:CheckBox width="100%" label="Use custom cursors" selected="true" id="cursorcheck"
            change="Application.application.theController.cursorsEnabled=cursorcheck.selected" />
 
-    <mx:CheckBox width="100%" label="Highlight Unedited TIGER" selected="false" id="tigercheck"
+    <mx:CheckBox width="100%" label="Highlight unedited TIGER (US roads)" selected="false" id="tigercheck"
         change="tigerToggle()" />
 
   <mx:ControlBar>
     <mx:Spacer width="100%"/>
-    <mx:Button label="Ok" click="PopUpManager.removePopUp(this);"/>
+    <mx:Button label="Ok" click="PopUpManager.removePopUp(this);" styleName="titleWindowButton" />
   </mx:ControlBar>
 
-</mx:TitleWindow>
\ No newline at end of file
+</mx:TitleWindow>
index 6e5b68c..096222e 100644 (file)
@@ -62,8 +62,8 @@
                indeterminate="true"/>
         <mx:Spacer width="100%"/>
 
-           <mx:Button label="Cancel" click="PopUpManager.removePopUp(this);"/>
-           <mx:Button id="tryAccessButton" label="Try Access" click="getAccessToken()" enabled="false"/>
+           <mx:Button label="Cancel" click="PopUpManager.removePopUp(this);" styleName="titleWindowButton" />
+           <mx:Button id="tryAccessButton" label="Try Access" click="getAccessToken()" enabled="false" styleName="titleWindowButton" />
        </mx:ControlBar>
        
        <mx:Script><![CDATA[
index c175e32..548d5ee 100644 (file)
@@ -70,8 +70,8 @@
 
   <mx:ControlBar>
     <mx:Spacer width="100%"/>
-    <mx:Button id="cancelButton" label="Cancel" click="close();"/>
-    <mx:Button id="saveButton" label="Save >" click="startSave();"/>
+    <mx:Button id="cancelButton" label="Cancel" click="close();" styleName="titleWindowButton" />
+    <mx:Button id="saveButton" label="Save >" click="startSave();" styleName="titleWindowButton" />
   </mx:ControlBar>
   
   <mx:Script><![CDATA[
index 47f00c7..7f6af6f 100644 (file)
     <mx:WipeRight id="wipeIn" duration="250"/>
 
     <mx:ApplicationControlBar dock="true">
-        <mx:PopUpButton id="bgButton" label="Background" openAlways="true"
+        <mx:PopUpButton id="bgButton" label="Background" openAlways="true" styleName="appBarButton"
             creationComplete="bgButton.popUp = new BackgroundSelector();"/>
-        <mx:PopUpButton id="styleButton" label="Map Style" openAlways="true"
+        <mx:PopUpButton id="styleButton" label="Map Style" openAlways="true" styleName="appBarButton"
             creationComplete="styleButton.popUp = new StyleSelector();"/>
-               <mx:PopUpMenuButton id="gpsButton" itemClick="if (event.index==0) { trackLoader.load(); } else { new MyGpxDialog().init(); }">
+               <mx:PopUpMenuButton id="gpsButton" styleName="appBarButton"
+                   itemClick="if (event.index==0) { trackLoader.load(); } else { new MyGpxDialog().init(); }">
                        <mx:dataProvider>
                                <mx:Array>
                                        <mx:Object label="GPS data" />
                        </mx:dataProvider>
                </mx:PopUpMenuButton>
         <mx:Spacer width="100%"/>
-        <mx:Button label="Undo" click="MainUndoStack.getGlobalStack().undo();"
+        <mx:Button label="Undo" click="MainUndoStack.getGlobalStack().undo();" styleName="appBarButton"
             enabled="{MainUndoStack.getGlobalStack().canUndo()}"/>
-        <mx:Button label="Redo" click="MainUndoStack.getGlobalStack().redo();"
+        <mx:Button label="Redo" click="MainUndoStack.getGlobalStack().redo();" styleName="appBarButton"
             enabled="{MainUndoStack.getGlobalStack().canRedo()}"/>
         <mx:Spacer width="100%"/>
-        <mx:Button label="Help" click="new HelpDialog().init();" />
-        <mx:Button label="Options" click="new OptionsDialog().init();" /> 
-        <mx:Button label="Save" icon="@Embed('embedded/save.svg')" disabledIcon="@Embed('embedded/save_disabled.svg')" click="SaveManager.saveChanges();" id="saveButton"
-                       enabled="false"/>
+        <mx:Button label="Help" click="new HelpDialog().init();" styleName="appBarButton" />
+        <mx:Button label="Options" click="new OptionsDialog().init();" styleName="appBarButton" /> 
+        <mx:Button label="Save" icon="@Embed('embedded/save.svg')" disabledIcon="@Embed('embedded/save_disabled.svg')" styleName="appBarButton"
+                       click="SaveManager.saveChanges();" id="saveButton" enabled="false"/>
     </mx:ApplicationControlBar>
     
     <mx:HDividedBox width="100%" height="100%">
index 17845f6..f4b94b0 100644 (file)
@@ -450,11 +450,11 @@ Quick documentation:
         name="Bike lanes" category="Cycle" description="Road has bike lanes within the road surface"
         key="cycleway" layout="horizontal">
       <choice value="no" text="No bike lanes"/>
-      <choice value="opposite" text="No, but two-way bicycle traffic permitted" description="The route may be cycled in the direction opposite of other traffic, but does not have a dedicated lane. Common in Belgium, Netherlands, Denmark."/>
-      <choice value="lane" text="Standard bike lane" description="Separated by painted line"/>
-      <choice value="track" text="Copenhagen-style bike lane" description="Separated by kerb or parked cars"/>
-      <choice value="opposite_lane" text="Two-way bike lane" description="Separated by painted line, and allowing bicycles in both directions in an otherwise one-way street."/>
-      <choice value="opposite_track" text="Two-way Copenhagen-style bike lane" description="Separated by kerb or parked cars, and allowing bicycles in both directions in an otherwise one-way street."/>
+      <choice value="lane" text="On-road bike lane" description="Separated by painted line"/>
+      <choice value="track" text="Parallel track" description="Separated by kerb or parked cars"/>
+      <choice value="opposite_lane" text="Contraflow lane" description="Separated by painted line, and allowing bicycles in both directions in an otherwise one-way street."/>
+      <choice value="opposite_track" text="Contraflow track" description="Separated by kerb or parked cars, and allowing bicycles in both directions in an otherwise one-way street."/>
+      <choice value="opposite" text="Contraflow unmarked" description="The route may be cycled in the direction opposite of other traffic, but does not have a dedicated lane."/>
       <help>http://wiki.openstreetmap.org/wiki/Key:cycleway</help>
     </input>
   </inputSet>
index c4f3fea..b76f207 100644 (file)
+/* General Flex UI elements */
 
-Application {
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  padding-bottom: 0;
-  backgroundColor: #c0c0c0;
-  borderStyle: none;
+TitleWindow {
+       borderAlpha: 1;
+       borderThicknessLeft: 5;
+       borderThicknessRight: 5;
+       cornerRadius: 0px;
+       borderColor: #6495ED;
+       titleStyleName: "titleHeader";
 }
 
-ApplicationControlBar {
-  padding-top: 2;
-  padding-bottom: 2;
-  fillAlphas: 1.0,1.0;
-  fillColors: #e0e0e0, #c0c0c0;
-  backgroundColor: #c0c0c0;
-  borderSkin: ClassReference("mx.skins.halo.ApplicationBackground");
-}
+.titleHeader { font-size: 14; font-weight: bold; color: white; }
 
-TitleWindow {
-  borderAlpha: 0.8;
-  borderThicknessLeft: 5;
-  borderThicknessRight: 5;
+.titleWindowButton { 
+       fontFamily: Arial;
+       fontSize: 11;
+       fontWeight: bold;
+       cornerRadius: 12;
+       paddingLeft: 5;
+       paddingRight: 5;
+       highlightAlphas: 0, 0;
+       fillAlphas: 1,1;
+       fillColors: white, white;
+       color: black;
+       borderColor: haloBlue;
 }
 
-.failText {
-  color: red;
+Button {
+       color: black;
+       textRollOverColor: black;
 }
 
-.warningText {
-  color: #ff4500;
+VScrollBar {
+       cornerRadius: 0;
+       highlightAlphas: 0, 0;
+       fillAlphas: 0, 0, 0, 0;
+       fillColors: white, white, white, white;
+       trackColors: #eeeeee, #eeeeee;
+       borderColor: #999999;
+       thumbOffset: 1;
 }
 
-.promptText {
-  fontStyle: italic;
-}
+CheckBox, List, StyleSelector, BackgroundSelector { color: black; }
 
-.helpHeaderText {
-  fontWeight: bold;
-  fontSize: 12pt;
-  textAlign: right;
+TabNavigator {
+       horizontalGap: 3;
 }
 
-.helpPageHeader {
-  fontWeight: bold;
-  fontSize: 13pt;
+TextInput {
+       color: #333333;
 }
 
-.helpTN {
-  /*backgroundColor: #e8f4d9;*/
-  cornerRadius: 5px;
-  tabOffset: 10px;
+Label {
+       fontWeight: normal;
 }
 
-.header {
-               fillColors: haloSilver, x222222;
-               fillAlphas: 1.0, 1.0;
-               selectedFillColors: haloBlue, black;
-               color: white;
+/* Main window */
+
+Application {
+       padding-left: 4;
+       padding-right: 4;
+       padding-top: 2;
+       padding-bottom: 4;
+       backgroundColor: #6495ED;
+       themeColor: #0000ff;
+       borderStyle: none;
+       fontFamily: Arial;
 }
 
-.helpInfo {
-  fontStyle: italic;
-  fontSize: 11pt;
+HDividedBox {
+       dividerAlpha: 1;
+       dividerColor: #0000ff;
+       backgroundColor: #6495ED;
+       dividerAffordance: 6;
+       horizontalGap: 6;
+/*   backgroundColor: #ffff99; */
 }
 
-.featureSelector {
-  paddingTop: 3;
-  paddingLeft: 3;
-  paddingRight: 3;
+ApplicationControlBar {
+       padding-top: 2;
+       padding-bottom: 0;
+       padding-left: 4;
+       padding-right: 4;
+       highlightAlphas: 0, 0;
+       fillAlphas: 1,1;
+       fillColors: haloBlue, #6495ED;
+       /*fillColors: #ffffcc, #ffff99;*/
+       backgroundColor: #ffffcc;
+       dropShadowEnabled: false;
+       /*borderSkin: ClassReference("mx.skins.halo.ApplicationBackground");*/
 }
 
-.dndEditorContainer {
-  verticalGap: 4;
-  paddingTop: 3;
-  paddingLeft: 3;
-  paddingRight: 3;
+.appBarButton {
+       fontFamily: Arial;
+       fontSize: 11;
+       fontWeight: bold;
+       cornerRadius: 12;
+       paddingLeft: 5;
+       paddingRight: 5;
+       highlightAlphas: 0, 0;
+       fillAlphas: 1,1;
+       fillColors: haloBlue, #6495ED;
+       color: white;
+       textRollOverColor: white;
+       disabledColor: #5555bb;
+       borderColor: haloBlue;
 }
 
+/* General text classes */
+
+.failText { color: red; }
+.warningText { color: #ff4500; }
+.promptText { fontStyle: italic; }
+
 .titledEditor {
-  verticalGap: 0;
-  verticalAlign: middle;
-  horizontalGap: 3;
+       verticalGap: 0;
+       verticalAlign: middle;
+       horizontalGap: 3;
 }
 
+/* Drag-and-drop panel */
 
 .dndPanelTileList {
-  cornerRadius: 4px;
+       borderColor: #dddddd;
+       backgroundColor: #dddddd;
 }
 
+.dndEditorContainer {
+       verticalGap: 4;
+       paddingTop: 3;
+       paddingLeft: 3;
+       paddingRight: 3;
+       backgroundColor: white;
+       color: #333333;
+       fontSize: 11;
+       fontWeight: bold;
+}
 
 .dndPanelVbox {
-  paddingRight: 3px;
-  paddingLeft: 3px;
-  verticalGap: 0px;
+       paddingRight: 3;
+       paddingLeft: 3;
+       paddingTop: 5;
+       verticalGap: 0;
+       backgroundColor: #dddddd;
+       borderColor: #aaaaaa;
+       fontWeight: normal;
+}
+
+.catToggleButtonBar {
+       themeColor: #0000ff;
+       buttonStyleName: "mytoggleButtonBarButtonStyle";
+}
+
+.mytoggleButtonBarButtonStyle { fillColors: #dddddd, #eeeeee, #eeeeee, #eeeeee; borderColor: white; }
+
+.catToggleTiles {
+       themeColor: #cccccc;
 }
 
+/* Drag-and-drop POI icons */
+
+.helpInfo {
+       paddingLeft: 0;
+       paddingRight: 0;
+       paddingBottom: 6;
+}
+.dndRepeater {
+}
+.dndPanelCategory {
+       backgroundColor: white;
+}
 .dndPanelCategoryLabel {
-  paddingTop: 6px;
+       paddingTop: 0;
+       color: #444444;
+       fontSize: 11;
+       fontWeight: bold;
 }
 
+/* Simple tag view - header */
+
 .dndTagHeader {
-  paddingBottom: 15;
+       paddingBottom: 15;
+}
+
+.featureSelector {
+       paddingTop: 0;
+       paddingLeft: 3;
+       paddingRight: 3;
+       paddingBottom: 7;
+}
+
+.dndTagPopUpMenu {
+       fillColors: white, white, white, white;
+       borderColor: #aaaaaa;
+       fontSize: 11;
+       fontWeight: bold;
+}
+
+.dndIconText {
+       color: black;
+       fontSize: 14;
+       fontWeight: bold;
+}
+
+/* Simple tag view - editor container */
+
+.dndStackTab {
+       backgroundColor: white;
+       themeColor: #bbbbbb;
+       cornerRadius: 0;
+       color: #333333;
+       borderColor: #999999;
+       tabStyleName: "myTabs";
+       firstTabStyleName: "myTabs";
+       lastTabStyleName: "myTabs";
+       selectedTabTextStyleName: "mySelectedTabs";
+}
+
+.myTabs { font-size: 11; font-weight: normal; cornerRadius: 0; fillColors: white, white; borderColor: #999999; themeColor: #999999; }
+.mySelectedTabs { fillColors: white, white; }
+
+.dndStackAccordion {
+       themeColor: #bbbbbb;
+       cornerRadius: 0;
+       borderColor: #999999;
+       headerStyleName: "accordionHeader";
+}
+
+.accordionHeader { fillColors: #888888, #999999; fillAlphas: 1,1; color: white; fontWeight: bold; fontSize: 11; }
+
+/* Toolbox */
+
+.theToolBox {
+       headerColors: haloBlue, #6495ED;
+       headerAlphas: 1,1;
+       headerHeight: 6;
+       borderThicknessRight: 0; borderThicknessLeft: 0; borderThicknessBottom: 0;
+       paddingLeft: 4; paddingTop: 4;
+}
+
+.mypanelTitle { textAlign: center; color: #333333; fontSize: 10; fontWeight: bold; }
+
+/* Help */
+
+.helpHeaderText {
+       fontWeight: bold;
+       fontSize: 12pt;
+       textAlign: right;
+}
+
+.helpPageHeader {
+       fontWeight: bold;
+       fontSize: 13pt;
+}
+
+.helpTN {
+       cornerRadius: 0px;
+       tabOffset: 10px;
+}
+
+
+/* Don't appear to be used */
+
+.header {
+       fillColors: haloSilver, x222222;
+       fillAlphas: 0, 0;
+       selectedFillColors: haloBlue, black;
+       color: white;
 }