Commit 12284c55 authored by pacome's avatar pacome

[client/platform] style is now divided in core and var

parent 50665695
.alias-wrapper {
width: calc(~"100% - @{margin} * 2");
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
margin: auto;
border: 1px solid @borderLightColor;
padding: @margin;
border-top: @borderLight;
padding-top: @margin;
* {
box-sizing: border-box;
......@@ -14,7 +13,7 @@
.alias-widget {
display: flex;
margin-top: @margin;
height: calc(~"100% - 63px");
height: calc(~'100% - 63px');
.alias-table {
display: flex;
......@@ -23,17 +22,15 @@
align-items: center;
.infinite-table {
height: calc(~"100% - 50px");
height: calc(~'100% - 50px');
}
}
.form {
flex: 1;
padding-left: @margin;
>div {
> div {
margin-bottom: @margin;
}
......@@ -62,4 +59,4 @@
}
}
}
}
\ No newline at end of file
}
@import 'sdi.less';
// @import "widgets/slider.less"; //compose ????
@import 'widgets/general.less';
@import 'widgets/map-custom.less'; //compose
@import 'widgets/map-custom.less';
@import 'widgets/wrapper-inspire.less'; //compose
@import 'widgets/dashboard.less'; //compose
@import 'widgets/switcher.less'; //compose
@import 'widgets/wrapper-inspire.less';
@import 'widgets/dashboard.less';
@import 'widgets/switcher.less';
@import 'widgets/legend.less'; //mixte..
@import 'widgets/legend-styles.less'; //mixte...
@import 'widgets/legend.less';
@import 'widgets/legend-styles.less';
@import 'widgets/wgt-charts.less'; //mixte ??
@import 'widgets/timeserie.less'; //mixte ??
@import 'widgets/wgt-charts.less';
@import 'widgets/timeserie.less';
@import 'widgets/legend-mapinfos-edit.less'; //compose
@import 'widgets/style-toolbox.less'; //compose
@import 'widgets/app-style-tools.less'; //compose
@import 'widgets/app-feature-config.less'; //compose
@import 'widgets/app-feature-view.less'; //compose
@import 'widgets/app-edit-layer.less'; //compose
@import 'widgets/app-related-map.less'; //compose
@import 'widgets/color-picker.less'; //compose
@import 'widgets/app-upload.less'; //compose
@import 'widgets/legend-mapinfos-edit.less';
@import 'widgets/style-toolbox.less';
@import 'widgets/app-style-tools.less';
@import 'widgets/app-feature-config.less';
@import 'widgets/app-feature-view.less';
@import 'widgets/app-edit-layer.less';
@import 'widgets/app-related-map.less';
@import 'widgets/color-picker.less';
@import 'widgets/app-upload.less';
.color-component{
position:relative;
.color-component {
position: relative;
height: 12px;
width: 100%;
margin: 0 !important;
margin: 0 !important;
margin-bottom: 2px !important;
.picker{
.picker {
height: 100%;
width: 100%;
}
.color-hue {
background: linear-gradient(to right,
hsl(0, 100%, 50%),
hsl(60, 100%, 50%),
hsl(120, 100%, 50%),
hsl(180, 100%, 50%),
hsl(240, 100%, 50%),
hsl(300, 100%, 50%),
hsl(360, 100%, 50%));
background: linear-gradient(
to right,
hsl(0, 100%, 50%),
hsl(60, 100%, 50%),
hsl(120, 100%, 50%),
hsl(180, 100%, 50%),
hsl(240, 100%, 50%),
hsl(300, 100%, 50%),
hsl(360, 100%, 50%)
);
}
.marker {
......@@ -35,45 +36,49 @@
.saturation-preview,
.lightness-preview,
.alpha-preview {
background: url(~"../../imgs/color-bg.png") repeat;
background: url(~'../../imgs/color-bg.png') repeat;
height: 100%;
width: 100%;
}
.color-rgb {
width: 100%;
display: flex;
margin-bottom: @small-margin;
span {
flex: 3;
input {
flex: 1;
width: calc(~"50% - @{small-margin}") !important;
// width: calc(~"50% - @{small-margin}") !important;
width: auto !important;
}
&.color-preview {
position: relative;
flex: 1;
margin-left: @small-margin;
background: url(~"../../imgs/color-bg.png") repeat;
.color-color{
background: url(~'../../imgs/color-bg.png') repeat;
.color-color {
position: absolute;
width: 100%;
height: 100%;
}
}
&:first-child:before {
padding-left: 0px;
}
}
.red:before {content: 'R : '}
.green:before {content: 'G : '}
.blue:before {content: 'B : '}
.red:before {
content: 'R : ';
}
.green:before {
content: 'G : ';
}
.blue:before {
content: 'B : ';
}
}
.dashboard-wrapper {
width: calc(~"100% - @{margin} * 2");
width: 100%;
height: 100%;
overflow-y: auto;
margin: auto;
border: 1px solid @borderLightColor;
padding: @margin;
padding-top: @margin*2;
border-top: @borderDark;
h1 {
margin-bottom: @margin * 2;
......@@ -16,7 +15,6 @@
}
}
.dashboard-maps {
.flex(flex-start, initial, wrap);
}
......@@ -24,7 +22,7 @@
.dashboard-map-item {
.widgetBackground;
position: relative;
width: calc(~"25% - @{margin}");
width: calc(~'25% - @{margin}');
height: 400px;
padding: @margin;
padding-bottom: 0px;
......@@ -32,7 +30,6 @@
min-width: 200px;
text-align: center;
&.add {
// color: @activeColor;
text-align: initial;
......@@ -65,7 +62,6 @@
color: @inactiveColor;
}
.image {
height: 180px;
width: 100%;
......@@ -94,4 +90,4 @@
.dashboard-data-type {
font-size: 80%;
margin-bottom: @margin / 2;
}
\ No newline at end of file
}
.compose-app {
input {
font-size: 0.8rem;
}
}
// .slider {
// -webkit-user-select: none;
// -moz-user-select: none;
// user-select: none;
// cursor: default;
// display: flex;
// flex-direction: row;
// // width: 100%;
// height: 15px;
// .slider-wrapper {
// flex: 6 1 0%;
// position: relative;
// .slider-line {
// top: 0px;
// height: 2px;
// margin-top: 11px;
// margin-bottom: 11px;
// background-color: black;
// }
// .slider-square {
// background-color: black;
// height: 12px;
// width: 12px;
// top: 6px;
// border-radius: 6px;
// }
// }
// }
.header {
.navigate.dashboard{
display: none;
}
}
// .header {
// .navigate.dashboard{
// display: none;
// }
// }
.dashboard-app {
.dashboard-wrapper {
display: flex;
height: 100%;
overflow: hidden;
.app__wrapper {
cursor: default;
@media @sdi-small {
margin: 0px;
padding: 0px;
border: 0px;
}
> div {
flex: 1;
border-top: @borderDark;
padding-top: @margin;
height: 100%;
overflow-y: auto;
&:nth-child(n + 2) {
margin-left: @margin * 2;
}
&.my-apps {
flex: 1.4;
}
&.login-widget {
flex: 0.6;
}
}
}
// EDITO
.edito {
padding-top: 0 !important;
}
.edito__title {
.textExtraLarge();
padding-top: @margin;
height: @edito-title-height;
}
.edito__text {
margin-top: @margin;
.textBig();
font-weight: @fwRegular;
line-height: 120%;
p {
margin-bottom: @margin;
}
}
.app-item {
padding: @margin 0;
border-bottom: @borderDark;
margin-bottom: @margin;
.app__wrapper {
.textExtraLarge();
display: inline-flex;
align-items: center;
padding-bottom: @margin;
cursor: default;
&:hover {
color: @activeColor;
}
}
.app-picto {
margin-right: @margin;
}
}
// PICTO DECLARATIONS
.app-item {
.app-picto:before {
.awsomefont;
}
&.view .app-picto:before {
content: @fa-var-map-o;
}
&.metadata .app-picto:before {
content: @fa-var-file-text-o;
}
&.compose .app-picto:before {
content: @fa-var-pencil;
}
&.alias .app-picto:before {
content: @fa-var-quote-right;
}
&.solar .app-picto:before {
content: @fa-var-sun-o;
}
&.angled-universe .app-picto:before {
content: @fa-var-book;
}
&.angled-project .app-picto:before {
content: @fa-var-table;
}
&.angled-query .app-picto:before {
content: @fa-var-search;
}
}
// LOGOUT
.logout-username {
.textExtraLarge();
margin-bottom: @margin;
}
h2 {
margin-bottom: @margin;
&.notification {
border-top: @borderDark;
margin-top: @margin;
padding: @margin 0;
}
}
// LOGIN
.login-widget {
a {
text-decoration: none;
}
}
// DISCLAIMER
.user__disclaimer {
margin-top: @margin * 2;
}
}
\ No newline at end of file
}
/*
* Copyright (C) 2017 Atelier Cartographique <contact@atelier-cartographique.be>
*
......@@ -21,38 +20,35 @@ import { DIV } from 'sdi/components/elements';
import { create, IMapOptions } from 'sdi/map';
import langSwitch from 'sdi/components/lang-switch';
import { getBaseLayer, getMapInfo, getFeatureId, getLayerId } from '../queries/app';
import {
getView,
getInteractionMode,
getInteraction,
} from '../queries/map';
getBaseLayer,
getMapInfo,
getFeatureId,
getLayerId
} from '../queries/app';
import { getView, getInteractionMode, getInteraction } from '../queries/map';
import { viewEvents, scalelineEvents } from '../events/map';
import {
viewEvents,
scalelineEvents,
} from '../events/map';
import { setLayout, setCurrentFeatureById, unsetCurrentFeature } from '../events/app';
setLayout,
setCurrentFeatureById,
unsetCurrentFeature
} from '../events/app';
const logger = debug('sdi:comp/map');
export const mapName = 'main-view';
const getInfo =
() => getMapInfo().fold(null, m => m);
const getInfo = () => getMapInfo().fold(null, m => m);
const selectFeature =
(lid: string, fid: string | number) => {
setCurrentFeatureById(lid, fid);
setLayout('map-and-feature');
};
const selectFeature = (lid: string, fid: string | number) => {
setCurrentFeatureById(lid, fid);
setLayout('map-and-feature');
};
const clearSelection =
() => {
unsetCurrentFeature();
setLayout('map');
};
const clearSelection = () => {
unsetCurrentFeature();
setLayout('map');
};
const options: IMapOptions = {
getBaseLayer,
......@@ -61,69 +57,60 @@ const options: IMapOptions = {
getMapInfo: getInfo,
updateView: viewEvents.updateMapView,
setScaleLine: scalelineEvents.setScaleLine,
setScaleLine: scalelineEvents.setScaleLine
};
let mapSetTarget: (t: Element | null) => void;
let mapUpdate: () => void;
const getSelected =
() => ({
featureId: getFeatureId(),
layerId: getLayerId(),
});
const attachMap =
() =>
(element: Element | null) => {
// logger(`attachMap ${typeof element}`);
if (!mapUpdate) {
const {
update,
setTarget,
highlightable,
selectable,
} = create(mapName, { ...options, element });
mapSetTarget = setTarget;
mapUpdate = update;
selectable({
selectFeature,
clearSelection,
getSelected,
}, getInteraction);
highlightable(getSelected);
}
if (element) {
mapSetTarget(element);
}
else {
mapSetTarget(null);
}
};
const render =
() => {
if (mapUpdate) {
mapUpdate();
}
return (
DIV({ className: `map-wrapper ${getInteractionMode()}` },
DIV({
className: 'map',
ref: attachMap(),
}),
DIV({ className: 'brand-logo-box' }),
langSwitch())
const getSelected = () => ({
featureId: getFeatureId(),
layerId: getLayerId()
});
const attachMap = () => (element: Element | null) => {
// logger(`attachMap ${typeof element}`);
if (!mapUpdate) {
const { update, setTarget, highlightable, selectable } = create(
mapName,
{ ...options, element }
);
mapSetTarget = setTarget;
mapUpdate = update;
selectable(
{
selectFeature,
clearSelection,
getSelected
},
getInteraction
);
};
highlightable(getSelected);
}
if (element) {
mapSetTarget(element);
} else {
mapSetTarget(null);
}
};
const render = () => {
if (mapUpdate) {
mapUpdate();
}
return DIV(
{ className: `map-wrapper map-interaction-${getInteractionMode()}` },
DIV({
className: 'map',
ref: attachMap()
}),
DIV({ className: 'brand-logo-box' }),
langSwitch()
);
};
export default render;
......
......@@ -80,7 +80,7 @@
}
.mini-map--info-item--placeholder {
background-color: @light-grey;
background-color: @greyLight;
height: 1em;
width: 80%;
}
......
.metadata-editor {
width: calc(~"100% - @{margin} * 2");
// width: calc(~'100% - @{margin} * 2');
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
margin: auto;
border: 1px solid @borderLightColor;
padding: @margin;
overflow-y: hidden;
// margin: auto;
border-top: @borderLight;
padding-top: @margin;
* {
box-sizing: border-box;
......@@ -24,14 +24,14 @@
.meta-wrapper {
.flex(@justify: flex-start, @align: flex-start);
.absolute(82px, @margin * 2, 50px, @margin * 2); // flex: 1;
.absolute(82px, @margin * 2, 65px, 0); // flex: 1;
.meta-edit {
.flex(@wrap: nowrap, @align: flex-start, @justify: initial);
.widgetBackground;
height: 100%;
padding: @margin 0;
width: calc(~"100vw - 2 * @{margin}");
width: calc(~'100vw - 2 * @{margin}');
}
.metadata-info,
......@@ -52,7 +52,7 @@
.meta-common {
padding: 0 @margin;
>* {
> * {
.word-wrap;
display: block;
width: 100%;
......@@ -89,4 +89,4 @@
text-align: center;
justify-content: center;
}
}
\ No newline at end of file
}
.metadata-list {
width: calc(~"100% - @{margin} * 2");
// width: calc(~'100% - @{margin} * 2');
width: 100%;
height: 100%;
overflow-y: hidden;
margin: auto;
border: 1px solid @borderLightColor;
padding: @margin;
// margin: auto;
border-top: @borderLight;
padding-top: @margin;
h1 {
margin-bottom: @margin * 2;
}
.infinite-table {
height: calc(~"100% - 47px - 2 * @{margin}");
height: calc(~'100% - 47px - 2 * @{margin}');