From cb752c0343f5f0e9a216bbe488aa695d85d6f2de Mon Sep 17 00:00:00 2001 From: Lukas Martinelli Date: Wed, 11 Jan 2017 15:48:15 +0100 Subject: [PATCH] Add layer button and increase contrast --- src/components/layers/LayerList.jsx | 15 +++- src/components/layers/LayerListItem.jsx | 2 +- src/styles/_base.scss | 3 +- src/styles/_components.scss | 4 +- src/styles/_input.scss | 2 +- src/styles/_layer.scss | 107 ++++++++++++++---------- 6 files changed, 81 insertions(+), 52 deletions(-) diff --git a/src/components/layers/LayerList.jsx b/src/components/layers/LayerList.jsx index 40a2886..8fea83d 100644 --- a/src/components/layers/LayerList.jsx +++ b/src/components/layers/LayerList.jsx @@ -1,7 +1,9 @@ import React from 'react' import cloneDeep from 'lodash.clonedeep' +import Button from '../Button' import LayerListItem from './LayerListItem' +import AddIcon from 'react-icons/lib/md/add-circle-outline' import style from '../../libs/style.js' import {SortableContainer, SortableHandle, arrayMove} from 'react-sortable-hoc'; @@ -67,9 +69,16 @@ class LayerListContainer extends React.Component { onLayerVisibilityToggle={this.onLayerVisibilityToggle.bind(this)} /> }) - return + return
+
+ Layers + + +
+ +
} } diff --git a/src/components/layers/LayerListItem.jsx b/src/components/layers/LayerListItem.jsx index 0fea623..67955c7 100644 --- a/src/components/layers/LayerListItem.jsx +++ b/src/components/layers/LayerListItem.jsx @@ -46,7 +46,7 @@ class IconAction extends React.Component { render() { return {this.renderIcon()} diff --git a/src/styles/_base.scss b/src/styles/_base.scss index 01ea956..94a1805 100644 --- a/src/styles/_base.scss +++ b/src/styles/_base.scss @@ -14,7 +14,7 @@ html { color: $color-white; - font-size: $font-size-2; + font-size: $font-size-5; box-sizing: border-box; } @@ -33,6 +33,7 @@ p { h1 { font-size: $font-size-2; margin-bottom: $margin-3; + font-weight: bold; } h2 { diff --git a/src/styles/_components.scss b/src/styles/_components.scss index 3a2f1cf..a712983 100644 --- a/src/styles/_components.scss +++ b/src/styles/_components.scss @@ -19,7 +19,6 @@ box-sizing: border-box; font-size: $font-size-6; line-height: 2; - color: $color-lowgray; user-select: none; position: relative; vertical-align: top; @@ -86,8 +85,8 @@ margin: $margin-3; &-label { - display: inline-block; color: $color-lowgray; + display: inline-block; user-select: none; width: 50%; vertical-align: top; @@ -124,3 +123,4 @@ color: $color-red; } } + diff --git a/src/styles/_input.scss b/src/styles/_input.scss index ee62dd6..ec31373 100644 --- a/src/styles/_input.scss +++ b/src/styles/_input.scss @@ -10,7 +10,7 @@ padding-right: $margin-2; border: none; background-color: $color-gray; - color: $color-lowgray; + color: lighten($color-lowgray, 12); } .maputnik-string { diff --git a/src/styles/_layer.scss b/src/styles/_layer.scss index 34d74ff..a171619 100644 --- a/src/styles/_layer.scss +++ b/src/styles/_layer.scss @@ -1,61 +1,80 @@ // LAYER LIST -.maputnik-layer-list-container { - padding: 0; - margin: 0; - padding-bottom: $margin-5; +.maputnik-add-layer { } -.maputnik-layer-list-item { - font-weight: 400; - color: $color-lowgray; - font-size: $font-size-6; - border-width: 0px 0px 1px; - border-style: solid; - border-color: lighten($color-black, 0.1); - user-select: none; - list-style: none; - z-index: 2000; - cursor: pointer; - position: relative; - padding: 5px 10px; - background-color: $color-black; - line-height: 1.3; - display: flex; - flex-direction: row; -} +.maputnik-layer-list { + &-header{ + padding: $margin-2; + font-weight: bold; + font-size: $font-size-5; + color: $color-lowgray; + display: flex; + flex-direction: row; -.maputnik-icon-action svg { - fill: $color-black; -} - -.maputnik-layer-list-item:hover, .maputnik-layer-list-item-selected { - background-color: lighten($color-black, 2); - - .maputnik-icon-action svg { - fill: $color-midgray; - &:hover { - fill: $color-lowgray; + > * { + vertical-align: middle; + margin-bottom: 0; } } + + &-container { + padding: 0; + margin: 0; + padding-bottom: $margin-5; + } + + &-item { + font-weight: 400; + color: $color-lowgray; + font-size: $font-size-6; + border-width: 0px 0px 1px; + border-style: solid; + border-color: lighten($color-black, 0.1); + user-select: none; + list-style: none; + z-index: 2000; + cursor: pointer; + position: relative; + padding: 5px 10px; + background-color: $color-black; + line-height: 1.3; + display: flex; + flex-direction: row; + } + + &-icon-action svg { + fill: $color-black; + } + + .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; + } + } + } + + &-item-selected { + color: $color-white; + } + + &-item-id { + width: 115px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } } -.maputnik-layer-list-item-selected { - color: $color-white; -} - -.maputnik-layer-list-item-id { - width: 115px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} // FILTER EDITOR .maputnik-layer-editor-group { font-weight: bold; font-size: $font-size-5; background-color: lighten($color-black, 2); - color: $color-lowgray; cursor: pointer; user-select: none;