From 1686cde65c538156a95dd030a6960a783c5b9d69 Mon Sep 17 00:00:00 2001 From: xem Date: Mon, 8 Apr 2019 17:17:33 +0200 Subject: [PATCH 01/13] QMAPS-759 display POI image on top right if available --- config/constants.yml | 2 ++ src/panel/poi_bloc/images_panel.js | 18 ++++++++++++++++++ src/scss/includes/panels/poi_panel.scss | 16 ++++++++++++++++ src/views/poi_bloc/images.dot | 1 + src/views/poi_panel.dot | 4 ++-- 5 files changed, 39 insertions(+), 2 deletions(-) create mode 100644 src/panel/poi_bloc/images_panel.js create mode 100644 src/views/poi_bloc/images.dot diff --git a/config/constants.yml b/config/constants.yml index f06b8a009..c2abb60bc 100644 --- a/config/constants.yml +++ b/config/constants.yml @@ -101,6 +101,8 @@ pois: panelName: internet_access - apiName: contact panelName: contact +- apiName: images + panelName: images # Map map: diff --git a/src/panel/poi_bloc/images_panel.js b/src/panel/poi_bloc/images_panel.js new file mode 100644 index 000000000..88991c348 --- /dev/null +++ b/src/panel/poi_bloc/images_panel.js @@ -0,0 +1,18 @@ +import ImagesPanelView from '../../views/poi_bloc/images.dot' +import nextTransitionPartial from '../../views/poi_bloc/hour_next_transition_partial.dot' +import Panel from "../../libs/panel"; +import OsmSchedule from '../../../src/adapters/osm_schedule' +import Telemetry from "../../libs/telemetry"; + +function ImagesPanel(block, poi) { + + console.log(block); + this.nextTransitionPartial = nextTransitionPartial + this.panel = new Panel(this, ImagesPanelView) + this.name = block.name + this.block = block + this.latLng = poi.latLon + this.isCollapsed = true +} + +export default ImagesPanel diff --git a/src/scss/includes/panels/poi_panel.scss b/src/scss/includes/panels/poi_panel.scss index 1dc58033e..95486a1be 100644 --- a/src/scss/includes/panels/poi_panel.scss +++ b/src/scss/includes/panels/poi_panel.scss @@ -17,6 +17,15 @@ $CARD_PADDING: 8px; overflow-y: auto; } +.poi_panel__image { + width: 100px; + height: 80px; + background-size: cover; + background-position: center center; + position: absolute; + top: 20px; + right: 35px; +} .poi_panel--hidden { display: none; } @@ -107,6 +116,8 @@ $CARD_PADDING: 8px; .poi_panel__description_container { position: relative; cursor: pointer; + padding: 0 125px 0 0; + min-height: 100px; } .poi_panel__description_container:after { @@ -146,6 +157,11 @@ $CARD_PADDING: 8px; margin-left: 28px; } +.poi_panel__info { + clear: both; + margin: 60px 0 0 0; +} + .poi_panel__description { position: relative; padding-left: $BLOCK_INDENT; diff --git a/src/views/poi_bloc/images.dot b/src/views/poi_bloc/images.dot new file mode 100644 index 000000000..42c4e64c7 --- /dev/null +++ b/src/views/poi_bloc/images.dot @@ -0,0 +1 @@ +
\ No newline at end of file diff --git a/src/views/poi_panel.dot b/src/views/poi_panel.dot index 0a60f2245..69334910d 100644 --- a/src/views/poi_panel.dot +++ b/src/views/poi_panel.dot @@ -29,7 +29,8 @@ {{?}}
{{= this.panel.renderPartial(this.headerPartial) }} -
+
+
@@ -48,7 +49,6 @@
{{?}}
-
From 83fdc803b279cd18f79664752a3f36860fa50c1c Mon Sep 17 00:00:00 2001 From: xem Date: Wed, 10 Apr 2019 09:36:35 +0200 Subject: [PATCH 02/13] QMAPS-759 MR fixes --- src/panel/poi_bloc/images_panel.js | 14 +++++--------- src/views/poi_bloc/images.dot | 4 +++- 2 files changed, 8 insertions(+), 10 deletions(-) diff --git a/src/panel/poi_bloc/images_panel.js b/src/panel/poi_bloc/images_panel.js index 88991c348..e91f92830 100644 --- a/src/panel/poi_bloc/images_panel.js +++ b/src/panel/poi_bloc/images_panel.js @@ -1,18 +1,14 @@ import ImagesPanelView from '../../views/poi_bloc/images.dot' -import nextTransitionPartial from '../../views/poi_bloc/hour_next_transition_partial.dot' import Panel from "../../libs/panel"; -import OsmSchedule from '../../../src/adapters/osm_schedule' -import Telemetry from "../../libs/telemetry"; -function ImagesPanel(block, poi) { - - console.log(block); - this.nextTransitionPartial = nextTransitionPartial +function ImagesPanel(block) { + this.topImageUrl = null this.panel = new Panel(this, ImagesPanelView) this.name = block.name this.block = block - this.latLng = poi.latLon - this.isCollapsed = true + if(this.block && this.block.images && this.block.images[0]){ + this.topImageUrl = this.block.images[0].url + } } export default ImagesPanel diff --git a/src/views/poi_bloc/images.dot b/src/views/poi_bloc/images.dot index 42c4e64c7..cb9116be0 100644 --- a/src/views/poi_bloc/images.dot +++ b/src/views/poi_bloc/images.dot @@ -1 +1,3 @@ -
\ No newline at end of file +{{? this.topImageUrl }} +
+{{?}} \ No newline at end of file From c92586118b3ef4852b07fb5ae066396dd105f005 Mon Sep 17 00:00:00 2001 From: xem Date: Wed, 10 Apr 2019 10:10:34 +0200 Subject: [PATCH 03/13] QMAPS-759 MR fixes --- src/panel/poi_bloc/images_panel.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/panel/poi_bloc/images_panel.js b/src/panel/poi_bloc/images_panel.js index e91f92830..13657024d 100644 --- a/src/panel/poi_bloc/images_panel.js +++ b/src/panel/poi_bloc/images_panel.js @@ -1,14 +1,14 @@ import ImagesPanelView from '../../views/poi_bloc/images.dot' import Panel from "../../libs/panel"; -function ImagesPanel(block) { - this.topImageUrl = null - this.panel = new Panel(this, ImagesPanelView) - this.name = block.name - this.block = block - if(this.block && this.block.images && this.block.images[0]){ - this.topImageUrl = this.block.images[0].url - } +export default class ImagesPanel { + constructor(block){ + this.topImageUrl = null + this.panel = new Panel(this, ImagesPanelView) + this.name = block.name + this.block = block + if(this.block && this.block.images && this.block.images[0]){ + this.topImageUrl = this.block.images[0].url + } + } } - -export default ImagesPanel From c77cbebac81ec90e0403c601cb0a97991cfa4f3b Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Tue, 16 Apr 2019 15:48:33 +0200 Subject: [PATCH 04/13] A lot of fixes and enforcement to new graphical chart --- config/constants.yml | 2 - src/adapters/poi/idunn_poi.js | 5 +- src/adapters/poi/latlon_poi.js | 5 +- src/adapters/poi/map_poi.js | 2 +- src/panel/poi_bloc/images_panel.js | 4 +- src/panel/poi_bloc/phone_panel.js | 9 --- src/panel/poi_bloc/poi_bloc_container.js | 7 +-- src/panel/poi_panel.js | 20 ++++++ src/scss/includes/osm_contribute.scss | 2 +- src/scss/includes/panels/poi_panel.scss | 79 ++++++++++++++---------- src/views/poi_bloc/images.dot | 3 - src/views/poi_bloc/phone.dot | 10 --- src/views/poi_panel.dot | 29 ++++++--- src/views/poi_partial/header.dot | 15 +++-- 14 files changed, 108 insertions(+), 84 deletions(-) delete mode 100644 src/panel/poi_bloc/phone_panel.js delete mode 100644 src/views/poi_bloc/phone.dot diff --git a/config/constants.yml b/config/constants.yml index c2abb60bc..f449f27f2 100644 --- a/config/constants.yml +++ b/config/constants.yml @@ -70,8 +70,6 @@ pois: closed: msg: _('Closed') color: '#8c0212' -- apiName: phone - panelName: phone - apiName: website panelName: website - apiName: wikipedia diff --git a/src/adapters/poi/idunn_poi.js b/src/adapters/poi/idunn_poi.js index abe544fd1..8d89e4679 100644 --- a/src/adapters/poi/idunn_poi.js +++ b/src/adapters/poi/idunn_poi.js @@ -32,7 +32,7 @@ export default class IdunnPoi extends Poi { case 'address': case 'street': return this.alternativeName - default : + default: return this.name } } @@ -50,8 +50,7 @@ export default class IdunnPoi extends Poi { } catch (err) { if(err === 404) { return - } - else { + } else { Error.sendOnce( 'idunn_poi', 'poiApiLoad', `unknown error getting idunn poi reaching ${url} with options ${JSON.stringify(requestParams)}`, diff --git a/src/adapters/poi/latlon_poi.js b/src/adapters/poi/latlon_poi.js index 775eabe08..9f6f558c1 100644 --- a/src/adapters/poi/latlon_poi.js +++ b/src/adapters/poi/latlon_poi.js @@ -34,10 +34,9 @@ export default class LatLonPoi extends Poi { if(lat && lng) { let latLng = {lat : parseFloat(lat), lng : parseFloat(lng)} if(urlData[LABEL_POSITION]) { - return Promise.resolve(new LatLonPoi(latLng, ExtendedString.htmlEncode(urlData[LABEL_POSITION]))) - } else { - return Promise.resolve(new LatLonPoi(latLng)) + return Promise.resolve(new UrlPoi(latLng, ExtendedString.htmlEncode(urlData[LABEL_POSITION]))) } + return Promise.resolve(new UrlPoi(latLng)) } } else { let urlData = urlParam.match(/^(.*?)(@(.*))?$/) diff --git a/src/adapters/poi/map_poi.js b/src/adapters/poi/map_poi.js index 8aca18f05..4e99cd873 100644 --- a/src/adapters/poi/map_poi.js +++ b/src/adapters/poi/map_poi.js @@ -3,6 +3,6 @@ import Poi,{POI_TYPE} from "./poi"; export default class MapPoi extends Poi { constructor(feature, lngLat) { let id = feature.properties.global_id - super(id, feature.name, null, POI_TYPE, lngLat) + super(id, feature.name, null, POI_TYPE, lngLat) } } diff --git a/src/panel/poi_bloc/images_panel.js b/src/panel/poi_bloc/images_panel.js index 13657024d..a20b660ea 100644 --- a/src/panel/poi_bloc/images_panel.js +++ b/src/panel/poi_bloc/images_panel.js @@ -7,8 +7,8 @@ export default class ImagesPanel { this.panel = new Panel(this, ImagesPanelView) this.name = block.name this.block = block - if(this.block && this.block.images && this.block.images[0]){ + /*if(this.block && this.block.images && this.block.images[0]){ this.topImageUrl = this.block.images[0].url - } + }*/ } } diff --git a/src/panel/poi_bloc/phone_panel.js b/src/panel/poi_bloc/phone_panel.js deleted file mode 100644 index b5051a19b..000000000 --- a/src/panel/poi_bloc/phone_panel.js +++ /dev/null @@ -1,9 +0,0 @@ -import PhoneView from '../../views/poi_bloc/phone.dot' -import Panel from "../../libs/panel"; - -function Phone(block) { - this.panel = new Panel(this, PhoneView) - this.block = block -} - -export default Phone diff --git a/src/panel/poi_bloc/poi_bloc_container.js b/src/panel/poi_bloc/poi_bloc_container.js index 8cb5399e4..84a9ccb98 100644 --- a/src/panel/poi_bloc/poi_bloc_container.js +++ b/src/panel/poi_bloc/poi_bloc_container.js @@ -27,14 +27,14 @@ PoiBlocContainer.getBlock = function(name) { return PoiBlocContainer.blockComponents[name] } -PoiBlocContainer.setBock = function(block) { +PoiBlocContainer.setBlock = function(block) { let blockComponent = PoiBlocContainer.blockComponents[block.type] return new blockComponent.poiBlockConstructor.default(block, PoiBlocContainer.poi, blockComponent.options) } PoiBlocContainer.renderBlock = function (block) { let blockComponent = getBlockComponent(block) - if(blockComponent) { + if (blockComponent) { return blockComponent.render() } else { console.log(`info : component missing (${block.type})`) @@ -46,9 +46,8 @@ PoiBlocContainer.toString = function (blocks) { let blockComponent = getBlockComponent(block) if(blockComponent) { return blockComponent.toString() - } else { - return '' } + return '' }).join(' - ') } diff --git a/src/panel/poi_panel.js b/src/panel/poi_panel.js index 91e7fa6a2..e6da23e18 100644 --- a/src/panel/poi_panel.js +++ b/src/panel/poi_panel.js @@ -33,6 +33,8 @@ function PoiPanel(sharePanel) { this.minimalHourPanel = new MinimalHourPanel() this.sceneState = SceneState.getSceneState() this.isDirectionActive = nconf.get().direction.enabled + this.topImageUrl = null + this.phoneNumber = null PanelManager.register(this) UrlState.registerUrlShard(this, 'place', paramTypes.RESOURCE) this.isMasqEnabled = nconf.get().masq.enabled @@ -95,11 +97,28 @@ PoiPanel.prototype.close = async function() { PanelManager.openService() } +PoiPanel.prototype.lookForElements = function() { + this.topImageUrl = null + this.phoneNumber = null + if(this.poi && this.poi.blocks) { + for (let i = 0; i < this.poi.blocks.length; ++i) { + let block = this.poi.blocks[i] + console.log(block) + if (block.images && block.images[0]) { + this.topImageUrl = block.images[0].url + } else if (block.type === 'phone' && block.url !== undefined) { + this.phoneNumber = block + } + } + } +} + PoiPanel.prototype.restorePoi = async function (id) { Telemetry.add(Telemetry.POI_RESTORE) let hotLoadedPoi = new HotLoadPoi() if(hotLoadedPoi.id === id) { this.poi = hotLoadedPoi + this.lookForElements() window.execOnMapLoaded(() => { fire('map_mark_poi', this.poi) fire('fit_map', this.poi, layouts.POI) @@ -115,6 +134,7 @@ PoiPanel.prototype.restorePoi = async function (id) { PoiPanel.prototype.setPoi = async function (poi, options = {}) { this.poi = poi + this.lookForElements() this.card = true this.poi.stored = await isPoiFavorite(this.poi) this.PoiBlocContainer.set(this.poi) diff --git a/src/scss/includes/osm_contribute.scss b/src/scss/includes/osm_contribute.scss index d00ef34a3..12c874133 100644 --- a/src/scss/includes/osm_contribute.scss +++ b/src/scss/includes/osm_contribute.scss @@ -1,7 +1,7 @@ .osm_contribute { width: calc(100% - 2 * 28px); height: 55px; - margin: 16px 0 0 25px; + margin: 16px 0 0 31px; border: solid 1px $separator_color; @include card_radius(); } diff --git a/src/scss/includes/panels/poi_panel.scss b/src/scss/includes/panels/poi_panel.scss index 95486a1be..0313c5c3f 100644 --- a/src/scss/includes/panels/poi_panel.scss +++ b/src/scss/includes/panels/poi_panel.scss @@ -1,9 +1,11 @@ @import "../osm_contribute"; -$BLOCK_INDENT: 60px; +$BLOCK_INDENT: 25px; $CARD_ACTION_WIDTH: 130px; $CARD_ACTION_RIGHT_MARGIN: 8px; $CARD_PADDING: 8px; +$BLOCK_PADDING: 16px; +$BLOCK_ICON_FONT_SIZE: 16px; .poi_panel { display: block; @@ -23,8 +25,8 @@ $CARD_PADDING: 8px; background-size: cover; background-position: center center; position: absolute; - top: 20px; - right: 35px; + top: 13px; + right: 26px; } .poi_panel--hidden { display: none; @@ -78,6 +80,7 @@ $CARD_PADDING: 8px; transition: background-color .1s; background: $background; border-radius: 50%; + font-size: 19px; } .poi_panel__close:hover { @@ -92,30 +95,33 @@ $CARD_PADDING: 8px; .poi_panel__info__section__phone { margin-left: $BLOCK_INDENT; - font-size: 14px; + font-size: $BLOCK_ICON_FONT_SIZE; } .poi_panel__back { display: inline-block; width: 20px; + color: $primary_text; } -.poi_panel__back_to_favorite { - font-size: 14px; +.poi_panel__header { + font-size: 13px; color: $secondary_text; - padding: 14px 0 14px 40px; + padding: 14px 0 14px 10px; + text-transform: uppercase; + position: relative; +} + +.poi_panel__back_to_favorite { cursor: pointer; - border-bottom: 1px solid $separator_color; - margin-bottom: 14px; } .poi_panel__back_to_favorite:hover { - color: $secondary_text; + color: #000; } .poi_panel__description_container { position: relative; - cursor: pointer; padding: 0 125px 0 0; min-height: 100px; } @@ -128,7 +134,7 @@ $CARD_PADDING: 8px; .poi_panel__title { width: 350px; - padding: 18px 0 0 $BLOCK_INDENT; + padding: 10px 0 0 $BLOCK_INDENT; font-family: Asap; font-weight: 700; color: $primary_text; @@ -284,10 +290,10 @@ $CARD_PADDING: 8px; } .poi_panel__description__ellipsis { - margin-top: 20px; + margin-top: 13px; line-height: 22px; font-size: 15px; - padding-right: 60px; + padding-right: 45px; } .poi_panel__info__item { @@ -302,7 +308,8 @@ $CARD_PADDING: 8px; .poi_panel__actions { margin-left: $BLOCK_INDENT; - margin-top: 16px; + width: calc(100% - #{$BLOCK_INDENT} - #{$BLOCK_INDENT}); + position: relative; } .poi_panel__actions:after { @@ -310,18 +317,24 @@ $CARD_PADDING: 8px; content: ''; } -.poi_panel__actions__store_container { - float: left; +a.button_container { + text-decoration: none; } - -.poi_panel__actions__direction_container { +.button_container { float: left; - margin-left: 20px; + text-decoration: none; + width: 25%; + text-align: center; + + button { + width: 100%; + display: block; + cursor: pointer; + } } -.poi_panel__actions__share_container { - float: left; - margin-left: 20px; +.button_container:hover { + cursor: pointer; } .poi_panel__actions__icon { @@ -340,11 +353,6 @@ $CARD_PADDING: 8px; color: $primary_text; } -.poi_panel__actions__share_container:hover .poi_panel__actions__text, .poi_panel__actions__store_container:hover .poi_panel__actions__text { - color: $primary_text; - text-decoration: underline; -} - .poi_panel__description_container { position: relative; } @@ -357,10 +365,11 @@ $CARD_PADDING: 8px; /* title symbols */ .poi_panel__title__symbol { - float: left; font-size: 42px; - margin: 18px 0 0 16px; - line-height: 35px !important; + color: #E93865; + position: absolute; + right: 20px; + top: 8px; } /* symbols */ @@ -368,15 +377,20 @@ $CARD_PADDING: 8px; position: absolute; top: 18px; left: 25px; - font-size: 24px; + font-size: $BLOCK_ICON_FONT_SIZE; color: $primary_clear; width: 20px; height: 18px; } +.poi_panel__block__symbol.icon-icon_phone, .poi_panel__block__symbol.icon-icon_clock { + top: 20px; +} + .poi_panel__block__content { margin-top: 18px; margin-bottom: 20px; + padding-left: $BLOCK_PADDING; } .poi_panel__service_information__container { @@ -440,6 +454,7 @@ $CARD_PADDING: 8px; margin: 10px 0 0 $BLOCK_INDENT; font-size: 12px; color: $secondary_text; + padding-left: $BLOCK_PADDING; } .poi_panel__info__wiki__link { diff --git a/src/views/poi_bloc/images.dot b/src/views/poi_bloc/images.dot index cb9116be0..e69de29bb 100644 --- a/src/views/poi_bloc/images.dot +++ b/src/views/poi_bloc/images.dot @@ -1,3 +0,0 @@ -{{? this.topImageUrl }} -
-{{?}} \ No newline at end of file diff --git a/src/views/poi_bloc/phone.dot b/src/views/poi_bloc/phone.dot deleted file mode 100644 index 7b6a491c9..000000000 --- a/src/views/poi_bloc/phone.dot +++ /dev/null @@ -1,10 +0,0 @@ -
-

-

-
- - {{= this.htmlEncode(this.block.local_format) }} - -
-

-
diff --git a/src/views/poi_panel.dot b/src/views/poi_panel.dot index 69334910d..90ce4a5ed 100644 --- a/src/views/poi_panel.dot +++ b/src/views/poi_panel.dot @@ -24,34 +24,45 @@ {{?}}
{{? this.poi }} - {{? this.fromFavorite }} -
{{= _('Back to favorite') }}
- {{?}} +
+ {{? this.fromFavorite }} +
+ {{= _('Back to favorite') }} +
+ {{?}} +
+ +
+
{{= this.panel.renderPartial(this.headerPartial) }}
-
+
{{= _('FAVORITES', 'poi') }}
-