Skip to content

refactor: migrate grid to tailwind #1148

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

Merged
JammingBen merged 1 commit into from
Sep 5, 2025
Merged

refactor: migrate grid to tailwind #1148

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
9 changes: 0 additions & 9 deletions packages/web-app-files/src/components/FilesViewWrapper.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,16 +29,7 @@ export default defineComponent({
</script>

<style lang="scss" scoped>
.files-view-wrapper {
grid-template-rows: max-content max-content 1fr;
grid-template-areas:
'header'
'upload'
'main';
}

#files-view {
grid-area: main;
Comment on lines -32 to -41
Copy link
Contributor Author

@JammingBen JammingBen Sep 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't see how/why we would need this..?

Copy link
Contributor

@kulmann kulmann Sep 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe just "not anymore"... I remember that Pascal introduced css grid into our code base, and that must be years ago.

z-index: 0;
}
</style>
6 changes: 0 additions & 6 deletions packages/web-app-files/src/components/SideBar/Audio/AudioMetaPanel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,9 +97,3 @@ export default defineComponent({
}
})
</script>

<style lang="scss">
.audio-data-list {
grid-template-columns: auto minmax(0, 1fr);
}
</style>
3 changes: 1 addition & 2 deletions packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -290,8 +290,7 @@ export default defineComponent({

@layer utilities {
.share-access-details-drop dl {
@apply grid gap-x-4 gap-y-1;
grid-template-columns: max-content auto;
@apply grid gap-x-4 gap-y-1 grid-cols-[max-content_auto];
}

.share-access-details-drop dt {
Expand Down
13 changes: 3 additions & 10 deletions packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,10 +57,10 @@
<oc-contextual-helper v-if="helpersEnabled" class="pl-1" v-bind="indirectLinkHelp" />
</h4>
<div
class="files-links-indirect-list grid [grid-template-rows:0fr] transition-all duration-250 ease-out"
class="files-links-indirect-list grid transition-all duration-250 ease-out"
:class="{
'files-links-indirect-list-open': !indirectLinkListCollapsed,
'mt-4': !indirectLinkListCollapsed
'[grid-template-rows:1fr] mt-4': !indirectLinkListCollapsed,
'[grid-template-rows:0fr]': indirectLinkListCollapsed
}"
>
<ul class="oc-list oc-list-divider overflow-hidden" :aria-label="$gettext('Public links')">
Expand Down Expand Up @@ -329,10 +329,3 @@ export default defineComponent({
}
})
</script>
<style lang="scss">
.files-links-indirect-list {
&-open {
grid-template-rows: 1fr;
}
}
</style>
27 changes: 4 additions & 23 deletions packages/web-pkg/src/components/AppTopBar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<template>
<portal to="app.runtime.header.left">
<div class="oc-app-top-bar self-center flex">
<div class="oc-app-top-bar self-center flex col-[1/4] row-2 sm:col-2 sm:row-1">
<div
class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 inline-flex self-center items-center justify-between basis-auto sm:basis-xs md:basis-sm bg-role-chrome border border-role-on-chrome rounded-lg w-full h-10 gap-6"
class="pl-4 pr-1 my-2 mx-auto sm:m-0 inline-flex items-center justify-between bg-role-chrome border border-role-on-chrome rounded-lg h-10 gap-4 w-full sm:w-fit"
>
<div class="open-file-bar flex">
<resource-list-item
v-if="resource"
id="app-top-bar-resource"
class="max-w-2xs md:max-w-sm"
class="[&_.oc-resource-name]:max-w-60 xs:[&_.oc-resource-name]:max-w-full sm:[&_.oc-resource-name]:max-w-20 md:[&_.oc-resource-name]:max-w-60"
:is-thumbnail-displayed="false"
:is-extension-displayed="areFileExtensionsShown"
:path-prefix="getPathPrefix(resource)"
Expand Down Expand Up @@ -189,7 +189,7 @@ export default defineComponent({
@reference '@opencloud-eu/design-system/tailwind';

@layer utilities {
.oc-app-top-bar-inner .oc-resource-indicators .text,
.oc-app-top-bar .oc-resource-indicators .text,
.app-topbar-action,
.app-topbar-action:hover:not(:disabled),
#app-top-bar-resource .oc-resource-name span {
Expand All @@ -204,22 +204,3 @@ export default defineComponent({
fill: var(--oc-role-on-chrome) !important;
}
</style>
<style lang="scss">
.oc-app-top-bar {
grid-column: 1 / 4;
grid-row: secondRow;

@media (min-width: $oc-breakpoint-small-default) {
grid-column: 2;
grid-row: 1;
}
}

.open-file-bar {
#app-top-bar-resource {
@media (min-width: $oc-breakpoint-small-default) {
widows: initial;
}
}
}
</style>
8 changes: 3 additions & 5 deletions packages/web-pkg/src/components/FilesList/ResourceTiles.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -649,13 +649,11 @@ onBeforeUnmount(() => {
@reference '@opencloud-eu/design-system/tailwind';

@layer components {
.oc-tiles {
grid-template-columns: repeat(auto-fit, minmax(var(--oc-size-tiles-actual), 1fr));
}
.oc-tiles-sort-filter-chip .oc-filter-chip-label {
@apply text-sm;
}
}
</style>
<style lang="scss">
.oc-tiles {
grid-template-columns: repeat(auto-fit, minmax(var(--oc-size-tiles-actual), 1fr));
}
</style>
2 changes: 1 addition & 1 deletion packages/web-pkg/src/components/SearchBarFilter.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
:is-toggle-active="false"
:filter-label="$gettext('Location filter')"
:selected-item-names="[currentSelectionTitle]"
class="oc-search-bar-filter"
class="oc-search-bar-filter [&_button]:items-center"
:has-active-state="false"
raw
close-on-click
Expand Down
7 changes: 0 additions & 7 deletions packages/web-pkg/src/components/SideBar/Spaces/SpaceInfo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,3 @@ export default defineComponent({
}
})
</script>

<style lang="scss">
.space_info {
grid-template-columns: auto 1fr auto;
grid-gap: 5px;
}
</style>
36 changes: 18 additions & 18 deletions packages/web-pkg/tests/unit/components/__snapshots__/AppTopBar.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@

exports[`AppTopBar > if a resource is present > renders a resource and dropdownActions (if given) and a close button 1`] = `
"<portal to="app.runtime.header.left" dropdownactions="undefined">
<div class="oc-app-top-bar self-center flex">
<div class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 inline-flex self-center items-center justify-between basis-auto sm:basis-xs md:basis-sm bg-role-chrome border border-role-on-chrome rounded-lg w-full h-10 gap-6">
<div class="oc-app-top-bar self-center flex col-[1/4] row-2 sm:col-2 sm:row-1">
<div class="pl-4 pr-1 my-2 mx-auto sm:m-0 inline-flex items-center justify-between bg-role-chrome border border-role-on-chrome rounded-lg h-10 gap-4 w-full sm:w-fit">
<div class="open-file-bar flex">
<resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource" class="max-w-2xs md:max-w-sm"></resource-list-item-stub>
<resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource" class="[&amp;_.oc-resource-name]:max-w-60 xs:[&amp;_.oc-resource-name]:max-w-full sm:[&amp;_.oc-resource-name]:max-w-20 md:[&amp;_.oc-resource-name]:max-w-60"></resource-list-item-stub>
</div>
<div class="flex main-actions">
<!--v-if-->
Expand All @@ -20,10 +20,10 @@ exports[`AppTopBar > if a resource is present > renders a resource and dropdownA

exports[`AppTopBar > if a resource is present > renders a resource and dropdownActions as well as mainActions (if both are passed) and a close button 1`] = `
"<portal to="app.runtime.header.left" dropdownactions="undefined">
<div class="oc-app-top-bar self-center flex">
<div class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 inline-flex self-center items-center justify-between basis-auto sm:basis-xs md:basis-sm bg-role-chrome border border-role-on-chrome rounded-lg w-full h-10 gap-6">
<div class="oc-app-top-bar self-center flex col-[1/4] row-2 sm:col-2 sm:row-1">
<div class="pl-4 pr-1 my-2 mx-auto sm:m-0 inline-flex items-center justify-between bg-role-chrome border border-role-on-chrome rounded-lg h-10 gap-4 w-full sm:w-fit">
<div class="open-file-bar flex">
<resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource" class="max-w-2xs md:max-w-sm"></resource-list-item-stub>
<resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource" class="[&amp;_.oc-resource-name]:max-w-60 xs:[&amp;_.oc-resource-name]:max-w-full sm:[&amp;_.oc-resource-name]:max-w-20 md:[&amp;_.oc-resource-name]:max-w-60"></resource-list-item-stub>
</div>
<div class="flex main-actions">
<!--v-if-->
Expand All @@ -38,10 +38,10 @@ exports[`AppTopBar > if a resource is present > renders a resource and dropdownA

exports[`AppTopBar > if a resource is present > renders a resource and mainActions (if given) and a close button 1`] = `
"<portal to="app.runtime.header.left" dropdownactions="">
<div class="oc-app-top-bar self-center flex">
<div class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 inline-flex self-center items-center justify-between basis-auto sm:basis-xs md:basis-sm bg-role-chrome border border-role-on-chrome rounded-lg w-full h-10 gap-6">
<div class="oc-app-top-bar self-center flex col-[1/4] row-2 sm:col-2 sm:row-1">
<div class="pl-4 pr-1 my-2 mx-auto sm:m-0 inline-flex items-center justify-between bg-role-chrome border border-role-on-chrome rounded-lg h-10 gap-4 w-full sm:w-fit">
<div class="open-file-bar flex">
<resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource" class="max-w-2xs md:max-w-sm"></resource-list-item-stub>
<resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource" class="[&amp;_.oc-resource-name]:max-w-60 xs:[&amp;_.oc-resource-name]:max-w-full sm:[&amp;_.oc-resource-name]:max-w-20 md:[&amp;_.oc-resource-name]:max-w-60"></resource-list-item-stub>
</div>
<div class="flex main-actions">
<!--v-if-->
Expand All @@ -56,10 +56,10 @@ exports[`AppTopBar > if a resource is present > renders a resource and mainActio

exports[`AppTopBar > if a resource is present > renders a resource and no actions (if none given) and a close button 1`] = `
"<portal to="app.runtime.header.left" dropdownactions="">
<div class="oc-app-top-bar self-center flex">
<div class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 inline-flex self-center items-center justify-between basis-auto sm:basis-xs md:basis-sm bg-role-chrome border border-role-on-chrome rounded-lg w-full h-10 gap-6">
<div class="oc-app-top-bar self-center flex col-[1/4] row-2 sm:col-2 sm:row-1">
<div class="pl-4 pr-1 my-2 mx-auto sm:m-0 inline-flex items-center justify-between bg-role-chrome border border-role-on-chrome rounded-lg h-10 gap-4 w-full sm:w-fit">
<div class="open-file-bar flex">
<resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource" class="max-w-2xs md:max-w-sm"></resource-list-item-stub>
<resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource" class="[&amp;_.oc-resource-name]:max-w-60 xs:[&amp;_.oc-resource-name]:max-w-full sm:[&amp;_.oc-resource-name]:max-w-20 md:[&amp;_.oc-resource-name]:max-w-60"></resource-list-item-stub>
</div>
<div class="flex main-actions">
<!--v-if-->
Expand All @@ -74,10 +74,10 @@ exports[`AppTopBar > if a resource is present > renders a resource and no action

exports[`AppTopBar > if a resource is present > renders a resource without file extension if areFileExtensionsShown is set to false 1`] = `
"<portal to="app.runtime.header.left" dropdownactions="undefined">
<div class="oc-app-top-bar self-center flex">
<div class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 inline-flex self-center items-center justify-between basis-auto sm:basis-xs md:basis-sm bg-role-chrome border border-role-on-chrome rounded-lg w-full h-10 gap-6">
<div class="oc-app-top-bar self-center flex col-[1/4] row-2 sm:col-2 sm:row-1">
<div class="pl-4 pr-1 my-2 mx-auto sm:m-0 inline-flex items-center justify-between bg-role-chrome border border-role-on-chrome rounded-lg h-10 gap-4 w-full sm:w-fit">
<div class="open-file-bar flex">
<resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="false" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource" class="max-w-2xs md:max-w-sm"></resource-list-item-stub>
<resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="false" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource" class="[&amp;_.oc-resource-name]:max-w-60 xs:[&amp;_.oc-resource-name]:max-w-full sm:[&amp;_.oc-resource-name]:max-w-20 md:[&amp;_.oc-resource-name]:max-w-60"></resource-list-item-stub>
</div>
<div class="flex main-actions">
<!--v-if-->
Expand All @@ -92,10 +92,10 @@ exports[`AppTopBar > if a resource is present > renders a resource without file

exports[`AppTopBar > if no resource is present > renders only a close button 1`] = `
"<portal to="app.runtime.header.left" dropdownactions="">
<div class="oc-app-top-bar self-center flex">
<div class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 inline-flex self-center items-center justify-between basis-auto sm:basis-xs md:basis-sm bg-role-chrome border border-role-on-chrome rounded-lg w-full h-10 gap-6">
<div class="oc-app-top-bar self-center flex col-[1/4] row-2 sm:col-2 sm:row-1">
<div class="pl-4 pr-1 my-2 mx-auto sm:m-0 inline-flex items-center justify-between bg-role-chrome border border-role-on-chrome rounded-lg h-10 gap-4 w-full sm:w-fit">
<div class="open-file-bar flex">
<resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource" class="max-w-2xs md:max-w-sm"></resource-list-item-stub>
<resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource" class="[&amp;_.oc-resource-name]:max-w-60 xs:[&amp;_.oc-resource-name]:max-w-full sm:[&amp;_.oc-resource-name]:max-w-20 md:[&amp;_.oc-resource-name]:max-w-60"></resource-list-item-stub>
</div>
<div class="flex main-actions">
<!--v-if-->
Expand Down
41 changes: 8 additions & 33 deletions packages/web-runtime/src/components/Topbar/TopBar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
<template>
<header
id="oc-topbar"
:class="{ 'open-app': contentOnLeftPortal }"
class="sticky grid items-center justify-center px-4 h-auto sm:h-13 sm:gap-2.5"
:class="[
{ 'grid-cols-[auto_1fr_1fr]': contentOnLeftPortal },
{ 'grid-cols-[auto_9fr_1fr]': !contentOnLeftPortal }
]"
class="sticky grid items-center px-4 h-auto sm:h-13 sm:gap-10 grid-rows-[52px_auto]"
:aria-label="$gettext('Top bar')"
>
<div class="oc-topbar-left flex items-center flex-start gap-2.5 sm:gap-5">
<div class="flex items-center flex-start gap-2.5 sm:gap-5 col-1">
<applications-menu
v-if="appMenuExtensions.length && !isEmbedModeEnabled"
:menu-items="appMenuExtensions"
Expand All @@ -18,10 +21,10 @@
/>
</router-link>
</div>
<div v-if="!contentOnLeftPortal" class="oc-topbar-center flex justify-end sm:justify-center">
<div v-if="!contentOnLeftPortal" class="flex justify-end sm:justify-center col-2">
<custom-component-target :extension-point="topBarCenterExtensionPoint" />
</div>
<div class="oc-topbar-right flex items-center justify-end gap-5">
<div class="flex items-center justify-end gap-5 col-3">
<portal-target name="app.runtime.header.right" multiple />
</div>
<template v-if="!isEmbedModeEnabled">
Expand Down Expand Up @@ -211,42 +214,14 @@ export default {

<style lang="scss">
#oc-topbar {
grid-template-areas: 'logo center right' 'secondRow secondRow secondRow';
grid-template-columns: 30% 30% 40%;
grid-template-rows: 52px auto;
z-index: 5;

@media (min-width: $oc-breakpoint-small-default) {
grid-template-columns: v-bind(logoWidth) 9fr 1fr;
grid-template-rows: 1;
}

&.open-app {
grid-template-columns: 30% 30% 40%;

@media (min-width: $oc-breakpoint-small-default) {
grid-template-columns: v-bind(logoWidth) 1fr 1fr;
}
}

.oc-logo-image {
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;
image-rendering: -webkit-optimize-contrast;
user-select: none;
}

.oc-topbar-left {
grid-area: logo;
}

.oc-topbar-center {
grid-area: center;
}

.oc-topbar-right {
grid-area: right;
}
}
</style>