Skip to content
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

fix(NcModal): Adjust modal header name and actions #5656

Merged
merged 2 commits into from
Jun 14, 2024
+105 −15
Merged

fix(NcModal): Adjust modal header name and actions #5656

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ee2a115
fix(NcModal): Adjust modal header name and actions
susnux May 31, 2024
818bba5
fix(NcModal): Set color theme for modal header to dark
susnux May 31, 2024
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
43 changes: 30 additions & 13 deletions src/components/NcModal/NcModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,9 @@ depending on whether you require the Modal to stay within the DOM or not. Do not
:outTransition="true"
:hasNext="true"
:hasPrevious="true">
<template #actions>
<NcActionCaption name="Some action" />
</template>
<div class="modal__content">Hello world</div>
</NcModal>
</div>
Expand Down Expand Up @@ -217,7 +220,7 @@ export default {
<div class="modal-header">
<h2 v-if="name.trim() !== ''"
:id="'modal-name-' + randId"
class="modal-name">
class="modal-header__name">
{{ name }}
</h2>
<div class="icons-menu">
Expand Down Expand Up @@ -256,7 +259,7 @@ export default {

<!-- Actions menu -->
<NcActions class="header-actions" :inline="inlineActions">
<!-- @slot List of actions to show -->
<!-- @slot Actions to show (one or more NcAction* components) -->
<slot name="actions" />
</NcActions>

Expand Down Expand Up @@ -840,22 +843,22 @@ export default {
overflow: hidden;
transition: opacity 250ms, visibility 250ms;

.modal-name {
&__name {
overflow-x: hidden;
box-sizing: border-box;
width: 100%;
padding: 0 #{$clickable-area * 3} 0 12px; // maximum actions is 3
transition: padding ease 100ms;
white-space: nowrap;
text-overflow: ellipsis;
color: #fff;
font-size: $icon-margin;
margin-bottom: 0;
color: #fff; // Always rendered on dark background
font-size: $icon-size;
margin-block: 0;
}

// On wider screens the name can be centered
@media only screen and (min-width: $breakpoint-mobile) {
.modal-name {
&__name {
padding-left: #{$clickable-area * 3}; // maximum actions is 3
text-align: center;
}
Expand Down Expand Up @@ -906,10 +909,6 @@ export default {
}
}

.header-actions {
color: white;
}

&:deep() .action-item {
margin: math.div($header-height - $clickable-area, 2);

Expand All @@ -923,9 +922,27 @@ export default {
}
}

:deep(button) {
// force white instead of default main text
// The modal ignores the color theme and adds a black backdrop
// so we need to add custom color of the actions toggle
.header-actions {
--open-background-color: #3e3e3e;
color: #fff;

:deep(button) {
// force white instead of default main text
color: #fff;

&:hover, &:active {
// Also fix the hover color
background-color: var(--open-background-color) !important;
}

// Fix the focus visible color
&:focus-visible {
box-shadow: none !important;
outline: 2px solid #fff !important;
}
}
susnux marked this conversation as resolved.
Show resolved Hide resolved
}

// Force the Actions menu icon to be the same size as other icons
Expand Down
Loading