From eb526a6186413a259408b37fcb64a9b7abf3d403 Mon Sep 17 00:00:00 2001 From: orangemug Date: Tue, 7 Mar 2017 10:47:46 +0000 Subject: [PATCH 1/9] Remove overflow hidden to allow modal to show in safari (issue #89) --- src/styles/_layout.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/styles/_layout.scss b/src/styles/_layout.scss index 8ec0e60..4857e56 100644 --- a/src/styles/_layout.scss +++ b/src/styles/_layout.scss @@ -22,7 +22,6 @@ left: 0; z-index: 3; width: 200px; - overflow: hidden; background-color: $color-black; } From decc390777b6aead6606f2760996c3390f27e0aa Mon Sep 17 00:00:00 2001 From: orangemug Date: Thu, 9 Mar 2017 21:24:05 +0000 Subject: [PATCH 2/9] Fix to add error notice when uploading invalid JSON (issue #54) --- src/components/modals/OpenModal.jsx | 38 ++++++++++++++++++++++++++++- src/styles/_modal.scss | 15 ++++++++++++ 2 files changed, 52 insertions(+), 1 deletion(-) diff --git a/src/components/modals/OpenModal.jsx b/src/components/modals/OpenModal.jsx index 84b4e92..a9799eb 100644 --- a/src/components/modals/OpenModal.jsx +++ b/src/components/modals/OpenModal.jsx @@ -46,7 +46,20 @@ class OpenModal extends React.Component { onStyleOpen: React.PropTypes.func.isRequired, } + constructor(props) { + super(props); + this.state = {}; + } + + clearError() { + this.setState({ + error: null + }) + } + onStyleSelect(styleUrl) { + this.clearError(); + request({ url: styleUrl, withCredentials: false, @@ -64,9 +77,21 @@ class OpenModal extends React.Component { onUpload(_, files) { const [e, file] = files[0]; const reader = new FileReader(); + + this.clearError(); + reader.readAsText(file, "UTF-8"); reader.onload = e => { - let mapStyle = JSON.parse(e.target.result) + let mapStyle; + try { + mapStyle = JSON.parse(e.target.result) + } + catch(err) { + this.setState({ + error: err.toString() + }); + return; + } mapStyle = style.ensureStyleValidity(mapStyle) this.props.onStyleOpen(mapStyle); } @@ -84,11 +109,22 @@ class OpenModal extends React.Component { /> }) + let errorElement; + if(this.state.error) { + errorElement = ( +
+ {this.state.error} + this.clearError()} className="maputnik-modal-error-close">× +
+ ); + } + return + {errorElement}

Upload Style

Upload a JSON style from your computer.

diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss index b70b475..9f88f53 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -199,3 +199,18 @@ color: $color-lowgray; } } + +.maputnik-modal-error { + border: solid 2px #EF5350; + color: #EF5350; + padding: 8px; + padding-right: 32px; + position: relative; +} + +.maputnik-modal-error-close { + position: absolute; + right: 8px; + text-decoration: none; + color: #ef5350; +} From 732d231c78965770542b0e7d130e9110acc44dd4 Mon Sep 17 00:00:00 2001 From: Lukas Martinelli Date: Tue, 28 Mar 2017 11:00:58 -0400 Subject: [PATCH 3/9] Do not barf if glyphs url not set #113 --- src/libs/style.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/style.js b/src/libs/style.js index 3f012d2..8edc3cf 100644 --- a/src/libs/style.js +++ b/src/libs/style.js @@ -70,7 +70,7 @@ function replaceAccessToken(mapStyle) { } const changedStyle = { ...mapStyle, - glyphs: mapStyle.glyphs.replace('{key}', accessToken), + glyphs: mapStyle.glyphs ? mapStyle.glyphs.replace('{key}', accessToken) : mapStyle.glyphs, sources: changedSources } From 87acc3362d397188acb073011e96cd782d647811 Mon Sep 17 00:00:00 2001 From: Yuri Astrakhan Date: Tue, 28 Mar 2017 23:03:13 -0400 Subject: [PATCH 4/9] Increase popup Z-index Per https://github.com/maputnik/editor/issues/118 --- src/styles/_components.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/_components.scss b/src/styles/_components.scss index e778ae5..b4032a5 100644 --- a/src/styles/_components.scss +++ b/src/styles/_components.scss @@ -34,7 +34,7 @@ top: 20px; left: 0; width: 120px; - z-index: 3; + z-index: 10; } } From 0d4449b9c250f5ac5711e4bc5663c37e3a669725 Mon Sep 17 00:00:00 2001 From: orangemug Date: Sun, 2 Apr 2017 15:13:07 +0100 Subject: [PATCH 5/9] Added css flexbox to modal to allow for a max-height. --- src/styles/_modal.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss index 9f88f53..24f042b 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -10,6 +10,12 @@ .maputnik-modal-section { padding-top: $margin-3; padding-bottom: $margin-3; + display: flex; + flex-direction: column; +} + +.maputnik-modal-section--fill { + flex: 1 1; } .maputnik-modal-header { @@ -30,6 +36,9 @@ .maputnik-modal-content { padding: $margin-3; + display: flex; + flex-direction: column; + max-height: 90vh; } .maputnik-modal-header-space { @@ -68,6 +77,7 @@ .maputnik-style-gallery-container { max-height: 400px; overflow-y: scroll; + flex: 1; } .maputnik-public-style { From 396022e8eae87afa96268c68d48e654a0bd2aaa4 Mon Sep 17 00:00:00 2001 From: orangemug Date: Sun, 2 Apr 2017 16:01:56 +0100 Subject: [PATCH 6/9] Styling fixes for firefox. --- src/components/modals/OpenModal.jsx | 2 +- src/styles/_mixins.scss | 7 +++++++ src/styles/_modal.scss | 15 +++++++++------ 3 files changed, 17 insertions(+), 7 deletions(-) diff --git a/src/components/modals/OpenModal.jsx b/src/components/modals/OpenModal.jsx index a9799eb..440343c 100644 --- a/src/components/modals/OpenModal.jsx +++ b/src/components/modals/OpenModal.jsx @@ -132,7 +132,7 @@ class OpenModal extends React.Component {
-
+

Gallery Styles

Open one of the publicly available styles to start from. diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index 4ea6832..387b3e9 100644 --- a/src/styles/_mixins.scss +++ b/src/styles/_mixins.scss @@ -12,3 +12,10 @@ @include vendor-prefix(flex-direction, row); } + +@mixin flex-column { + display: flex; + display: -ms-flexbox; + + @include vendor-prefix(flex-direction, column); +} diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss index 24f042b..f1f1b6d 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -10,12 +10,15 @@ .maputnik-modal-section { padding-top: $margin-3; padding-bottom: $margin-3; - display: flex; + @include flex-column; flex-direction: column; + flex-shrink: 0; + /* Bug fix: */ + min-height: 0; } -.maputnik-modal-section--fill { - flex: 1 1; +.maputnik-modal-section--shrink { + flex-shrink: 1; } .maputnik-modal-header { @@ -36,7 +39,7 @@ .maputnik-modal-content { padding: $margin-3; - display: flex; + @include flex-column; flex-direction: column; max-height: 90vh; } @@ -75,9 +78,8 @@ } .maputnik-style-gallery-container { - max-height: 400px; overflow-y: scroll; - flex: 1; + flex-shrink: 1; } .maputnik-public-style { @@ -221,6 +223,7 @@ .maputnik-modal-error-close { position: absolute; right: 8px; + top: 8px; text-decoration: none; color: #ef5350; } From 2400c8ed00f17437d29778f8aeb90e5782823cd1 Mon Sep 17 00:00:00 2001 From: orangemug Date: Sun, 2 Apr 2017 16:02:57 +0100 Subject: [PATCH 7/9] Clear error on modal toggle. --- src/components/modals/OpenModal.jsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/modals/OpenModal.jsx b/src/components/modals/OpenModal.jsx index 440343c..0f33347 100644 --- a/src/components/modals/OpenModal.jsx +++ b/src/components/modals/OpenModal.jsx @@ -98,6 +98,11 @@ class OpenModal extends React.Component { reader.onerror = e => console.log(e.target); } + onOpenToggle() { + this.clearError(); + this.props.onOpenToggle(); + } + render() { const styleOptions = publicStyles.map(style => { return this.onOpenToggle()} title={'Open Style'} > {errorElement} From 6b22ba2707616e89b3a6b0100622427e49c88fa6 Mon Sep 17 00:00:00 2001 From: orangemug Date: Sun, 2 Apr 2017 16:11:14 +0100 Subject: [PATCH 8/9] Removed duplicate css rules. --- src/styles/_modal.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss index f1f1b6d..0d1c18e 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -11,7 +11,6 @@ padding-top: $margin-3; padding-bottom: $margin-3; @include flex-column; - flex-direction: column; flex-shrink: 0; /* Bug fix: */ min-height: 0; @@ -40,7 +39,6 @@ .maputnik-modal-content { padding: $margin-3; @include flex-column; - flex-direction: column; max-height: 90vh; } From 32aa8b0e1fc5986911a2ca838d398d12c11aafdc Mon Sep 17 00:00:00 2001 From: orangemug Date: Sun, 2 Apr 2017 18:42:27 +0100 Subject: [PATCH 9/9] Fix lint errors. --- src/styles/_modal.scss | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss index 0d1c18e..69ee2e4 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -10,10 +10,13 @@ .maputnik-modal-section { padding-top: $margin-3; padding-bottom: $margin-3; - @include flex-column; - flex-shrink: 0; + /* Bug fix: */ min-height: 0; + + @include flex-column; + + flex-shrink: 0; } .maputnik-modal-section--shrink { @@ -38,8 +41,9 @@ .maputnik-modal-content { padding: $margin-3; - @include flex-column; max-height: 90vh; + + @include flex-column; } .maputnik-modal-header-space { @@ -211,8 +215,8 @@ } .maputnik-modal-error { - border: solid 2px #EF5350; - color: #EF5350; + border: solid 2px #ef5350; + color: #ef5350; padding: 8px; padding-right: 32px; position: relative;