Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix/2671 hover color #2672

Merged
merged 2 commits into from
Jan 9, 2024
Merged

Fix/2671 hover color #2672

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0331fab
fix: change hovering color to light gray for layer list. Moved paddin…
JinIgarashi Jan 9, 2024
38e8bc0
fix: fixed colormap picker button layout
JinIgarashi Jan 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/lemon-spoons-cough.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"geohub": patch
---

fix: change hovering color to light gray for layer list. Moved padding to inside accordion
6 changes: 3 additions & 3 deletions sites/geohub/src/components/maplibre/raster/RasterClassifyLegend.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -287,8 +287,8 @@
</div>

{#if !layerHasUniqueValues}
<div class="columns">
<div class="column is-7 pr-1">
<div class="columns mb-0">
<div class="column is-7 pr-1 py-0">
<FieldControl title="Method">
<div slot="help">
Whether to apply a classification method for a vector layer in selected property. This
Expand All @@ -299,7 +299,7 @@
</div>
</FieldControl>
</div>
<div class="column pl-1">
<div class="column pl-1 py-0">
<FieldControl title="Classes">
<div slot="help">Increase of decrease the number of classes.</div>
<div slot="control">
Expand Down
2 changes: 1 addition & 1 deletion sites/geohub/src/components/pages/map/Content.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@
<div hidden={activeTab !== TabNames.DATA} class="mx-4">
<DataView bind:contentHeight />
</div>
<div hidden={activeTab !== TabNames.LAYERS} class="mx-4">
<div hidden={activeTab !== TabNames.LAYERS}>
<LayerList bind:contentHeight bind:activeTab />
</div>
{/if}
2 changes: 1 addition & 1 deletion sites/geohub/src/components/pages/map/layers/LayerList.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@

{#if $layerListStore?.length > 0}
<div
class="is-flex is-align-items-center layer-header pt-2"
class="is-flex is-align-items-center layer-header pt-2 px-4"
bind:clientHeight={layerHeaderHeight}
>
<div class="layer-header-buttons buttons mb-0">
Expand Down
32 changes: 15 additions & 17 deletions sites/geohub/src/components/pages/map/layers/raster/RasterLayer.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<script lang="ts">
import { page } from '$app/stores';
import RasterLegend from '$components/maplibre/raster/RasterLegend.svelte';
import RasterHistogram from '$components/pages/map/layers/raster/RasterHistogram.svelte';
import RasterTransform from '$components/pages/map/layers/raster/RasterTransform.svelte';
import Tabs from '$components/util/Tabs.svelte';
import { TabNames } from '$lib/config/AppConfig';
Expand All @@ -19,7 +20,6 @@
type LayerListStore
} from '$stores';
import { getContext, setContext } from 'svelte';
import RasterHistogram from '$components/pages/map/layers/raster/RasterHistogram.svelte';

export let layer: Layer;

Expand Down Expand Up @@ -83,20 +83,18 @@

<Tabs bind:tabs bind:activeTab on:tabChange={(e) => (activeTab = e.detail)} size="is-small" />

<div class="panel-content px-2 pb-2">
<div hidden={activeTab !== TabNames.STYLE}>
<RasterLegend
bind:layerId={layer.id}
bind:metadata={layer.info}
bind:tags={layer.dataset.properties.tags}
/>
</div>
<div hidden={activeTab !== TabNames.HISTOGRAM}>
<RasterHistogram bind:metadata={layer.info} />
</div>
{#if !isRgbTile}
<div hidden={activeTab !== TabNames.TRANSFORM}>
<RasterTransform bind:layer />
</div>
{/if}
<div hidden={activeTab !== TabNames.STYLE}>
<RasterLegend
bind:layerId={layer.id}
bind:metadata={layer.info}
bind:tags={layer.dataset.properties.tags}
/>
</div>
<div hidden={activeTab !== TabNames.HISTOGRAM}>
<RasterHistogram bind:metadata={layer.info} />
</div>
{#if !isRgbTile}
<div hidden={activeTab !== TabNames.TRANSFORM}>
<RasterTransform bind:layer />
</div>
{/if}
2 changes: 1 addition & 1 deletion sites/geohub/src/components/pages/map/layers/raster/RasterSimpleLayer.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
</script>

<LayerTemplate {layer} bind:isExpanded on:toggled={handleToggleChanged} bind:showEditButton>
<div class="panel-content px-2 pb-2" slot="content">
<div slot="content">
<RasterLegend
bind:layerId={layer.id}
bind:metadata={layer.info}
Expand Down
18 changes: 8 additions & 10 deletions sites/geohub/src/components/pages/map/layers/vector/VectorLayer.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,14 +126,12 @@

<Tabs bind:tabs bind:activeTab on:tabChange={(e) => (activeTab = e.detail)} />

<div class="panel-content px-2 pb-2">
<div hidden={activeTab !== TabNames.STYLE}>
<VectorLegend bind:layerId={layer.id} bind:metadata bind:tags={layer.dataset.properties.tags} />
</div>
<div hidden={activeTab !== TabNames.FILTER}>
<VectorFilter {layer} />
</div>
<div hidden={activeTab !== TabNames.LABEL}>
<VectorLabelPanel {layer} bind:metadata />
</div>
<div hidden={activeTab !== TabNames.STYLE}>
<VectorLegend bind:layerId={layer.id} bind:metadata bind:tags={layer.dataset.properties.tags} />
</div>
<div hidden={activeTab !== TabNames.FILTER}>
<VectorFilter {layer} />
</div>
<div hidden={activeTab !== TabNames.LABEL}>
<VectorLabelPanel {layer} bind:metadata />
</div>
8 changes: 1 addition & 7 deletions sites/geohub/src/components/pages/map/layers/vector/VectorSimpleLayer.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,7 @@

<LayerTemplate {layer} bind:isExpanded on:toggled={handleToggleChanged} bind:showEditButton>
<div slot="content">
<div class="panel-content px-2 pb-2">
<VectorLegend
bind:layerId={layer.id}
bind:metadata
bind:tags={layer.dataset.properties.tags}
/>
</div>
<VectorLegend bind:layerId={layer.id} bind:metadata bind:tags={layer.dataset.properties.tags} />
</div>
</LayerTemplate>

Expand Down
2 changes: 1 addition & 1 deletion sites/geohub/src/components/pages/map/plugins/MaplibreLegendControl.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,7 +217,7 @@
</div>
</div>

<div class="legend-contents p-2">
<div class="legend-contents py-2">
{#if $layerList?.length > 0}
{#each $layerList as layer (layer.id)}
{@const type = getLayerStyle(map, layer.id)?.type}
Expand Down
25 changes: 15 additions & 10 deletions sites/geohub/src/components/util/Accordion.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,12 @@
</script>

<div
class="accordion p-1 {`${
class="accordion px-4 {`${
showHoveredColor
? `${
isSelected ? 'has-background-danger-light' : `${isHovered ? 'border-primary' : 'border'}`
isSelected
? 'has-background-danger-light border-transparent'
: `${isHovered ? 'has-background-white-ter border-transparent' : 'border'}`
}`
: 'border'
}`}"
Expand Down Expand Up @@ -101,16 +103,19 @@
}

&.border {
border-right: 1px rgba(255, 255, 255, 0) solid;
border-left: 1px rgba(255, 255, 255, 0) solid;
border-bottom: 1px rgba(255, 255, 255, 0) solid;
// border-right: 1px rgba(255, 255, 255, 0) solid;
// border-left: 1px rgba(255, 255, 255, 0) solid;
// border-bottom: 1px rgba(255, 255, 255, 0) solid;
border-bottom: 1px #d4d6d8 solid;
}
&.border-primary {
border-right: 1px $primary solid;
border-left: 1px $primary solid;
border-bottom: 1px $primary solid;
border-top: 1px $primary solid;
&.border-transparent {
border-bottom: 1px rgba(255, 255, 255, 0) solid;
}
// &.border-primary {
// border-right: 1px $primary solid;
// border-left: 1px $primary solid;
// border-bottom: 1px $primary solid;
// border-top: 1px $primary solid;
// }
}
</style>
8 changes: 2 additions & 6 deletions sites/geohub/src/components/util/ColorMapPicker.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,16 +69,12 @@

let colorMapStyle = '';
const getColorMapStyle = () => {
let width = buttonWidth;
if (!isFullWidth) {
width = 40;
}
const isReverse = colorMapName.indexOf('_r') !== -1;
let colorMap = chroma.scale(colorMapName.replace('_r', '')).mode('lrgb').colors(5, 'rgba');
if (isReverse) {
colorMap = colorMap.reverse();
}
colorMapStyle = `height: 40px; width:${width}px; background: linear-gradient(90deg, ${colorMap});`;
colorMapStyle = `height: 40px; width:100%; background: linear-gradient(90deg, ${colorMap});`;
};
$: colorMapName, getColorMapStyle();
$: buttonWidth, getColorMapStyle();
Expand All @@ -101,7 +97,7 @@
use:tippy={{ content: tooltipContent }}
>
{#key isReverseColors}
<figure class="image" style={colorMapStyle} data-testid="color-map-figure" />
<div style={colorMapStyle} data-testid="color-map-figure" />
{/key}
<button class="button is-small">
<span class="icon is-small">
Expand Down
2 changes: 1 addition & 1 deletion sites/geohub/src/components/util/FloatingPanel.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
</button>
</div>
</div>
<div class="contents px-2 pb-2" hidden={!isExpanded}>
<div class="contents pb-2" hidden={!isExpanded}>
<slot />
</div>
</div>
Expand Down
Loading