Rename "options/top bar" terminology to "control bar" and update comments

This commit is contained in:
Keavon Chambers
2025-01-07 17:33:45 -08:00
parent 1c880daea2
commit 9eb544df74
21 changed files with 83 additions and 92 deletions
+14 -14
View File
@@ -444,18 +444,18 @@
</script>
<LayoutCol class="document" on:dragover={(e) => e.preventDefault()} on:drop={dropFile}>
<LayoutRow class="options-bar" classes={{ "for-graph": $document.graphViewOverlayOpen }} scrollableX={true}>
<LayoutRow class="control-bar" classes={{ "for-graph": $document.graphViewOverlayOpen }} scrollableX={true}>
{#if !$document.graphViewOverlayOpen}
<WidgetLayout layout={$document.documentModeLayout} />
<WidgetLayout layout={$document.toolOptionsLayout} />
<LayoutRow class="spacer" />
<WidgetLayout layout={$document.documentBarLayout} />
{:else}
<WidgetLayout layout={$document.nodeGraphBarLayout} />
<WidgetLayout layout={$document.nodeGraphControlBarLayout} />
{/if}
</LayoutRow>
<LayoutRow
class="shelf-and-table"
class="tool-shelf-and-viewport-area"
styles={toolShelfTotalToolsAndSeparators && {
"--total-separators": toolShelfTotalToolsAndSeparators.totalSeparators,
"--total-tool-rows-for-1-columns": toolShelfTotalToolsAndSeparators.totalToolRowsFor1Columns,
@@ -463,7 +463,7 @@
"--total-tool-rows-for-3-columns": toolShelfTotalToolsAndSeparators.totalToolRowsFor3Columns,
}}
>
<LayoutCol class="shelf">
<LayoutCol class="tool-shelf">
{#if !$document.graphViewOverlayOpen}
<LayoutCol class="tools" scrollableY={true}>
<WidgetLayout layout={$document.toolShelfLayout} />
@@ -471,24 +471,24 @@
{:else}
<LayoutRow class="spacer" />
{/if}
<LayoutCol class="shelf-bottom-widgets">
<LayoutCol class="tool-shelf-bottom-widgets">
<WidgetLayout class={"working-colors-input-area"} layout={$document.workingColorsLayout} />
</LayoutCol>
</LayoutCol>
<LayoutCol class="table">
<LayoutCol class="viewport-container">
{#if rulersVisible}
<LayoutRow class="ruler-or-scrollbar top-ruler">
<LayoutCol class="ruler-corner"></LayoutCol>
<RulerInput origin={rulerOrigin.x} majorMarkSpacing={rulerSpacing} numberInterval={rulerInterval} direction="Horizontal" bind:this={rulerHorizontal} />
</LayoutRow>
{/if}
<LayoutRow class="viewport-container">
<LayoutRow class="viewport-container-inner">
{#if rulersVisible}
<LayoutCol class="ruler-or-scrollbar">
<RulerInput origin={rulerOrigin.y} majorMarkSpacing={rulerSpacing} numberInterval={rulerInterval} direction="Vertical" bind:this={rulerVertical} />
</LayoutCol>
{/if}
<LayoutCol class="viewport-container" styles={{ cursor: canvasCursor }}>
<LayoutCol class="viewport-container-inner" styles={{ cursor: canvasCursor }}>
{#if cursorEyedropper}
<EyedropperPreview
colorChoice={cursorEyedropperPreviewColorChoice}
@@ -547,7 +547,7 @@
padding-bottom: 0;
}
.options-bar {
.control-bar {
height: 32px;
flex: 0 0 auto;
margin: 0 4px;
@@ -561,7 +561,7 @@
}
}
.shelf-and-table {
.tool-shelf-and-viewport-area {
// Enables usage of the `100cqh` unit to reference the height of this container element.
container-type: size;
@@ -586,7 +586,7 @@
--columns-width: calc(var(--columns) * var(--tool-width));
--columns-width-max: calc(3px * var(--tool-width));
.shelf {
.tool-shelf {
flex: 0 0 auto;
justify-content: space-between;
// A precaution in case the variables above somehow fail
@@ -644,7 +644,7 @@
}
}
.shelf-bottom-widgets {
.tool-shelf-bottom-widgets {
flex: 0 0 auto;
align-items: center;
@@ -664,7 +664,7 @@
}
}
.table {
.viewport-container {
flex: 1 1 100%;
.ruler-or-scrollbar {
@@ -699,7 +699,7 @@
margin-right: 16px;
}
.viewport-container {
.viewport-container-inner {
flex: 1 1 100%;
position: relative;