mirror of
https://github.com/hcengineering/platform.git
synced 2025-05-28 19:08:01 +00:00
UBERF-6226: Updated LOVE layout, VideoPopup. (#5100)
Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>
This commit is contained in:
Alexander Platov
GitHub
parent
72a93ad388
commit
ea006bf28c
@ -29,6 +29,8 @@
|
||||
@import "./tables.scss";
|
||||
@import "./_text-editor.scss";
|
||||
|
||||
@import "./love.scss";
|
||||
|
||||
@import "./mono.scss";
|
||||
|
||||
@font-face {
|
||||
|
||||
133
packages/theme/styles/love.scss
Normal file
133
packages/theme/styles/love.scss
Normal file
@ -0,0 +1,133 @@
|
||||
.floorGrid-room,
|
||||
.floorGrid-configureRoom {
|
||||
position: relative;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
|
||||
&__header {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: .25rem;
|
||||
bottom: calc(100% + .125rem);
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
&__field {
|
||||
position: relative;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 20%;
|
||||
}
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: calc(100% / var(--huly-floor-roomWidth) / 5 * -1);
|
||||
right: calc(100% / var(--huly-floor-roomWidth) / 5 * -1);
|
||||
background-color: var(--theme-popup-color);
|
||||
border: 1px solid var(--theme-popup-divider);
|
||||
border-radius: .75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.floorGrid-room {
|
||||
&__header {
|
||||
align-items: center;
|
||||
top: calc(100% / var(--huly-floor-roomHeight) / 3 * -1.6 + 0.375rem + 1px);
|
||||
|
||||
& > span {
|
||||
color: var(--theme-caption-color);
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
&__field {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 90%;
|
||||
max-height: 90%;
|
||||
transition-property: max-width, max-height;
|
||||
transition-duration: .15s;
|
||||
transition-timing-function: ease-in-out;
|
||||
|
||||
&.hovered:hover {
|
||||
background-color: transparent;
|
||||
|
||||
& > div { opacity: .35; }
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
bottom: calc(100% / var(--huly-floor-roomHeight) / 5 * -1);
|
||||
|
||||
&.hovered { background-color: var(--theme-popup-hover); }
|
||||
}
|
||||
&:not(.preview)::before { top: calc(100% / var(--huly-floor-roomHeight) / 3 * -1.6); }
|
||||
&.preview::before {
|
||||
top: calc(100% / var(--huly-floor-roomHeight) / 3 * -1);
|
||||
bottom: calc(100% / var(--huly-floor-roomHeight) / 3 * -1);
|
||||
left: calc(100% / var(--huly-floor-roomWidth) / 3 * -1);
|
||||
right: calc(100% / var(--huly-floor-roomWidth) / 3 * -1);
|
||||
border-radius: .375rem;
|
||||
|
||||
.floorGrid-room__field { border-radius: .25rem; }
|
||||
}
|
||||
&:not(.disabled, .myOffice) {
|
||||
&:hover .floorGrid-room__field { background-color: var(--theme-button-default); }
|
||||
.floorGrid-room__field:not(.person) {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.disabled .floorGrid-room__header > span { color: var(--theme-trans-color); }
|
||||
}
|
||||
|
||||
.floorGrid-configureRoom {
|
||||
&__header {
|
||||
top: calc(100% / var(--huly-floor-roomHeight) / 3 * -1.6 + .75rem - 1px);
|
||||
|
||||
& > .antiEditBox input { font-size: .8125rem; }
|
||||
}
|
||||
&__field {
|
||||
width: 90%;
|
||||
background-color: var(--theme-button-default);
|
||||
cursor: default;
|
||||
|
||||
&.null { pointer-events: none; }
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: calc(100% / var(--huly-floor-roomHeight) / 3 * -1.6);
|
||||
bottom: calc(100% / var(--huly-floor-roomHeight) / 5 * -1);
|
||||
box-shadow: var(--huly-floor-roomShadow, --theme-popup-shadow);
|
||||
}
|
||||
|
||||
&.dragged {
|
||||
position: absolute;
|
||||
width: var(--huly-floor-roomWidth);
|
||||
height: var(--huly-floor-roomHeight);
|
||||
opacity: .85;
|
||||
z-index: 1;
|
||||
}
|
||||
&.placed {
|
||||
$room-bg-color: var(--theme-popup-color);
|
||||
$room-stroke-color: var(--theme-button-default);
|
||||
background-image: linear-gradient(
|
||||
135deg,
|
||||
$room-stroke-color 10%,
|
||||
$room-bg-color 10%,
|
||||
$room-bg-color 50%,
|
||||
$room-stroke-color 50%,
|
||||
$room-stroke-color 60%,
|
||||
$room-bg-color 60%,
|
||||
$room-bg-color 100%
|
||||
);
|
||||
background-size: 7px 7px;
|
||||
|
||||
.floorGrid-room__header,
|
||||
.floorGrid-room__field { visibility: hidden; }
|
||||
}
|
||||
}
|
||||
@ -14,6 +14,7 @@
|
||||
// limitations under the License.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte'
|
||||
import { deviceOptionsStore as deviceInfo, resizeObserver, testing } from '..'
|
||||
import { fitPopupElement } from '../popups'
|
||||
import type { AnySvelteComponent, PopupAlignment, PopupOptions, PopupPositionElement, DeviceOptions } from '../types'
|
||||
@ -29,6 +30,15 @@
|
||||
export let close: () => void
|
||||
export let contentPanel: HTMLElement | undefined
|
||||
|
||||
const WINDOW_PADDING = 16
|
||||
|
||||
interface PopupParams {
|
||||
x: number
|
||||
y: number
|
||||
width: number
|
||||
height: number
|
||||
}
|
||||
|
||||
let modalHTML: HTMLElement
|
||||
let componentInstance: any
|
||||
let docSize: boolean = false
|
||||
@ -55,6 +65,8 @@
|
||||
direction: 'bottom'
|
||||
}
|
||||
|
||||
$: document.body.style.cursor = drag ? 'all-scroll' : 'default'
|
||||
|
||||
function _update (result: any): void {
|
||||
if (onUpdate !== undefined) onUpdate(result)
|
||||
}
|
||||
@ -129,13 +141,80 @@
|
||||
}
|
||||
|
||||
let drag: boolean = false
|
||||
let notFit: number = 0
|
||||
|
||||
const dragParams: {
|
||||
x: number
|
||||
y: number
|
||||
} = {
|
||||
x: 0,
|
||||
y: 0
|
||||
const windowSize: { width: number, height: number } = { width: 0, height: 0 }
|
||||
const dragParams: { offsetX: number, offsetY: number } = { offsetX: 0, offsetY: 0 }
|
||||
let popupParams: PopupParams = { x: 0, y: 0, width: 0, height: 0 }
|
||||
|
||||
const updatedPopupParams = (pp: { x: number, y: number, width: number, height: number }): void => {
|
||||
if (pp.width === 0 || pp.height === 0 || element !== 'movable') return
|
||||
options.props.left = `${pp.x}px`
|
||||
options.props.top = `${pp.y}px`
|
||||
options.props.maxHeight = `${pp.height}px`
|
||||
}
|
||||
$: minHeight = element === 'movable' ? 10.375 * $deviceInfo.fontSize : 0
|
||||
$: updatedPopupParams(popupParams)
|
||||
|
||||
function mouseDown (e: MouseEvent & { currentTarget: EventTarget & HTMLDivElement }): void {
|
||||
if (element !== 'movable') return
|
||||
const rect = e.currentTarget.getBoundingClientRect()
|
||||
popupParams = { x: rect.left, y: rect.top, width: rect.width, height: rect.height }
|
||||
dragParams.offsetX = e.clientX - rect.left
|
||||
dragParams.offsetY = e.clientY - rect.top
|
||||
drag = true
|
||||
window.addEventListener('mousemove', mouseMove)
|
||||
window.addEventListener('mouseup', mouseUp)
|
||||
}
|
||||
|
||||
function mouseMove (e: MouseEvent): void {
|
||||
if (element !== 'movable' && !drag) return
|
||||
let newTop = e.clientY - dragParams.offsetY
|
||||
let newLeft = e.clientX - dragParams.offsetX
|
||||
if (newTop < WINDOW_PADDING) newTop = WINDOW_PADDING
|
||||
if (newTop + popupParams.height > $deviceInfo.docHeight - WINDOW_PADDING) {
|
||||
newTop = $deviceInfo.docHeight - popupParams.height - WINDOW_PADDING
|
||||
}
|
||||
if (newLeft < WINDOW_PADDING) newLeft = WINDOW_PADDING
|
||||
if (newLeft + popupParams.width > $deviceInfo.docWidth - WINDOW_PADDING) {
|
||||
newLeft = $deviceInfo.docWidth - popupParams.width - WINDOW_PADDING
|
||||
}
|
||||
popupParams = { ...popupParams, x: newLeft, y: newTop }
|
||||
options.props.right = ''
|
||||
}
|
||||
|
||||
function mouseUp (): void {
|
||||
drag = false
|
||||
window.removeEventListener('mousemove', mouseMove)
|
||||
window.removeEventListener('mouseup', mouseUp)
|
||||
}
|
||||
|
||||
function checkMovable (): void {
|
||||
if (drag) return
|
||||
const newParams: PopupParams = popupParams
|
||||
if (windowSize.width < $deviceInfo.docWidth) {
|
||||
// Increase Window Width
|
||||
if (windowSize.width - popupParams.width - popupParams.x <= WINDOW_PADDING) {
|
||||
newParams.x = $deviceInfo.docWidth - popupParams.width - WINDOW_PADDING
|
||||
}
|
||||
} else if (windowSize.width > $deviceInfo.docWidth) {
|
||||
// Decrease Window Width
|
||||
if (popupParams.x + popupParams.width >= windowSize.width - WINDOW_PADDING) {
|
||||
newParams.x = $deviceInfo.docWidth - popupParams.width - WINDOW_PADDING
|
||||
}
|
||||
}
|
||||
if (windowSize.height < $deviceInfo.docHeight) {
|
||||
// Increase Window Height
|
||||
if (windowSize.height - popupParams.height - popupParams.y <= WINDOW_PADDING) {
|
||||
newParams.y = $deviceInfo.docHeight - popupParams.height - WINDOW_PADDING
|
||||
}
|
||||
} else if (windowSize.height > $deviceInfo.docHeight) {
|
||||
// Decrease Window Height
|
||||
if (popupParams.y + popupParams.height >= windowSize.height - WINDOW_PADDING) {
|
||||
newParams.y = $deviceInfo.docHeight - popupParams.height - WINDOW_PADDING
|
||||
}
|
||||
}
|
||||
popupParams = newParams
|
||||
}
|
||||
|
||||
export function fitPopupInstance (): void {
|
||||
@ -146,17 +225,30 @@
|
||||
|
||||
$: if ($deviceInfo.docWidth <= 900 && !docSize) docSize = true
|
||||
$: if ($deviceInfo.docWidth > 900 && docSize) docSize = false
|
||||
|
||||
onMount(() => {
|
||||
windowSize.width = $deviceInfo.docWidth
|
||||
windowSize.height = $deviceInfo.docHeight
|
||||
})
|
||||
</script>
|
||||
|
||||
<svelte:window
|
||||
on:resize={() => {
|
||||
if (modalHTML) {
|
||||
fitPopup(modalHTML, element, contentPanel)
|
||||
if (modalHTML) fitPopup(modalHTML, element, contentPanel)
|
||||
if (element === 'movable') {
|
||||
if (popupParams.width === 0 && popupParams.height === 0) {
|
||||
const rect = modalHTML.getBoundingClientRect()
|
||||
popupParams = { x: rect.left, y: rect.top, width: rect.width, height: rect.height }
|
||||
}
|
||||
checkMovable()
|
||||
}
|
||||
windowSize.width = $deviceInfo.docWidth
|
||||
windowSize.height = $deviceInfo.docHeight
|
||||
}}
|
||||
on:keydown={handleKeydown}
|
||||
/>
|
||||
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div
|
||||
class="popup {testing ? 'endShow' : showing === undefined ? 'endShow' : !showing ? 'preShow' : 'startShow'}"
|
||||
class:testing
|
||||
@ -179,30 +271,7 @@
|
||||
clientHeight = element.clientHeight
|
||||
fitPopupInstance()
|
||||
}}
|
||||
on:mousedown={(e) => {
|
||||
if (element === 'movable') {
|
||||
const rect = e.currentTarget.getBoundingClientRect()
|
||||
dragParams.x = e.clientX - rect.left
|
||||
dragParams.y = e.clientY - rect.top
|
||||
drag = true
|
||||
}
|
||||
}}
|
||||
on:mouseup={() => {
|
||||
drag = false
|
||||
}}
|
||||
on:mousemove={(e) => {
|
||||
if (element === 'movable' && drag) {
|
||||
const newTop = e.clientY - dragParams.y
|
||||
const newLeft = e.clientX - dragParams.x
|
||||
if (newTop > 0) {
|
||||
options.props.top = `${newTop}px`
|
||||
}
|
||||
if (newLeft > 0) {
|
||||
options.props.left = `${newLeft}px`
|
||||
}
|
||||
options.props.right = ''
|
||||
}
|
||||
}}
|
||||
on:mousedown={mouseDown}
|
||||
>
|
||||
<svelte:component
|
||||
this={is}
|
||||
@ -219,8 +288,9 @@
|
||||
fullSize = !fullSize
|
||||
fitPopup(modalHTML, element, contentPanel)
|
||||
}}
|
||||
on:changeContent={() => {
|
||||
on:changeContent={(ev) => {
|
||||
fitPopup(modalHTML, element, contentPanel)
|
||||
if (ev.detail?.notFit !== undefined) notFit = ev.detail.notFit
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
@ -234,22 +304,6 @@
|
||||
style={`z-index: ${zIndex};`}
|
||||
on:click={handleOverlayClick}
|
||||
on:keydown|stopPropagation|preventDefault={() => {}}
|
||||
on:mouseup={() => {
|
||||
drag = false
|
||||
}}
|
||||
on:mousemove={(e) => {
|
||||
if (element === 'movable' && drag) {
|
||||
const newTop = e.clientY - dragParams.y
|
||||
const newLeft = e.clientX - dragParams.x
|
||||
if (newTop > 0) {
|
||||
options.props.top = `${newTop}px`
|
||||
}
|
||||
if (newLeft > 0) {
|
||||
options.props.left = `${newLeft}px`
|
||||
}
|
||||
options.props.right = ''
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user