ashatora/editor
1
0
Fork 0
mirror of https://github.com/maputnik/editor.git synced 2025-12-26 08:00:01 +00:00
Code Issues Projects Releases Wiki Activity

Merge branch 'master' into property-groups-reorder

Browse Source
This commit is contained in:
Helge Fahrnberger
2017-01-12 18:14:25 +01:00
parent d045213fa3 63bba67750
commit 5e3b2dd0df
21 changed files with 185 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/modals/AddModal.jsx
View File

@@ -31,7 +31,7 @@ class AddModal extends React.Component {
if(this.state.type !== 'background') {
layer.source = this.state.source
if(this.state.type !== 'raster') {
if(this.state.type !== 'raster' && this.state['source-layer']) {
layer['source-layer'] = this.state['source-layer']
}
}

15
src/config/empty-style.json Normal file
View File

@@ -0,0 +1,15 @@
{
"version": 8,
"name": "Empty Style",
"metadata": {
"mapbox:autocomposite": false,
"mapbox:type": "template",
"maputnik:renderer": "mbgljs",
"openmaptiles:version": "3.x"
},
"sources": { },
"glyphs": "https://demo.tileserver.org/fonts/{fontstack}/{range}.pbf",
"sprites": "https://demo.tileserver.org/fonts/{fontstack}/{range}.pbf",
"layers": [],
"id": "empty-style"
}

8
src/config/styles.json
View File

@@ -30,9 +30,9 @@
"thumbnail": "https://cdn.rawgit.com/lukasmartinelli/osm-liberty/gh-pages/thumbnail.png"
},
{
"id": "fiord-color",
"title": "Fiord Color",
"url": "https://rawgit.com/openmaptiles/fiord-color-gl-style/gh-pages/style-cdn.json",
"thumbnail": "https://camo.githubusercontent.com/d884dbd7b8c531c58788eac3857dc4ebf79b7729/68747470733a2f2f6170692e6d6170626f782e636f6d2f7374796c65732f76312f6f70656e6d617074696c65732f6369776775693378353030317732706e7668633063327767302f7374617469632f382e3534303538372c34372e3337303535352c31342e30382c302e30302c302e30302f363030783430303f6163636573735f746f6b656e3d706b2e65794a31496a6f696233426c626d3168634852706247567a4969776959534936496d4e70646e593365544a785a7a41774d474d796233427064574a6d616a63784e7a636966512e685031427863786c644968616b4d6350534a4c513151"
"id": "empty-style",
"title": "Empty Style",
"url": "https://rawgit.com/maputnik/editor/master/src/config/empty-style.json",
"thumbnail": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAQAAAAHDYbIAAAAEUlEQVR42mP8/58BDhiJ4wAA974H/U5Xe1oAAAAASUVORK5CYII="
}
]

15
src/config/tilesets.json
View File

@@ -4,6 +4,11 @@
"url": "mapbox://mapbox.mapbox-streets-v7",
"title": "Mapbox Streets"
},
"openmaptiles": {
"type": "vector",
"url": "https://free.tilehosting.com/data/v3.json?key=25ItXg7aI5wurYDtttD",
"title": "OpenMapTiles"
},
"tilezen": {
"type": "vector",
"tiles": [
@@ -12,15 +17,5 @@
"minZoom": 0,
"maxZoom": 15,
"title": "Mapzen Vector Tile Service"
},
"openmaptiles": {
"type": "vector",
"url": "https://free.tilehosting.com/data/v3.json?key=25ItXg7aI5wurYDtttD",
"title": "OpenMapTiles CDN"
},
"naturalearth-airports": {
"type": "geojson",
"data": "https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_airports.geojson",
"title": "NaturalEarth Airports GeoJSON"
}
}

9
src/styles/_base.scss
View File

@@ -18,7 +18,9 @@ html {
box-sizing: border-box;
}
*, *:before, *:after {
*,
*::before,
*::after {
box-sizing: inherit;
}
@@ -53,7 +55,8 @@ h4 {
margin-bottom: $margin-3;
}
input:focus, select:focus {
input:focus,
select:focus {
color: $color-white !important;
outline: #8e8e8e auto 1px !important;
}
@@ -63,7 +66,7 @@ label:hover {
}
.clearfix {
&:after {
&::after {
content: "";
display: table;
clear: both;

22
src/styles/_components.scss
View File

@@ -2,9 +2,9 @@
.maputnik-map {
position: fixed !important;
top: 40px;
right: 0px;
bottom: 0px;
height: 100%;
right: 0;
bottom: 0;
height: calc(100% - $toolbar-height);
width: 75%;
}
@@ -14,7 +14,7 @@
cursor: help;
}
&-wrapper{
&-wrapper {
display: inline-block;
box-sizing: border-box;
font-size: $font-size-6;
@@ -32,7 +32,7 @@
font-size: 10px;
position: absolute;
top: 20px;
left: 0px;
left: 0;
width: 120px;
z-index: 3;
}
@@ -68,11 +68,15 @@
.maputnik-icon-button {
background-color: transparent;
&:hover {
background-color: transparent;
label, svg {
label,
svg {
cursor: pointer;
}
svg {
fill: $color-white;
}
@@ -102,6 +106,7 @@
display: inline-block;
width: 43%;
}
.maputnik-input-block-action {
vertical-align: top;
display: inline-block;
@@ -111,15 +116,14 @@
// SPACE HELPER
.maputnik-space {
flex-grow: 1;
@include vendor-prefix(flex-grow, 1);
}
// MESSAGE PANEL
.maputnik-message-panel {
padding: $margin-2;
&-error {
&-error {
color: $color-red;
}
}

9
src/styles/_filtereditor.scss
View File

@@ -2,6 +2,10 @@
padding: $margin-3;
}
.maputnik-filter-editor {
color: $color-lowgray;
}
.maputnik-filter-editor-property {
display: inline-block;
width: '22%';
@@ -54,6 +58,7 @@
margin-top: $margin-2;
margin-bottom: $margin-2;
}
.maputnik-filter-editor-block-action {
display: inline-block;
width: 6%;
@@ -73,6 +78,7 @@
.maputnik-filter-editor-operator {
display: inline-block;
width: 17%;
.maputnik-select {
width: 100%;
}
@@ -82,7 +88,8 @@
display: inline-block;
width: 54%;
.maputnik-string, .maputnik-number {
.maputnik-string,
.maputnik-number {
width: 100%;
}
}

13
src/styles/_input.scss
View File

@@ -24,20 +24,15 @@
//COLOR PICKER
.maputnik-color {
@extend .maputnik-input;
height: 26px;
}
.maputnik-color-wrapper {
position: relative;
display: inline;
}
.maputnik-color-picker-offset {
}
.maputnik-color-picker-overlay {
}
// ARRAY
.maputnik-array {
@@ -49,6 +44,7 @@
// SELECT
.maputnik-select {
@extend .maputnik-input;
height: 24px;
}
@@ -76,6 +72,7 @@
&-wrapper {
@extend .maputnik-input;
padding-left: 0;
padding-right: 0;
position: relative;
@@ -116,7 +113,7 @@
overflow: auto;
max-height: 50%;
background: $color-gray;
z-index: 3,
z-index: 3;
}
&-menu-item {

43
src/styles/_layer.scss
View File

@@ -1,13 +1,9 @@
// LAYER LIST
.maputnik-add-layer {
}
.maputnik-layer-list {
&-header{
&-header {
padding: $margin-2;
display: flex;
display: -ms-flexbox;
@include vendor-prefix(flex-direction, row)
@include flex-row;
> * {
vertical-align: middle;
@@ -32,7 +28,7 @@
font-weight: 400;
color: $color-lowgray;
font-size: $font-size-6;
border-width: 0px 0px 1px;
border-width: 0 0 1px;
border-style: solid;
border-color: lighten($color-black, 0.1);
user-select: none;
@@ -43,24 +39,24 @@
padding: 5px 10px;
line-height: 1.3;
max-height: 50px;
display: flex;
display: -ms-flexbox;
@include vendor-prefix(flex-direction, row);
opacity: 1;
opacity: 1;
-webkit-transition: opacity 600ms, visibility 600ms;
transition: opacity 600ms, visibility 600ms;
@include flex-row;
}
&-icon-action svg {
fill: $color-black;
}
.maputnik-layer-list-item:hover, .maputnik-layer-list-item-selected {
.maputnik-layer-list-item:hover,
.maputnik-layer-list-item-selected {
background-color: lighten($color-black, 2);
.maputnik-layer-list-icon-action svg {
fill: darken($color-lowgray, 0.5);
&:hover {
fill: $color-white;
}
@@ -73,9 +69,9 @@
&-item-collapsed {
position: absolute;
max-height: 0px;
max-height: 0;
overflow: hidden;
padding: 0px;
padding: 0;
opacity: 0;
visibility: hidden;
}
@@ -91,10 +87,6 @@
text-overflow: ellipsis;
}
&-group {
//border-bottom: 2px solid $color-gray;
}
&-group-header {
font-size: $font-size-6;
color: $color-lowgray;
@@ -102,9 +94,8 @@
cursor: pointer;
user-select: none;
padding: $margin-2;
display: flex;
display: -ms-flexbox;
@include vendor-prefix(flex-direction, row)
@include flex-row;
svg {
width: 14px;
@@ -121,7 +112,6 @@
}
}
// FILTER EDITOR
.maputnik-layer-editor-group {
font-weight: bold;
@@ -131,11 +121,10 @@
cursor: pointer;
user-select: none;
padding: $margin-2;
display: flex;
display: -ms-flexbox;
@include vendor-prefix(flex-direction, row)
line-height: 20px;
@include flex-row;
&:hover {
background-color: $color-gray;
}

20
src/styles/_layout.scss
View File

@@ -2,9 +2,9 @@
.maputnik-scroll-container {
overflow-x: visible;
overflow-y: scroll;
bottom: 0px;
left: 0px;
right: 0px;
bottom: 0;
left: 0;
right: 0;
top: 1px;
position: absolute;
}
@@ -16,29 +16,31 @@
&-list {
position: fixed;
bottom: 0px;
height: 100%;
bottom: 0;
height: calc(100% - $toolbar-height);
top: 40px;
left: 0px;
left: 0;
z-index: 3;
width: 200px;
overflow: hidden;
background-color: $color-black;
}
&-drawer {
position: fixed;
bottom: 0px;
height: 100%;
bottom: 0;
height: calc(100% - $toolbar-height);
top: 40px;
left: 200px;
z-index: 1;
width: 350px;
background-color: $color-black;
}
&-bottom {
position: fixed;
height: 50px;
bottom: 0px;
bottom: 0;
left: 550px;
z-index: 1;
width: 100%;

7
src/styles/_mixins.scss
View File

@@ -5,3 +5,10 @@
-o-#{$name}: #{$argument};
#{$name}: #{$argument};
}
@mixin flex-row {
display: flex;
display: -ms-flexbox;
@include vendor-prefix(flex-direction, row);
}

96
src/styles/_modal.scss
View File

@@ -3,20 +3,22 @@
min-width: 350px;
max-width: 600px;
background-color: $color-black;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
z-index: 3;
}
.maputnik-modal-section {
padding-top: $margin-3;
padding-bottom: $margin-3;
}
.maputnik-modal-header {
background-color: $color-gray;
display: flex;
display: -ms-flexbox;
@include vendor-prefix(flex-direction, row)
padding: $margin-3;
@include flex-row;
}
.maputnik-modal-header-title {
font-size: $font-size-5;
margin: 0;
@@ -25,6 +27,7 @@
.maputnik-modal-header-toggle {
cursor: pointer;
}
.maputnik-modal-content {
padding: $margin-3;
}
@@ -35,33 +38,33 @@
//OVERLAY
.maputnik-overlay-viewport {
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
z-index: 2;
opacity: 0.875;
background-color: rgb(28, 31, 36);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
opacity: 0.875;
background-color: rgb(28, 31, 36);
}
.maputnik-overlay {
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
position: fixed;
display: -ms-flexbox;
display: flex;
@include vendor-prefix(flex-direction, column)
align-items: center;
justify-content: center;
top: 0;
right: 0;
bottom: 0;
left: 0;
position: fixed;
align-items: center;
justify-content: center;
@include flex-row;
}
//OPEN MODAL
.maputnik-upload-button {
@extend .maputnik-big-button;
}
.maputnik-public-style {
vertical-align: top;
margin-top: 10px;
@@ -72,6 +75,7 @@
font-size: $font-size-2;
color: $color-lowgray;
}
.maputnik-public-style-button {
background-color: $color-gray;
padding: $margin-3;
@@ -81,50 +85,50 @@
background-color: $color-midgray;
}
}
.maputnik-public-style-header {
display: flex;
display: -ms-flexbox;
@include vendor-prefix(flex-direction, row)
@include flex-row;
}
.maputnik-public-style-thumbnail {
display: block;
margin-top: $margin-2;
max-width: 100%;
width: 100%;
}
.maputnik-add-layer{
.maputnik-add-layer {
@extend .clearfix;
}
//ADD MODAL
.maputnik-add-layer-button {
@extend .maputnik-big-button;
margin-right: $margin-3;
float: right;
display: inline-block;
margin-top: 3;
margin-bottom: $margin-3;
text-align: right;
@extend .maputnik-big-button;
}
//SOURCE MODAL
.maputnik-public-source {
vertical-align: top;
margin-top: 1.5%;
margin-right: 1.5%;
background-color: $color-gray;
width: 48.5%;
vertical-align: top;
margin-top: 1.5%;
margin-right: 1.5%;
background-color: $color-gray;
width: 48.5%;
display: inline-block;
}
.maputnik-public-source-select {
padding: $margin-3;
font-size: $font-size-5;
color: $color-lowgray;
display: flex;
display: -ms-flexbox;
@include vendor-prefix(flex-direction, row)
font-size: $font-size-5;
color: $color-lowgray;
background-color: transparent;
@include flex-row;
}
.maputnik-public-source-name {
@@ -138,14 +142,15 @@
.maputnik-active-source-type-editor {
min-width: 500px;
}
.maputnik-active-source-type-editor-header {
background-color: $color-gray;
color: $color-lowgray;
padding: $margin-2;
display: flex;
display: -ms-flexbox;
@include vendor-prefix(flex-direction, row)
@include flex-row;
}
.maputnik-active-source-type-editor-header-id {
font-weight: 700;
line-height: 2;
@@ -153,10 +158,10 @@
}
.maputnik-active-source-type-editor-content {
border-color: $color-gray;
border-width: 2px;
border-style: solid;
padding: $margin-2;
border-color: $color-gray;
border-width: 2px;
border-style: solid;
padding: $margin-2;
}
.maputnik-add-source {
@@ -165,6 +170,7 @@
.maputnik-add-source-button {
@extend .maputnik-big-button;
display: inline-block;
margin-top: 0;
margin-right: $margin-3;

12
src/styles/_popup.scss
View File

@@ -1,12 +1,11 @@
.maputnik-popup-layer {
display: inline-block;
display: block;
color: $color-lowgray;
user-select: none;
padding-left: 0;
padding-right: $margin-1;
line-height: 1.2;
padding-left: $margin-2;
padding-right: $margin-2;
padding: $margin-2;
padding-top: $margin-1;
padding-bottom: $margin-1;
}
.maputnik-popup-layer-id {
@@ -16,9 +15,6 @@
color: $color-white;
}
.maputnik-property-layer-popup {
}
.maputnik-feature-property-popup {
.maputnik-input-block {
margin: 0;

1
src/styles/_reset.scss
View File

@@ -1,3 +1,4 @@
/* stylelint-disable */
html {
background-color: rgb(28, 31, 36);
}

14
src/styles/_scrollbar.scss
View File

@@ -1,12 +1,12 @@
::-webkit-scrollbar {
background-color: #26282e;
width: 5px;
background-color: #26282e;
width: 5px;
}
::-webkit-scrollbar-thumb {
border-radius: 6px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #666;
padding-left: 2px;
padding-right: 2px;
border-radius: 6px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #666;
padding-left: 2px;
padding-right: 2px;
}

3
src/styles/_toolbar.scss
View File

@@ -17,7 +17,7 @@
height: $toolbar-height;
h1 {
display: inline;
display: inline;
}
img {
@@ -37,6 +37,7 @@
cursor: pointer;
color: $color-white;
text-decoration: none;
&:hover {
background-color: $color-midgray;
}

9
src/styles/_zoomproperty.scss
View File

@@ -2,9 +2,10 @@
.maputnik-make-zoom-function {
background-color: transparent;
display: inline-block;
padding-bottom: 0px;
padding-top: 0px;
padding-bottom: 0;
padding-top: 0;
vertical-align: middle;
@extend .maputnik-icon-button;
}
@@ -28,6 +29,7 @@
vertical-align: top;
width: 16%;
margin-right: 3%;
> * {
width: 100%;
}
@@ -36,6 +38,7 @@
.maputnik-zoom-spec-property-stop-value {
display: inline-block;
width: 81%;
> * {
width: 100%;
}
@@ -43,11 +46,13 @@
.maputnik-delete-stop {
@extend .maputnik-icon-button;
vertical-align: top;
.maputnik-doc-wrapper {
width: auto;
}
.maputnik-doc-target {
cursor: pointer;
}

1
src/styles/index.scss
View File

@@ -22,7 +22,6 @@ $toolbar-height: 40px;
@import 'mixins';
@import 'reset';
@import 'base';
@import 'components';
@import 'scrollbar';
@import 'picker';