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(NcDialog): Make the heading always center aligned on top #965

Merged
merged 2 commits into from
Aug 28, 2023
Merged

fix(NcDialog): Make the heading always center aligned on top #965

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
f50145e
fix(NcDialog): Make the heading always center aligned on top
susnux Aug 28, 2023
7b94b6b
fix: Typo in style rule should be a class not element selector
susnux Aug 28, 2023
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
19 changes: 8 additions & 11 deletions lib/components/DialogBase.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,18 @@
<template>
<NcModal v-if="open" v-bind="modalProps" class="dialog__modal" @close="handleClose">
<NcModal v-if="open"
v-bind="modalProps"
class="dialog__modal"
@close="handleClose">
<!-- The dialog name / header -->
<h2 class="dialog__name" v-text="name" />
<div class="dialog">
<div ref="wrapper" :class="['dialog__wrapper', { 'dialog__wrapper--collapsed': isNavigationCollapsed }]">
<!-- If the navigation is shown on top of the content, the header should be above the navigation -->
<h2 v-if="isNavigationCollapsed" class="dialog__name">
{{ props.name }}
</h2>
<!-- When the navigation is collapsed (too small dialog) it is displayed above the main content, otherwise on the inline start -->
<nav v-if="hasNavigation" :class="['dialog__navigation', ...navigationClasses]">
<slot name="navigation" :is-collapsed="isNavigationCollapsed" />
</nav>
<!-- Main dialog content -->
<div :class="['dialog__content', ...contentClasses]">
<!-- If the navigation is shown on the side the header should be directly aligned with the content -->
<h2 v-if="!isNavigationCollapsed" class="dialog__name">
{{ props.name }}
</h2>
<slot>
<p>{{ props.message }}</p>
</slot>
Expand Down Expand Up @@ -147,6 +144,7 @@ const modalProps = computed(() => ({

<style lang="scss" scoped>
.dialog {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -179,7 +177,6 @@ const modalProps = computed(() => ({

// Navigation styling when side-by-side with content
&__wrapper:not(&__wrapper--collapsed) &__navigation {
margin-block-start: calc(var(--default-clickable-area) + 16px); // align with __name (4px top & 12px bottom margin)
flex-direction: column;

overflow: hidden auto;
Expand All @@ -200,7 +197,7 @@ const modalProps = computed(() => ({

&__name {
// Same as the NcAppSettingsDialog
text-align: start;
text-align: center;
height: var(--default-clickable-area);
min-height: var(--default-clickable-area);
line-height: var(--default-clickable-area);
Expand Down
2 changes: 1 addition & 1 deletion lib/components/FilePicker/FilePickerBreadcrumbs.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ const pathElements = computed(() => props.path.split('/')
</script>

<style scoped lang="scss">
file-picker {
.file-picker {
&__breadcrumbs {
// ensure the breadcrumbs have a static height
flex-grow: 0;
Expand Down