Skip to content

Commit

Permalink
fix(NcListItem): Make paddings smaller again on Nextcloud 30
Browse files Browse the repository at this point in the history
Add a `legacy` class so that we can keep stylings for Nextcloud 29 and older
but still can style the component properly on Nextcloud 30 (smaller border radius = we can use smaller paddings)

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
  • Loading branch information
susnux committed Jul 29, 2024
1 parent 0e216da commit bf4e529
Showing 1 changed file with 41 additions and 13 deletions.
54 changes: 41 additions & 13 deletions src/components/NcListItem/NcListItem.vue
Original file line number Diff line number Diff line change
Expand Up @@ -356,6 +356,7 @@
class="list-item"
:class="{
'list-item--compact': compact,
'list-item--legacy': isLegacy,
'list-item--one-line': oneLine,
}"
@mouseover="handleMouseover"
Expand Down Expand Up @@ -585,6 +586,15 @@ export default {
'update:menuOpen',
],

setup() {
const [major] = window._oc_config?.version.split('.', 2) ?? []
const isLegacy = major && Number.parseInt(major) < 30

return {
isLegacy,
}
},

data() {
return {
hovered: false,
Expand Down Expand Up @@ -780,7 +790,7 @@ export default {

// NcListItem
.list-item {
--list-item-padding: 8px;
--list-item-padding: var(--default-grid-baseline);
// The content are two lines of text and respect the 1.5 line height
--list-item-height: calc(2 * var(--default-line-height));
--list-item-border-radius: var(--border-radius-element, 32px);
Expand All @@ -790,9 +800,7 @@ export default {
position: relative;
flex: 0 0 auto;
justify-content: flex-start;
// we need to make sure the elements are not cut off by the border
padding-inline: calc((var(--list-item-height) - var(--list-item-border-radius)) / 2);
padding-block: var(--list-item-padding);
padding: var(--list-item-padding);
width: 100%;
border-radius: var(--border-radius-element, 32px);
cursor: pointer;
Expand All @@ -812,18 +820,29 @@ export default {
}

&--compact {
--list-item-padding: 2px;
--list-item-padding: calc(0.5 * var(--default-grid-baseline)) var(--default-grid-baseline);

&:not(:has(.list-item-content__subname)) {
--list-item-height: var(--default-clickable-area);
}
}
.list-item-content__details {
display: flex;
flex-direction: column;
justify-content: end;
align-items: end;

&--legacy {
--list-item-padding: calc(2 * var(--default-grid-baseline));

&.list-item--compact {
--list-item-padding: var(--default-grid-baseline) calc(2 * var(--default-grid-baseline));
}
}

&--one-line {
--list-item-height: var(--default-clickable-area);
--list-item-border-radius: var(--border-radius-element, calc(var(--default-clickable-area) / 2));
--list-item-padding: 2px;
--list-item-padding: var(--default-grid-baseline);

&#{&}--legacy {
--list-item-padding: 2px calc((var(--list-item-height) - var(--list-item-border-radius)) / 2);
}

.list-item-content__main {
display: flex;
Expand Down Expand Up @@ -859,8 +878,9 @@ export default {
display: flex;
flex: 1 0;
justify-content: space-between;
padding-left: 8px;
padding-left: calc(2 * var(--default-grid-baseline));
min-width: 0;

&__main {
flex: 1 0;
width: 0;
Expand All @@ -871,6 +891,13 @@ export default {
}
}

&__details {
display: flex;
flex-direction: column;
justify-content: end;
align-items: end;
}

&__actions {
flex: 0 0 auto;
align-self: center;
Expand All @@ -894,8 +921,9 @@ export default {
margin: 0 5px;
}
}

&__extra {
margin-top: 4px;
margin-top: var(--default-grid-baseline);
}
}

Expand Down

0 comments on commit bf4e529

Please sign in to comment.