enso-org/enso
1
1
Fork 0
mirror of https://github.com/enso-org/enso.git synced 2024-12-23 00:52:09 +03:00
Code Issues Projects Releases Wiki Activity

Resize handle corners are rounded (#10395)

Browse Source 
* Right dock is opaque

* Resize handle corners are rounded
This commit is contained in:
Kaz Wesley 2024-06-28 05:56:45 -07:00 committed by GitHub
parent 5b5279b896
commit b5f81eff5d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 34 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/gui2/src/components/DockPanel.vue
View File

@ -41,8 +41,7 @@ const style = computed(() => {
width: var(--right-dock-default-width);
right: 0;
border-radius: 7px 0 0;
background-color: rgba(255, 255, 255, 0.35);
backdrop-filter: var(--blur-app-bg);
background-color: rgb(255, 255, 255);
padding: 4px 12px 0 0;
}
.rightDock-enter-active,

36
app/gui2/src/components/ResizeHandles.vue
View File

@ -53,8 +53,12 @@ const handler = {
<div v-if="props.left" class="left" v-on="handler.left" />
<div v-if="props.right" class="right" v-on="handler.right" />
<div v-if="props.bottom" class="bottom" v-on="handler.bottom" />
<div v-if="props.bottom && props.left" class="bottom left" v-on="handler.bottomLeft" />
<div v-if="props.bottom && props.right" class="bottom right" v-on="handler.bottomRight" />
<svg v-if="props.bottom && props.left" class="corner bottom left" v-on="handler.bottomLeft">
<circle />
</svg>
<svg v-if="props.bottom && props.right" class="corner bottom right" v-on="handler.bottomRight">
<circle />
</svg>
</template>
<style scoped>
@ -81,19 +85,43 @@ const handler = {
width: calc(var(--resize-handle-inside) + var(--resize-handle-outside));
}
.right {
left: calc(100% - var(--resize-handle-inside));
right: calc(0px - var(--resize-handle-outside));
width: calc(var(--resize-handle-inside) + var(--resize-handle-outside));
}
.bottom {
top: calc(100% - var(--resize-handle-inside));
top: unset;
bottom: calc(0px - var(--resize-handle-outside));
height: calc(var(--resize-handle-inside) + var(--resize-handle-outside));
}
.corner {
pointer-events: none;
z-index: 2;
--corner-size: calc(
max(var(--resize-handle-inside), var(--resize-handle-radius, 0)) + var(--resize-handle-outside)
);
width: var(--corner-size);
height: var(--corner-size);
& circle {
pointer-events: all;
r: calc(
var(--resize-handle-radius, 0) + (var(--resize-handle-outside) - var(--resize-handle-inside)) /
2
);
stroke: transparent;
stroke-width: calc(var(--resize-handle-inside) + var(--resize-handle-outside));
fill: none;
}
}
.bottom.right {
cursor: nwse-resize;
}
.bottom.left {
cursor: nesw-resize;
& circle {
cx: var(--corner-size);
}
}
.left,

1
app/gui2/src/components/VisualizationContainer.vue
View File

@ -184,6 +184,7 @@ const contentStyle = computed(() => {
--permanent-toolbar-width: 200px;
--resize-handle-inside: var(--visualization-resize-handle-inside);
--resize-handle-outside: var(--visualization-resize-handle-outside);
--resize-handle-radius: var(--radius-default);
color: var(--color-text);
background: var(--color-visualization-bg);
position: absolute;