From 2a11b9682c74c2440b80d40d379bc9861afd2f0f Mon Sep 17 00:00:00 2001 From: Tom Hughes Date: Wed, 1 Aug 2012 21:40:40 +0100 Subject: [PATCH 1/1] Use a custom OpenLayers theme Instead of having a customised copy of the default theme in the app assets, use a custom theme that pulls in the default one and then overrides things as needed. --- app/assets/javascripts/map.js.erb | 2 +- .../openlayers/theme/default/style.css.scss | 478 ------------------ .../SimpleLayerSwitcher.css.scss | 2 +- .../{default => openstreetmap}/img/carat.png | Bin .../img/missing-tile.png | Bin .../theme/openstreetmap/style.css.scss | 60 +++ 6 files changed, 62 insertions(+), 480 deletions(-) delete mode 100644 app/assets/openlayers/theme/default/style.css.scss rename app/assets/openlayers/theme/{default => openstreetmap}/SimpleLayerSwitcher.css.scss (91%) rename app/assets/openlayers/theme/{default => openstreetmap}/img/carat.png (100%) rename app/assets/openlayers/theme/{default => openstreetmap}/img/missing-tile.png (100%) create mode 100644 app/assets/openlayers/theme/openstreetmap/style.css.scss diff --git a/app/assets/javascripts/map.js.erb b/app/assets/javascripts/map.js.erb index d645f06f0..82826ebfb 100644 --- a/app/assets/javascripts/map.js.erb +++ b/app/assets/javascripts/map.js.erb @@ -19,7 +19,7 @@ function createMap(divName, options) { ], numZoomLevels: 20, displayProjection: new OpenLayers.Projection("EPSG:4326"), - theme: "<%= asset_path 'theme/default/style.css' %>" + theme: "<%= asset_path 'theme/openstreetmap/style.css' %>" }); var mapnik = new OpenLayers.Layer.OSM.Mapnik(i18n("javascripts.map.base.standard"), { diff --git a/app/assets/openlayers/theme/default/style.css.scss b/app/assets/openlayers/theme/default/style.css.scss deleted file mode 100644 index 6c833aea8..000000000 --- a/app/assets/openlayers/theme/default/style.css.scss +++ /dev/null @@ -1,478 +0,0 @@ -/* - *= require theme/default/SimpleLayerSwitcher - */ - -div.olMap { - z-index: 0; - padding: 0 !important; - margin: 0 !important; - cursor: default; -} - -div.olMapViewport { - text-align: left; -} - -div.olLayerDiv { - -moz-user-select: none; - -khtml-user-select: none; -} - -.olLayerGoogleCopyright { - left: 2px; - bottom: 2px; -} -.olLayerGoogleV3.olLayerGoogleCopyright { - right: auto !important; -} -.olLayerGooglePoweredBy { - left: 2px; - bottom: 15px; -} -.olLayerGoogleV3.olLayerGooglePoweredBy { - bottom: 15px !important; -} -.olControlAttribution { - font-size: smaller; - right: 3px; - bottom: 4.5em; - position: absolute; - display: block; -} -.olControlScale { - right: 3px; - bottom: 3em; - display: block; - position: absolute; - font-size: smaller; -} -.olControlScaleLine { - display: block; - position: absolute; - left: 10px; - bottom: 15px; - font-size: xx-small; -} -.olControlScaleLineBottom { - border: solid 2px black; - border-bottom: none; - margin-top:-2px; - text-align: center; -} -.olControlScaleLineTop { - border: solid 2px black; - border-top: none; - text-align: center; -} - -.olControlPermalink { - right: 3px; - bottom: 1.5em; - display: block; - position: absolute; - font-size: smaller; -} - -div.olControlMousePosition { - bottom: 0; - right: 3px; - display: block; - position: absolute; - font-family: Arial; - font-size: smaller; -} - -.olControlOverviewMapContainer { - position: absolute; - bottom: 0; - right: 0; -} - -.olControlOverviewMapElement { - padding: 10px 18px 10px 10px; - background-color: #00008B; - -moz-border-radius: 1em 0 0 0; -} - -.olControlOverviewMapMinimizeButton, -.olControlOverviewMapMaximizeButton { - height: 18px; - width: 18px; - right: 0; - bottom: 80px; - cursor: pointer; -} - -.olControlOverviewMapExtentRectangle { - overflow: hidden; - background-image: image-url("theme/default/img/blank.gif"); - cursor: move; - border: 2px dotted red; -} -.olControlOverviewMapRectReplacement { - overflow: hidden; - cursor: move; - background-image: image-url("theme/default/img/overview_replacement.gif"); - background-repeat: no-repeat; - background-position: center; -} - -.olLayerGeoRSSDescription { - float:left; - width:100%; - overflow:auto; - font-size:1.0em; -} -.olLayerGeoRSSClose { - float:right; - color:gray; - font-size:1.2em; - margin-right:6px; - font-family:sans-serif; -} -.olLayerGeoRSSTitle { - float:left;font-size:1.2em; -} - -.olPopupContent { - padding:5px; - overflow: auto; -} - -.olControlNavigationHistory { - background-image: image-url("theme/default/img/navigation_history.png"); - background-repeat: no-repeat; - width: 24px; - height: 24px; - -} -.olControlNavigationHistoryPreviousItemActive { - background-position: 0 0; -} -.olControlNavigationHistoryPreviousItemInactive { - background-position: 0 -24px; -} -.olControlNavigationHistoryNextItemActive { - background-position: -24px 0; -} -.olControlNavigationHistoryNextItemInactive { - background-position: -24px -24px; -} - -div.olControlSaveFeaturesItemActive { - background-image: image-url("theme/default/img/save_features_on.png"); - background-repeat: no-repeat; - background-position: 0 1px; -} -div.olControlSaveFeaturesItemInactive { - background-image: image-url("theme/default/img/save_features_off.png"); - background-repeat: no-repeat; - background-position: 0 1px; -} - -.olHandlerBoxZoomBox { - border: 2px solid red; - position: absolute; - background-color: white; - opacity: 0.50; - font-size: 1px; - filter: alpha(opacity=50); -} -.olHandlerBoxSelectFeature { - border: 2px solid blue; - position: absolute; - background-color: white; - opacity: 0.50; - font-size: 1px; - filter: alpha(opacity=50); -} - -.olControlPanPanel { - top: 10px; - left: 5px; -} - -.olControlPanPanel div { - background-image: image-url("theme/default/img/pan-panel.png"); - height: 18px; - width: 18px; - cursor: pointer; - position: absolute; -} - -.olControlPanPanel .olControlPanNorthItemInactive { - top: 0; - left: 9px; - background-position: 0 0; -} -.olControlPanPanel .olControlPanSouthItemInactive { - top: 36px; - left: 9px; - background-position: 18px 0; -} -.olControlPanPanel .olControlPanWestItemInactive { - position: absolute; - top: 18px; - left: 0; - background-position: 0 18px; -} -.olControlPanPanel .olControlPanEastItemInactive { - top: 18px; - left: 18px; - background-position: 18px 18px; -} - -.olControlZoomPanel { - top: 71px; - left: 14px; -} - -.olControlZoomPanel div { - background-image: image-url("theme/default/img/zoom-panel.png"); - position: absolute; - height: 18px; - width: 18px; - cursor: pointer; -} - -.olControlZoomPanel .olControlZoomInItemInactive { - top: 0; - left: 0; - background-position: 0 0; -} - -.olControlZoomPanel .olControlZoomToMaxExtentItemInactive { - top: 18px; - left: 0; - background-position: 0 -18px; -} - -.olControlZoomPanel .olControlZoomOutItemInactive { - top: 36px; - left: 0; - background-position: 0 18px; -} - -/* - * When a potential text is bigger than the image it move the image - * with some headers (closes #3154) - */ -.olControlPanZoomBar div { - font-size: 1px; -} - -.olPopupCloseBox { - background: image-url("theme/default/img/close.gif") no-repeat; - cursor: pointer; -} - -.olFramedCloudPopupContent { - padding: 5px; - overflow: auto; -} - -.olControlNoSelect { - -moz-user-select: none; - -khtml-user-select: none; -} - -.olImageLoadError { - background: image-url("theme/default/img/missing-tile.png") no-repeat; -} - -/** - * Cursor styles - */ - -.olCursorWait { - cursor: wait; -} -.olDragDown { - cursor: move; -} -.olDrawBox { - cursor: crosshair; -} -.olControlDragFeatureOver { - cursor: move; -} -.olControlDragFeatureActive.olControlDragFeatureOver.olDragDown { - cursor: -moz-grabbing; -} - -/** - * Layer switcher - */ -.olControlLayerSwitcher { - position: absolute; - top: 25px; - right: 0; - width: 20em; - font-family: sans-serif; - font-weight: bold; - margin-top: 3px; - margin-left: 3px; - margin-bottom: 3px; - font-size: smaller; - color: white; - background-color: transparent; -} - -.olControlLayerSwitcher .layersDiv { - padding-top: 5px; - padding-left: 10px; - padding-bottom: 5px; - padding-right: 10px; - background-color: darkblue; -} - -.olControlLayerSwitcher .layersDiv .baseLbl, -.olControlLayerSwitcher .layersDiv .dataLbl { - margin-top: 3px; - margin-left: 3px; - margin-bottom: 3px; -} - -.olControlLayerSwitcher .layersDiv .baseLayersDiv, -.olControlLayerSwitcher .layersDiv .dataLayersDiv { - padding-left: 10px; -} - -.olControlLayerSwitcher .maximizeDiv, -.olControlLayerSwitcher .minimizeDiv { - width: 18px; - height: 18px; - top: 5px; - right: 0; - cursor: pointer; -} - -.olBingAttribution { - color: #DDD; -} -.olBingAttribution.road { - color: #333; -} - -.olGoogleAttribution.hybrid, .olGoogleAttribution.satellite { - color: #EEE; -} -.olGoogleAttribution { - color: #333; -} -span.olGoogleAttribution a { - color: #77C; -} -span.olGoogleAttribution.hybrid a, span.olGoogleAttribution.satellite a { - color: #EEE; -} - -/** - * Editing and navigation icons. - * (using the editing_tool_bar.png sprint image) - */ -.olControlNavToolbar , -.olControlEditingToolbar { - margin: 5px 5px 0 0; -} -.olControlNavToolbar div, -.olControlEditingToolbar div { - background-image: image-url("theme/default/img/editing_tool_bar.png"); - background-repeat: no-repeat; - margin: 0 0 5px 5px; - width: 24px; - height: 22px; - cursor: pointer -} -/* positions */ -.olControlEditingToolbar { - right: 0; - top: 0; -} -.olControlNavToolbar { - top: 295px; - left: 9px; -} -/* layouts */ -.olControlEditingToolbar div { - float: right; -} -/* individual controls */ -.olControlNavToolbar .olControlNavigationItemInactive, -.olControlEditingToolbar .olControlNavigationItemInactive { - background-position: -103px -1px; -} -.olControlNavToolbar .olControlNavigationItemActive , -.olControlEditingToolbar .olControlNavigationItemActive { - background-position: -103px -24px; -} -.olControlNavToolbar .olControlZoomBoxItemInactive { - background-position: -128px -1px; -} -.olControlNavToolbar .olControlZoomBoxItemActive { - background-position: -128px -24px; -} -.olControlEditingToolbar .olControlDrawFeaturePointItemInactive { - background-position: -77px -1px; -} -.olControlEditingToolbar .olControlDrawFeaturePointItemActive { - background-position: -77px -24px; -} -.olControlEditingToolbar .olControlDrawFeaturePathItemInactive { - background-position: -51px -1px; -} -.olControlEditingToolbar .olControlDrawFeaturePathItemActive { - background-position: -51px -24px; -} -.olControlEditingToolbar .olControlDrawFeaturePolygonItemInactive{ - background-position: -26px -1px; -} -.olControlEditingToolbar .olControlDrawFeaturePolygonItemActive { - background-position: -26px -24px; -} - -div.olControlZoom { - position: absolute; - top: 8px; - left: 8px; - background: rgba(255,255,255,0.4); - border-radius: 4px; - padding: 2px; -} -div.olControlZoom a { - display: block; - margin: 1px; - padding: 0; - color: black; - font-size: 18px; - font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif; - font-weight: bold; - text-decoration: none; - text-align: center; - height: 22px; - width:22px; - line-height: 19px; - background: #ffffff; - border: 1px solid #cccccc; -} -div.olControlZoom a:hover { - background: #f5f5f5; -} -a.olControlZoomIn { - border-radius: 4px 4px 0 0; -} -a.olControlZoomOut { - border-radius: 0 0 4px 4px; -} - - -/** - * Animations - */ - -.olLayerGrid .olTileImage { - -webkit-transition: opacity 0.2s linear; - -moz-transition: opacity 0.2s linear; - -o-transition: opacity 0.2s linear; - transition: opacity 0.2s linear; -} diff --git a/app/assets/openlayers/theme/default/SimpleLayerSwitcher.css.scss b/app/assets/openlayers/theme/openstreetmap/SimpleLayerSwitcher.css.scss similarity index 91% rename from app/assets/openlayers/theme/default/SimpleLayerSwitcher.css.scss rename to app/assets/openlayers/theme/openstreetmap/SimpleLayerSwitcher.css.scss index fc9a33775..48e730f6c 100644 --- a/app/assets/openlayers/theme/default/SimpleLayerSwitcher.css.scss +++ b/app/assets/openlayers/theme/openstreetmap/SimpleLayerSwitcher.css.scss @@ -18,7 +18,7 @@ .SimpleLayerSwitcher a.basey-on { color: #000; background-color: #fff; - background-image: image-url("theme/default/img/carat.png"); + background-image: image-url("theme/openstreetmap/img/carat.png"); background-repeat: no-repeat; background-position: 7px 9px; } diff --git a/app/assets/openlayers/theme/default/img/carat.png b/app/assets/openlayers/theme/openstreetmap/img/carat.png similarity index 100% rename from app/assets/openlayers/theme/default/img/carat.png rename to app/assets/openlayers/theme/openstreetmap/img/carat.png diff --git a/app/assets/openlayers/theme/default/img/missing-tile.png b/app/assets/openlayers/theme/openstreetmap/img/missing-tile.png similarity index 100% rename from app/assets/openlayers/theme/default/img/missing-tile.png rename to app/assets/openlayers/theme/openstreetmap/img/missing-tile.png diff --git a/app/assets/openlayers/theme/openstreetmap/style.css.scss b/app/assets/openlayers/theme/openstreetmap/style.css.scss new file mode 100644 index 000000000..6c6cf3cd3 --- /dev/null +++ b/app/assets/openlayers/theme/openstreetmap/style.css.scss @@ -0,0 +1,60 @@ +/* + *= require theme/default/style + *= require theme/openstreetmap/SimpleLayerSwitcher + */ + +.olControlOverviewMapExtentRectangle { + background-image: image-url("theme/default/img/blank.gif"); +} + +.olControlOverviewMapRectReplacement { + background-image: image-url("theme/default/img/overview_replacement.gif"); +} + +.olControlNavigationHistory { + background-image: image-url("theme/default/img/navigation_history.png"); +} + +div.olControlSaveFeaturesItemActive { + background-image: image-url("theme/default/img/save_features_on.png"); +} + +div.olControlSaveFeaturesItemInactive { + background-image: image-url("theme/default/img/save_features_off.png"); +} + +.olControlPanPanel div { + background-image: image-url("theme/default/img/pan-panel.png"); +} + +.olControlZoomPanel div { + background-image: image-url("theme/default/img/zoom-panel.png"); +} + +.olPopupCloseBox { + background: image-url("theme/default/img/close.gif") no-repeat; +} + +.olImageLoadError { + // remove opacity? + // remove filter? + background: image-url("theme/openstreetmap/img/missing-tile.png") no-repeat; +} + +.olControlNavToolbar div, +.olControlEditingToolbar div { + background-image: image-url("theme/default/img/editing_tool_bar.png"); +} + +div.olControlZoom a { + color: black; + background: #ffffff; + border: 1px solid #cccccc; + // remove filter +} + +div.olControlZoom a:hover { + background: #f5f5f5; +} + +// remove max-width hover? -- 2.43.2