Skip to content

feat: floating composer editor #13282

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
GretaD wants to merge 2 commits into
base: main
Choose a base branch
from
+243 −124
Draft

feat: floating composer editor #13282

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fd94282
feat: floating composer editor
GretaD Jul 10, 2026
a078a08
fixup! feat: floating composer editor
GretaD Jul 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
119 changes: 84 additions & 35 deletions src/components/Composer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,20 +39,15 @@
</div>
</div>
<div class="composer-fields">
<div class="composer-fields__label">
<label class="to-label" for="to">
{{ t('mail', 'To') }}
</label>
<ButtonVue size="small" type="tertiary-no-background" @click.prevent="toggleViewMode">
{{ t('mail', 'Cc/Bcc') }}
</ButtonVue>
</div>
<label class="to-label" for="to">
{{ t('mail', 'To') }}
</label>
<div class="composer-fields--custom">
<NcSelect
id="to"
ref="toLabel"
:model-value="selectTo"
class="select"
class="select to-select"
:options="selectableRecipients.filter(recipient => !selectTo.some(to => to.email === recipient.email))"
:get-option-key="(option) => option.email"
:taggable="true"
Expand All @@ -64,7 +59,7 @@
:loading="loadingIndicatorTo"
:reducible="true"
:clearable="true"
:no-wrap="false"
:no-wrap="true"
:append-to-body="false"
:create-option="createRecipientOption"
:clear-search-on-blur="() => clearOnBlur('to')"
Expand All @@ -79,12 +74,27 @@
class="vs__search"
v-bind="attributes"
v-on="events">
<ButtonVue
size="small"
type="tertiary-no-background"
class="copy-toggle"
@mousedown.stop
@click.prevent="toggleViewMode">
{{ t('mail', 'Cc/Bcc') }}
</ButtonVue>
</template>
<template #selected-option-container="{ option }">
<RecipientListItem
v-if="getRecipientIndex(selectTo, option) === 0"
:option="option"
class="vs__selected selected"
@remove-recipient="onRemoveRecipient(option, 'to')" />
<span
v-else-if="getRecipientIndex(selectTo, option) === 1"
:key="option.email"
class="vs__selected recipient-overflow">
+{{ selectTo.length - 1 }}
</span>
</template>
<template #option="option">
<div>
Expand Down Expand Up @@ -112,7 +122,7 @@
:class="{ opened: !autoLimit }"
:options="selectableRecipients.filter(recipient => !selectCc.some(cc => cc.email === recipient.email))"
:get-option-key="(option) => option.email"
:no-wrap="false"
:no-wrap="true"
:filter-by="(option, label, search) => filterOption(option, label, search, 'cc')"
:dropdown-should-open="shouldOpenRecipientDropdown"
:taggable="true"
Expand Down Expand Up @@ -140,9 +150,16 @@
</template>
<template #selected-option-container="{ option }">
<RecipientListItem
v-if="getRecipientIndex(selectCc, option) === 0"
:option="option"
class="vs__selected"
@remove-recipient="onRemoveRecipient(option, 'cc')" />
<span
v-else-if="getRecipientIndex(selectCc, option) === 1"
:key="option.email"
class="vs__selected recipient-overflow">
+{{ selectCc.length - 1 }}
</span>
</template>
<template #option="option">
<div>
Expand All @@ -168,7 +185,7 @@
:model-value="selectBcc"
class="select"
:class="{ opened: !autoLimit }"
:no-wrap="false"
:no-wrap="true"
:filter-by="(option, label, search) => filterOption(option, label, search, 'bcc')"
:options="selectableRecipients.filter(recipient => !selectBcc.some(bcc => bcc.email === recipient.email))"
:get-option-key="(option) => option.email"
Expand Down Expand Up @@ -199,9 +216,16 @@
</template>
<template #selected-option-container="{ option }">
<RecipientListItem
v-if="getRecipientIndex(selectBcc, option) === 0"
:option="option"
class="vs__selected"
@remove-recipient="onRemoveRecipient(option, 'bcc')" />
<span
v-else-if="getRecipientIndex(selectBcc, option) === 1"
:key="option.email"
class="vs__selected recipient-overflow">
+{{ selectBcc.length - 1 }}
</span>
</template>
<template #option="option">
<div>
Expand Down Expand Up @@ -1657,7 +1681,7 @@
},

removeRecipientBcc(option) {
this.selectBcc = this.removeRecipient(option, this.selectBcc)

Check failure on line 1684 in src/components/Composer.vue

View workflow job for this annotation

GitHub Actions / NPM lint 

Expected parentheses around arrow function argument
},

toggleViewMode() {
Expand All @@ -1666,6 +1690,10 @@
this.showBCC = !(this.showBCC && this.selectBcc.length === 0 && this.autoLimit)
},

getRecipientIndex(recipients, option) {
return recipients.findIndex(r => r.email === option.email)
},

setEditorModeHtml() {
this.editorMode = EDITOR_MODE_HTML
},
Expand Down Expand Up @@ -1774,23 +1802,15 @@
}

.composer-fields {
padding: var(--default-grid-baseline) calc(var(--default-grid-baseline) * 2) 0 calc(var(--default-grid-baseline) * 2);

&__label {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;

/** NcButton does not allow font weight styling */
:deep(.button-vue__text) {
font-weight: normal;
}
}
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 0 calc(var(--default-grid-baseline) * 2);
min-height: calc(var(--default-clickable-area) + calc(var(--default-grid-baseline) * 2));

&.mail-account {
border-top: none;
padding-top: calc(var(--default-grid-baseline) * 2);
padding-top: var(--default-grid-baseline);
}

input,
Expand All @@ -1802,10 +1822,12 @@
}

.composer-fields--custom {
flex: 1;
min-width: 0;
display: flex;
align-items: flex-start;
justify-content: space-between;
padding-top: calc(var(--default-grid-baseline) * 0.5);
padding: calc(var(--default-grid-baseline) * 1.5) 0;

button {
margin-top: 0;
Expand Down Expand Up @@ -1857,7 +1879,7 @@
// Make composer editor expand
.message-editor {
flex: 1 1 100%;
min-height: 0;
min-height: 200px;
border-top: 1px solid var(--color-border);
}

Expand All @@ -1870,26 +1892,53 @@

.from-label,
.to-label,
.copy-toggle,
.cc-label,
.bcc-label {
width: calc(var(--default-grid-baseline) * 12);
flex-shrink: 0;
padding-top: calc(var(--default-grid-baseline) * 1.5 + 1px);
color: var(--color-text-maxcontrast);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.bcc-label {
top: initial;
bottom: 0;
// Scope extra padding only to the To select so Cc/Bcc selects are unaffected
.to-select :deep(.vs__selected-options) {
padding-inline-end: calc(var(--default-grid-baseline) * 10);
}

.recipient-overflow {
display: inline-flex;
align-items: center;
align-self: center;
padding: 0 calc(var(--default-grid-baseline) * 2);
height: calc(var(--default-clickable-area-small, 28px));
border-radius: var(--border-radius-pill);
background-color: var(--color-background-dark);
white-space: nowrap;
font-size: var(--default-font-size);
flex-shrink: 0;
}

.copy-toggle {
// Absolute so it sits inside the To field visually without adding to its height
position: absolute;
inset-inline-end: 0;
top: 50%;
transform: translateY(-50%);
z-index: 1;
// Override the .composer-fields--custom button rule
opacity: 1;
cursor: pointer;
width: initial;

&:hover,
&:focus {
:deep(.button-vue__text) {
font-weight: normal;
color: var(--color-text-maxcontrast);
}

&:hover :deep(.button-vue__text),
&:focus :deep(.button-vue__text) {
color: var(--color-main-text);
}
}
Expand Down
Loading
Loading