b08a6b5cec
1. Renames color names in palette. Using names such as "primary" and
"secondary" that are in consistent with designs such as material,
bootstrap and metro UI palettes. It adds `color-` prefix on color
variables in line with Vue Design System.
2. Introduces necessary changes to follow the system color system
everywhere without using any other color:
- It changes tooltip background from black to darker primary
colors.
- It overrides unset styles from tree component
- It ensures footer has same color as top menu.
3. Removes opacity CSS changes to have better control on choices. To
achieve that:
- It introduces new "light" variants of main colors
- It switches to colors with different variants (e.g. in Dialogs it
uses primary color as button as it has variants that can be
activated on hover meanwhile on-surface color is single).
4. Styles a tags (anchor elements) globally for consistency
76 lines
1.9 KiB
Vue
76 lines
1.9 KiB
Vue
<template>
|
|
<div
|
|
class="handle"
|
|
:style="{ cursor: cursorCssValue }"
|
|
@mousedown="startResize">
|
|
<div class="line" />
|
|
<font-awesome-icon
|
|
class="icon"
|
|
:icon="['fas', 'arrows-alt-h']"
|
|
/>
|
|
<div class="line" />
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Vue } from 'vue-property-decorator';
|
|
|
|
@Component
|
|
export default class Handle extends Vue {
|
|
public readonly cursorCssValue = 'ew-resize';
|
|
private initialX: number = undefined;
|
|
|
|
public startResize(event: MouseEvent): void {
|
|
this.initialX = event.clientX;
|
|
document.body.style.setProperty('cursor', this.cursorCssValue);
|
|
document.addEventListener('mousemove', this.resize);
|
|
window.addEventListener('mouseup', this.stopResize);
|
|
event.stopPropagation();
|
|
event.preventDefault();
|
|
}
|
|
public resize(event: MouseEvent): void {
|
|
const displacementX = event.clientX - this.initialX;
|
|
this.$emit('resized', displacementX);
|
|
this.initialX = event.clientX;
|
|
}
|
|
public stopResize(): void {
|
|
document.body.style.removeProperty('cursor');
|
|
document.removeEventListener('mousemove', this.resize);
|
|
window.removeEventListener('mouseup', this.stopResize);
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "@/presentation/styles/colors.scss";
|
|
|
|
$color : $color-primary-dark;
|
|
$color-hover : $color-primary;
|
|
|
|
.handle {
|
|
user-select: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
&:hover {
|
|
.line {
|
|
background: $color-hover;
|
|
}
|
|
.image {
|
|
color: $color-hover;
|
|
}
|
|
}
|
|
.line {
|
|
flex: 1;
|
|
background: $color;
|
|
width: 3px;
|
|
}
|
|
.icon {
|
|
color: $color;
|
|
}
|
|
margin-right: 5px;
|
|
margin-left: 5px;
|
|
}
|
|
</style>
|