Skip to content

Commit

Permalink
Adaptive button in the Status Bar (#7497)
Browse files Browse the repository at this point in the history 
Signed-off-by: Alexander Platov <[email protected]>
  • Loading branch information
@SasLord
SasLord authored Dec 18, 2024
1 parent 5933f16 commit 35be71c
Show file tree
Hide file tree
Showing 7 changed files with 244 additions and 163 deletions.
42 changes: 42 additions & 0 deletions packages/theme/styles/button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,6 +171,48 @@
& > * { pointer-events: none; }
}

// StatusBar Button
.hulyStatusBarButton,
.hulyStatusBarButton .hulyStatusBarButton-icons {
display: flex;
align-items: center;
flex-wrap: nowrap;
min-width: 0;
min-height: 0;
}
.hulyStatusBarButton {
gap: var(--spacing-1);
padding: var(--spacing-0_25) var(--spacing-0_25) var(--spacing-0_25) var(--spacing-1);
height: 1.625rem;
font-weight: 500;
background-color: var(--theme-button-pressed);
border: 1px solid transparent;
border-radius: var(--extra-small-BorderRadius);
cursor: pointer;

&-label {
white-space: nowrap;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
min-width: 0;
font-weight: 700;
color: var(--theme-caption-color);
}
&-icons { gap: var(--spacing-0_25); }
&:hover {
background-color: var(--theme-button-hovered);
border-color: var(--theme-navpanel-divider);
}
&.active {
order: -1;
background-color: var(--highlight-select);
border-color: var(--highlight-select-border);

&:hover { background-color: var(--highlight-select-hover); }
}
}

// Old style Button
.antiButton {
display: flex;
Expand Down
61 changes: 61 additions & 0 deletions packages/theme/styles/components.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -317,6 +317,67 @@
}
}

/* CombineAvatars */
.hulyCombineAvatars-container {
display: flex;
align-items: center;

.hulyCombineAvatar {
&.inline:not(:first-child) { margin-left: calc(1px - (0.875rem / 2)); }
&.tiny:not(:first-child) { margin-left: calc(1px - (1.13rem / 2)); }
&.card:not(:first-child) { margin-left: calc(1px - (1.25rem / 2)); }
&.x-small:not(:first-child) { margin-left: calc(1px - (1.5rem / 2)); }
&.smaller:not(:first-child) { margin-left: calc(1px - (1.75rem / 2)); }
&.small:not(:first-child) { margin-left: calc(1px - 1rem); }
&.medium:not(:first-child) { margin-left: calc(1px - (2.25rem / 2)); }
&.large:not(:first-child) { margin-left: calc(1px - (4.5rem / 2)); }
&.x-large:not(:first-child) { margin-left: calc(1px - (7.5rem / 2)); }

&.inline,
&.tiny,
&.card,
&.x-small { font-size: 0.625rem; }

&.inline,
&.tiny,
&.card,
&.x-small,
&.smaller,
&.small {
&:not(:last-child) {
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16,24.5v-17c0-3.2,1.8-6.1,4.5-7.5H8C3.6,0,0,3.6,0,8v16c0,4.4,3.6,8,8,8h12.5C17.8,30.6,16,27.7,16,24.5z'/%3E%3C/svg%3E%0A") no-repeat;
}
}

&[data-over^='+']:last-child {
position: relative;

&::after {
content: attr(data-over);
position: absolute;
top: 50%;
left: 50%;
color: var(--theme-caption-color);
transform: translate(-53%, -52%);
z-index: 2;
}
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--theme-bg-color);
border: 1px solid var(--theme-divider-color);
border-radius: 0.25rem;
opacity: 0.9;
z-index: 1;
}
}
}
}

/* Header */
.hulyHeader-container {
display: flex;
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/components/ModernTab.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
style:max-width={orientation === 'horizontal' ? maxSize : 'auto'}
style:max-height={orientation === 'vertical' ? maxSize : 'auto'}
class:active={highlighted}
use:tooltip={{ label: label ? getEmbeddedLabel(label) : labelIntl }}
use:tooltip={{ label: label ? getEmbeddedLabel(label) : labelIntl, direction: 'bottom' }}
on:click
on:contextmenu={handleContextMenu}
>
Expand Down
83 changes: 3 additions & 80 deletions plugins/contact-resources/src/components/CombineAvatars.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,93 +49,16 @@
</script>

{#if items !== undefined}
<div class="avatars-container">
<div class="hulyCombineAvatars-container">
{#if includeEmpty}
<div class="combine-avatar {size}" data-over={getDataOver(persons.length === 0, items)}>
<div class="hulyCombineAvatar {size}" data-over={getDataOver(persons.length === 0, items)}>
<EmptyAvatar {size} />
</div>
{/if}
{#each persons as person, i}
<div class="combine-avatar {size}" data-over={getDataOver(persons.length === i + 1, items)}>
<div class="hulyCombineAvatar {size}" data-over={getDataOver(persons.length === i + 1, items)}>
<Avatar {person} {size} name={person.name} showStatus={false} />
</div>
{/each}
</div>
{/if}

<style lang="scss">
.avatars-container {
display: flex;
align-items: center;
.combine-avatar.inline:not(:first-child) {
margin-left: calc(1px - (0.875rem / 2));
}
.combine-avatar.tiny:not(:first-child) {
margin-left: calc(1px - (1.13rem / 2));
}
.combine-avatar.card:not(:first-child) {
margin-left: calc(1px - (1.25rem / 2));
}
.combine-avatar.x-small:not(:first-child) {
margin-left: calc(1px - (1.5rem / 2));
}
.combine-avatar.smaller:not(:first-child) {
margin-left: calc(1px - (1.75rem / 2));
}
.combine-avatar.small:not(:first-child) {
margin-left: calc(1px - 1rem);
}
.combine-avatar.inline,
.combine-avatar.tiny,
.combine-avatar.card,
.combine-avatar.x-small,
.combine-avatar.smaller,
.combine-avatar.small {
&:not(:last-child) {
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16,24.5v-17c0-3.2,1.8-6.1,4.5-7.5H8C3.6,0,0,3.6,0,8v16c0,4.4,3.6,8,8,8h12.5C17.8,30.6,16,27.7,16,24.5z'/%3E%3C/svg%3E%0A")
no-repeat;
}
}
.combine-avatar.medium:not(:first-child) {
margin-left: calc(1px - (2.25rem / 2));
}
.combine-avatar.large:not(:first-child) {
margin-left: calc(1px - (4.5rem / 2));
}
.combine-avatar.x-large:not(:first-child) {
margin-left: calc(1px - (7.5rem / 2));
}
.combine-avatar.inline,
.combine-avatar.tiny,
.combine-avatar.card,
.combine-avatar.x-small {
font-size: 0.625rem;
}
.combine-avatar[data-over^='+']:last-child {
position: relative;
&::after {
content: attr(data-over);
position: absolute;
top: 50%;
left: 50%;
color: var(--theme-caption-color);
transform: translate(-53%, -52%);
z-index: 2;
}
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--theme-bg-color);
border: 1px solid var(--theme-divider-color);
border-radius: 0.25rem;
opacity: 0.9;
z-index: 1;
}
}
}
</style>
101 changes: 19 additions & 82 deletions plugins/love-resources/src/components/ControlExt.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,7 @@
// limitations under the License.
-->
<script lang="ts">
import { formatName } from '@hcengineering/contact'
import { Avatar, personByIdStore } from '@hcengineering/contact-resources'
import { personByIdStore } from '@hcengineering/contact-resources'
import { IdMap, Ref, toIdMap } from '@hcengineering/core'
import {
Invite,
Expand All @@ -26,7 +25,6 @@
Room,
RoomType
} from '@hcengineering/love'
import { getEmbeddedLabel } from '@hcengineering/platform'
import { createQuery, getClient } from '@hcengineering/presentation'
import {
closePopup,
Expand All @@ -35,7 +33,7 @@
location,
PopupResult,
showPopup,
tooltip
closeTooltip
} from '@hcengineering/ui'
import { onDestroy } from 'svelte'
import workbench from '@hcengineering/workbench'
Expand All @@ -58,6 +56,7 @@
import RequestPopup from './RequestPopup.svelte'
import RequestingPopup from './RequestingPopup.svelte'
import RoomPopup from './RoomPopup.svelte'
import RoomButton from './RoomButton.svelte'
const client = getClient()
Expand Down Expand Up @@ -139,8 +138,11 @@
$: checkRequests(requests, $myInfo)
function openRoom (ev: MouseEvent, room: Room): void {
showPopup(RoomPopup, { room }, ev.currentTarget as HTMLElement)
function openRoom (room: Room): (e: MouseEvent) => void {
return (e: MouseEvent) => {
closeTooltip()
showPopup(RoomPopup, { room }, eventToHTMLElement(e))
}
}
let activeInvite: Invite | undefined = undefined
Expand Down Expand Up @@ -285,92 +287,27 @@
<div class="flex-row-center flex-gap-2">
{#if activeRooms.length > 0}
<!-- <div class="divider" />-->
{#each activeRooms as active}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
class="container flex-row-center"
class:active={joined.find((r) => r._id === active._id)}
on:click={(ev) => {
openRoom(ev, active)
}}
>
<div class="mr-2 overflow-label">{getRoomName(active, $personByIdStore)}</div>
<div class="flex-row-center avatars">
{#each active.participants as participant}
<div use:tooltip={{ label: getEmbeddedLabel(formatName(participant.name)) }}>
<Avatar name={participant.name} size={'card'} person={$personByIdStore.get(participant.person)} />
</div>
{/each}
</div>
</div>
{#each activeRooms as active, i}
<RoomButton
label={getRoomName(active, $personByIdStore)}
participants={active.participants}
active={joined.find((r) => r._id === active._id) != null}
on:click={openRoom(active)}
/>
{/each}
{/if}
{#if reception && receptionParticipants.length > 0}
{#if activeRooms.length > 0}
<div class="divider" />
{/if}
<div class="container flex-row-center flex-gap-2">
<div>{getRoomName(reception, $personByIdStore)}</div>
<div class="flex-row-center avatars">
{#each receptionParticipants as participant (participant._id)}
<div
use:tooltip={{ label: getEmbeddedLabel(formatName(participant.name)) }}
on:click={getParticipantClickHandler(participant)}
>
<Avatar name={participant.name} size={'card'} person={$personByIdStore.get(participant.person)} />
</div>
{/each}
</div>
</div>
<RoomButton
label={getRoomName(reception, $personByIdStore)}
participants={receptionParticipants.map((p) => ({ ...p, onclick: getParticipantClickHandler(p) }))}
/>
{/if}
</div>

<style lang="scss">
.container {
padding: 0.125rem 0.125rem 0.125rem 0.5rem;
height: 1.625rem;
font-weight: 500;
background-color: var(--theme-button-pressed);
border: 1px solid transparent;
border-radius: 0.25rem;
cursor: pointer;
.label {
font-weight: 700;
color: var(--theme-caption-color);
}
&.main {
order: -3;
padding-right: 0.25rem;
& + .divider {
order: -2;
}
}
&:hover {
background-color: var(--theme-button-hovered);
border-color: var(--theme-navpanel-divider);
}
&.active {
order: -1;
position: relative;
display: flex;
align-items: center;
padding: 0.125rem 0.125rem 0.125rem 0.5rem;
background-color: var(--highlight-select);
border-color: var(--highlight-select-border);
&:hover {
background-color: var(--highlight-select-hover);
}
}
}
.avatars {
gap: 0.125rem;
}
.divider {
height: 1.5rem;
border: 1px solid var(--theme-divider-color);
Expand Down
Loading

0 comments on commit 35be71c

Please sign in to comment.