mapshaper 0.7.67 → 0.7.68

package/www/page.css

@@ -944,46 +944,156 @@ body.sidebar-panels-resizing .sidebar-panels-resize-handle::before,
 	}
 }
 
+:root {
+	--sidebar-strip-height: 33px;
+}
+
+/* Icon buttons for opening the sidebar, shown on the map while the sidebar is
+   closed. Sized and styled to mirror the .nav-buttons on the right, and like
+   them hidden on the splash screen: body.map-view is set once data is
+   imported or the splash popup is dismissed. */
 .sidebar-tabs {
 	position: absolute;
-	top: 66px; /* below line intersection repair link */
+	top: 35px; /* 29px header + the 6px offset of .nav-buttons */
 	left: 0;
 	z-index: 40;
+	padding: 3px;
+	background-color: white;
+	border-radius: 7px;
 	pointer-events: auto;
 }
 
+body:not(.map-view) .sidebar-tabs {
+	display: none;
+}
+
 body.sidebar-open .sidebar-tabs {
-	left: var(--left-sidebar-width);
-	margin-left: -1.5px;
+	display: none;
 }
 
 body.sidebar-tabs-over-popup .sidebar-tabs {
 	z-index: 90;
 }
 
+/* keep the line intersection readout clear of the buttons */
+body:not(.sidebar-open) .intersection-display {
+	left: 44px;
+}
+
 .sidebar-tab {
-	border: 1px solid rgba(255,255,255,0.8);
-	border-right: none;																										;
-	writing-mode: vertical-rl;
-	transform: rotate(180deg);
-	background-color: var(--theme-col);
-	color: white;
-	padding: 9px 4px;
-	margin-bottom: 4px;
-	border-radius: 5px 0 0 5px;
+	position: relative;
+	padding: 3px 4px;
+	line-height: 1;
+	cursor: pointer;
+}
+
+.sidebar-icon {
+	display: block;
+}
+
+.sidebar-icon * {
+	fill: var(--theme-col);
+}
+
+.sidebar-tab.console-tab {
+	padding-top: 8px;
+}
+
+.sidebar-tab:hover .sidebar-icon * {
+	fill: #166689;
+}
+
+/* Tooltip to the right of the button, matching the .nav-btn tooltips */
+.sidebar-tab[data-tooltip]:hover::after {
+	content: attr(data-tooltip);
+	position: absolute;
+	top: 50%;
+	left: calc(100% + 3px);
+	transform: translateY(-50%);
+	pointer-events: none;
+	background-color: rgba(255, 255, 255, 0.85);
+	color: var(--colored-text);
+	font-size: 12px;
+	line-height: 12px;
+	padding: 3px 6px 4px 6px;
+	white-space: nowrap;
+}
+
+/* centre on the icon, which the console button's extra top padding lowers */
+.sidebar-tab.console-tab[data-tooltip]:hover::after {
+	top: calc(50% + 2px);
+}
+
+/* Panel toggles at the top of the open sidebar. Each toggles its own panel,
+   so both can be on at once. */
+.sidebar-strip {
+	display: none;
+	position: absolute;
+	top: 29px;
+	left: 0;
+	z-index: 30;
+	width: var(--left-sidebar-width);
+	max-width: 100%;
+	height: var(--sidebar-strip-height);
+	box-sizing: border-box;
+	align-items: flex-start;
+	gap: 6px;
+	padding: 7px 10px 0 10px;
+	background-color: white;
+	border-right: 1px solid #c6c6c6;
+}
+
+body.sidebar-open .sidebar-strip {
+	display: flex;
+}
+
+body.sidebar-open .sidebar-panels {
+	margin-top: calc(29px + var(--sidebar-strip-height));
+}
+
+.sidebar-strip-btn {
+	display: flex;
+	align-items: center;
+	gap: 5px;
+	padding: 2px 8px 2px 6px;
+	border: 1px solid #cfdde4;
+	border-radius: 12px;
+	color: var(--theme-col);
 	font-size: 13px;
 	font-weight: 500;
+	line-height: 14px;
 	cursor: pointer;
-	pointer-events: auto;
+	user-select: none;
+}
+
+.sidebar-strip-btn:hover {
+	border-color: var(--theme-col);
+}
+
+.sidebar-strip-btn.active {
+	background-color: var(--theme-col);
+	border-color: var(--theme-col);
+	color: white;
 }
 
-.sidebar-tab:hover {
+.sidebar-strip-btn.active:hover {
 	background-color: var(--dk-theme-col);
+	border-color: var(--dk-theme-col);
 }
 
-body.layers-open .layer-tab,
-body.console-open .console-tab {
-	background-color: black;
+.sidebar-strip-btn.active .sidebar-icon * {
+	fill: white;
+}
+
+/* matches the × of .label-style-close on the tool panels */
+.sidebar-hide-btn {
+	margin-left: auto;
+	padding: 3px 0 0 4px;
+	font-size: 16px;
+	line-height: 1;
+	cursor: pointer;
+	user-select: none;
+	color: black;
 }
 
 
@@ -1198,7 +1308,7 @@ body.simplify .layer-control-btn {
 	max-height: 500px;
 	overflow: hidden;
 	overflow-y: auto;
-	padding: 9px 14px 10px 14px;
+	padding: 2px 14px 10px 14px;
 	pointer-events: auto;
 	border-radius: 9px;
 }
@@ -1242,10 +1352,42 @@ body.simplify .layer-control-btn {
 	font-size: 13px;
 }
 
+/* "Add files" and "Draw: labels · points · ..." are two groups, and a narrow
+   sidebar wraps between them, so the second line starts with "Draw:". The dot
+   between them is each group's ::before, hung to the group's left: a group that
+   starts a line has its dot pushed past the left edge of the row and clipped,
+   so no line ends or begins with a stray dot. */
 .layer-add-links {
 	margin: 2px 0 2px 0;
 	font-size: 13px;
 	line-height: 1.2;
+	overflow: hidden;
+}
+
+.layer-add-links-inner {
+	display: flex;
+	flex-wrap: wrap;
+	margin-left: -1.6em;
+}
+
+/* The padding holds the dot, so that a group long enough to wrap starts its
+   later lines at the row's edge rather than under the clipped dot. */
+.layer-add-links-group {
+	padding-left: 1.6em;
+}
+
+.layer-add-links-group::before {
+	content: "·";
+	display: inline-block;
+	width: 1.6em;
+	margin-left: -1.6em;
+	text-align: center;
+	color: #777;
+	font-weight: bold;
+}
+
+.layer-add-links-group:first-child {
+	white-space: nowrap;
 }
 
 .layer-menu-link {
@@ -1301,7 +1443,7 @@ body.simplify .layer-control-btn {
 .map-frame-empty {
 	cursor: pointer;
 	font-size: 12px;
-	padding: 7px 4px 4px;
+	padding: 4px 0;
 }
 
 .pin-all img,
@@ -1401,12 +1543,47 @@ img.eye-btn {
 	z-index: 1;
 }
 
-.layer-item .row {
+/* Name and contents on one line. The contents column has a fixed width, so it
+   lines up from row to row, and the name takes the rest, truncated if long. */
+.layer-item .layer-row {
+	display: flex;
+	align-items: baseline;
+	gap: 12px;
+	margin-right: 44px; /* room for row controls */
 	line-height: 17px;
-	margin-bottom: 1px;
 	white-space: nowrap;
 }
 
+.layer-item .layer-name-col {
+	flex: 1 1 auto;
+	min-width: 0;
+}
+
+/* wraps a point layer that lists several kinds of feature */
+.layer-item .layer-contents {
+	flex: none;
+	width: 9em;
+	white-space: normal;
+	font-size: 12.5px;
+	color: #666;
+}
+
+/* bar on the left edge of the active layer; a shadow rather than a border, so
+   the row's text keeps its alignment with the other rows */
+.layer-menu .layer-item.active {
+	box-shadow: inset 5px 0 0 var(--theme-col);
+}
+
+/* hints at a tooltip that counts the features with null geometry */
+.layer-item .layer-contents.has-nulls span {
+	border-bottom: 1px dotted #999;
+}
+
+/* a name being edited is shown in full, over the contents column */
+.layer-item:has(.layer-name.editing) .layer-contents {
+	visibility: hidden;
+}
+
 .layer-item .layer-name {
 	display: inline-block;
 	max-width: 100%;
@@ -1446,20 +1623,6 @@ img.eye-btn {
 	background-color: #f7f7f7;
 }
 
-.layer-item .row > div {
-	display: inline-block;
-}
-
-.layer-item .col1 {
-	width: 84px;
-}
-
-.layer-item .row1 .col2 {
-	margin-right: 44px; /* room for row controls */
-	max-width: calc(100% - 132px);
-	vertical-align: top;
-}
-
 
 .layer-item.drag-target:not(.active) {
 	background-color: #f7f7f7;
@@ -2649,12 +2812,12 @@ body.pan.panning .map-layers:not(.drawing) {
 	width: 100%;
 }
 
-/* Three columns on the appearance rows: the neatline's width sits with the
-   colour and opacity it applies to, and the background row leaves the last
-   column empty rather than pushing a lone field onto a line of its own. */
+/* The neatline's width sits beside the colour and opacity it applies to, and
+   the background row leaves the column empty rather than pushing a lone field
+   onto a line of its own. */
 .frame-properties-form .label-split-row {
 	column-gap: 8px;
-	grid-template-columns: 1fr 54px 54px;
+	grid-template-columns: 1fr 54px;
 }
 
 /* Wide enough for "Aspect ratio", and fixed rather than auto so that the ratio
@@ -2732,9 +2895,6 @@ body.pan.panning .map-layers:not(.drawing) {
 	width: 130px;
 }
 
-/* Stretches so that the margin field ends where the fields above it do: the
-   row is shorter than they are, and a ragged right edge reads as unfinished
-   rather than as deliberate grouping. */
 .frame-create-margin {
 	align-items: center;
 	display: flex;
@@ -2743,11 +2903,6 @@ body.pan.panning .map-layers:not(.drawing) {
 	min-width: 0; /* a flex item defaults to min-width:auto and will not shrink below its field */
 }
 
-.frame-create-margin > span {
-	color: #555;
-	font-size: 12px;
-}
-
 .frame-create-margin > input {
 	box-sizing: border-box;
 	flex: 1;
@@ -2784,6 +2939,7 @@ body.pan.panning .map-layers:not(.drawing) {
 	grid-template-columns: 1fr 1fr 54px;
 }
 
+.frame-create-margin > span,
 .frame-input-cell > span {
 	color: #555;
 	font-size: 12px;
@@ -3080,8 +3236,9 @@ body.pan.panning .map-layers:not(.drawing) {
    different place.
 
    Bottom-aligned, so that a caption above one control cannot push it out of
-   line with the control beside it: the icon size has a "Size" over it and the
-   shape buttons beside it have nothing, and the two still have to be level. */
+   line with the control beside it: the frame's neatline width has a "Width"
+   over it and the colour beside it has a longer caption, and the two still
+   have to be level. */
 .label-split-row {
 	display: grid;
 	grid-template-columns: 1fr var(--label-split-b-width);
@@ -3096,28 +3253,26 @@ body.pan.panning .map-layers:not(.drawing) {
 	color: #555;
 }
 
-/* Captions a couple of sizes down from the values they name. They are read
-   once, when the panel is first met, and the narrow column of a split row is
-   only as wide as the longest of them -- "Letter spacing" is what set it --
-   so quieter captions are also a narrower panel. Direct children only: the
-   colour picker's H/S/B captions are spans in a row too. */
+.label-editing-status,
+.label-style-panel .label-style-row.label-style-selection-row > span {
+	font-size: 12px;
+	color: #555;
+}
+
 .label-style-panel .label-style-row > span,
-.label-style-panel .label-style-selection-row > span,
 .label-style-panel .label-split-cell > span,
 .label-style-panel .label-style-row > .label-style-row-label,
 .label-style-panel .label-split-cell > .label-style-row-label,
-.label-style-panel .label-icon-size-caption,
+.label-style-panel .frame-input-cell > span,
 .label-style-panel .point-style-note {
-	font-size: 12px;
+	font-size: 11px;
+	color: #555;
 }
 
 .label-split-row .label-split-cell + .label-split-cell {
 	white-space: nowrap;
 }
 
-/* Each column's control fills its column: the widths are the grid's to decide
-   now, and a control keeping a width of its own would sit inside its cell
-   rather than lining up with the one above it. */
 .label-split-cell > select,
 .label-split-cell > .size-field,
 .label-split-cell > input[type="text"] {
@@ -3191,7 +3346,7 @@ body.pan.panning .map-layers:not(.drawing) {
 /* Whitespace and a bold heading separate the sections; a rule as well would be
    a third answer to a question already settled twice. */
 .label-style-panel .label-style-section + .label-style-section {
-	margin-top: 12px;
+	margin-top: 10px;
 	padding-top: 0;
 	border-top: 0;
 }
@@ -3210,25 +3365,17 @@ body.pan.panning .map-layers:not(.drawing) {
 	align-self: center;
 }
 
-/* A section switched off shows only its heading (see setSectionCollapsed()),
-   including the caption the Icon heading carries over its size column. */
-.label-style-panel .label-style-section.collapsed > :not(.label-style-section-title),
-.label-style-panel .label-style-section.collapsed .label-icon-size-caption {
+/* A section switched off shows only its heading (see setSectionCollapsed()). */
+.label-style-panel .label-style-section.collapsed > :not(.label-style-section-title) {
 	display: none;
 }
 
-/* .hidden is one class and the rule above is two, so a heading told to hide
-   would go on being laid out. The circle panel hides its Circles heading once
-   the points are circles: the panel's title says so, and the section is the
-   only thing left in it. */
 .label-style-panel .label-style-section-title.hidden {
 	display: none;
 }
 
-/* 15.5px is what the dialogs subhead at (.info-box h4); the weight is the
-   sketch's, which wants these read as headings rather than as captions. */
 .label-style-panel .label-style-section-name {
-	font-size: 15.5px;
+	font-size: 15px;
 	color: #222;
 }
 
@@ -3261,22 +3408,6 @@ body.pan.panning .map-layers:not(.drawing) {
 	overflow: hidden;
 }
 
-/* Closer to the heading above it than a row usually is, because that heading
-   line carries this row's "Size" caption: the gap between a caption and the
-   field it names is 2px everywhere else in the panel. */
-.text-style-panel .label-icon-shapes-row {
-	margin-top: 2px;
-}
-
-/* Pushed to the right and given the width of a split row's narrow column, so
-   that it sits over the size field a row below it. */
-.text-style-panel .label-icon-size-caption {
-	width: var(--label-split-b-width);
-	margin-left: auto;
-	font-weight: normal;
-	color: #555;
-}
-
 /* Darker than the app's default placeholder. These fields show the value the
    renderer will use when the property is absent -- 0 and auto are true of the
    label, they are just not stored on it -- so at #aaa they read as a control
@@ -3320,9 +3451,6 @@ body.pan.panning .map-layers:not(.drawing) {
 	background: #f0f0f0;
 }
 
-/* A grey fill, not the inverse the panel's other buttons use: the glyph is
-   what identifies the choice, and reversing it out makes the selected shape
-   the hardest one to read. */
 .label-style-panel .label-btn-group .label-panel-btn.selected {
 	background: #dcdcdc;
 	color: black;
@@ -3390,9 +3518,6 @@ body.pan.panning .map-layers:not(.drawing) {
 	margin-top: 0;
 }
 
-/* The cell a colour field sits in, which is also what its picker hangs from:
-   the picker is wider than the panel, so it opens over the map, and anchoring
-   it to the cell keeps it on the same side of the panel as its field. */
 .label-color-row {
 	position: relative;
 }
@@ -3415,10 +3540,6 @@ body.pan.panning .map-layers:not(.drawing) {
 	opacity: 0.45;
 }
 
-/* A button with a word on it: Clear style, Random fills, Create. The same
-   shape as Save current in the saved styles row, which is the same kind of
-   thing -- a named action, as wide as its name -- and the same height as the
-   fields above it. */
 .label-panel-action-btn {
 	box-sizing: border-box;
 	display: inline-flex;
@@ -3428,6 +3549,7 @@ body.pan.panning .map-layers:not(.drawing) {
 	border: 1px solid var(--label-field-border);
 	border-radius: var(--label-field-radius);
 	background-color: white;
+	font-size: 12px;
 	color: var(--normal-text);
 	cursor: pointer;
 	user-select: none;
@@ -3449,9 +3571,6 @@ body.pan.panning .map-layers:not(.drawing) {
 	gap: 4px 6px;
 }
 
-/* A swatch and its hex value inside one border: the pair is one answer to one
-   question, and a separate button beside a text box reads as two. The swatch
-   keeps its own outline so that white does not disappear into the field. */
 .label-style-panel .label-color-field {
 	display: flex;
 	align-items: center;
@@ -3472,8 +3591,8 @@ body.pan.panning .map-layers:not(.drawing) {
 	width: 13px;
 	height: 13px;
 	margin-right: 6px;
-	border: 1px solid #bbb;
-	border-radius: 2px;
+	border: 1px solid rgba(0,0,0,0.22);
+	/* border-radius: 2px; */
 }
 
 /* A swatch for a selection whose colours disagree: split rather than empty,
@@ -3505,6 +3624,23 @@ body.pan.panning .map-layers:not(.drawing) {
 	opacity: 0.45;
 }
 
+/* The opacity at the end of a colour field, behind a divider the height of the
+   field. Wide enough for "100%" and for "mixed", and no wider: the hex value
+   beside it gets the rest. Selectors as specific as the colour field's input
+   rules above, which would otherwise stretch it and take its divider away. */
+.label-style-panel .label-color-field input.label-opacity-input,
+.label-style-panel .label-color-field input.label-opacity-input:focus {
+	flex: none;
+	align-self: stretch;
+	width: 44px;
+	height: auto;
+	margin: 0 -3px 0 4px;
+	padding: 0 4px 0 6px;
+	border: none;
+	border-left: 1px solid var(--label-field-border);
+	border-radius: 0;
+}
+
 .label-color-row .label-color-picker input[type="text"] {
 	width: 45px;
 }
@@ -3514,10 +3650,6 @@ body.pan.panning .map-layers:not(.drawing) {
 	box-sizing: border-box;
 }
 
-/* What a section of this panel says when there is nothing in it to set: the
-   layer is drawn some way this panel cannot edit, or the thing the section is
-   for has to be made in the console. Set like a caption, not like a field's
-   value. */
 .point-style-note {
 	color: #555;
 	line-height: 1.3;
@@ -3667,10 +3799,6 @@ body.dragging-color-picker * {
 	display: none;
 }
 
-.label-editing-status {
-	color: #555;
-}
-
 .label-style-selection-row .label-editing-clear {
 	margin-left: 8px;
 	color: var(--colored-text);
@@ -3701,7 +3829,7 @@ body.dragging-color-picker * {
 .text-style-panel .label-position-grid {
 	grid-template-columns: repeat(3, 10px);
 	gap: 3px;
-	margin-top: -13px;
+	margin-top: -15px;
 	margin-bottom: 3px;
 }
 
@@ -3973,6 +4101,27 @@ body.dragging-color-picker * {
 	top: 1px;
 }
 
+/* Active-layer name at the top of the arrow menu. inline-size containment
+   keeps a long name from widening the menu: the heading takes the width set
+   by the tool names and cuts the layer name short with an ellipsis. */
+.nav-menu-heading {
+	contain: inline-size;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	margin: 1px 10px 3px 10px;
+	padding: 1px 0 3px 0;
+	border-bottom: 1px solid #e4e4e4;
+	color: #999;
+	font-size: 11px;
+	line-height: 12px;
+}
+
+.nav-menu-divider {
+	margin: 4px 10px;
+	border-top: 1px solid #e4e4e4;
+}
+
 .save-menu {
 	text-align: right;
 	padding-bottom: 5px;