Skip to content

Nmc/5098 adjust filter design and functionality #431

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
memurats merged 8 commits into from
Dec 15, 2025
Merged

Nmc/5098 adjust filter design and functionality #431

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
b3c34d1
Update filter design with new styling and functionality
suet-kei-chan Dec 9, 2025
481aabd
Style active filter chips to match filter buttons
suet-kei-chan Dec 9, 2025
41ab718
Align active filter chips horizontally with separator
suet-kei-chan Dec 10, 2025
5f336b5
Refine filter layout and styling
suet-kei-chan Dec 10, 2025
105031c
Update popper styling with custom border and icon colors
suet-kei-chan Dec 12, 2025
f774618
Replace hardcoded filter colors with CSS custom properties
suet-kei-chan Dec 12, 2025
9ef964d
Remove active background override from dropdown menu items
suet-kei-chan Dec 12, 2025
e0c5cbb
Rename custom blue variables to ODS naming convention
suet-kei-chan Dec 12, 2025
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
138 changes: 133 additions & 5 deletions css/apps/files.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -424,18 +424,146 @@ table.files-filestable {
display: none;
}

.files-list__filters {
display: none;
}

&__thead-overlay {
top: 0;
}

.files-list__filters {
margin-bottom: 16px;
margin-top: 16px;

.file-list-filters {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}

// Add separator before active filters
.file-list-filters__active {
gap: 8px;
list-style: none;
padding: 0;
margin: 0;

&:not(:empty)::before {
content: '';
display: block;
width: 1px;
height: 28px;
background-color: var(--telekom-color-ui-border-standard);
margin: 0 4px;
}
}
}

.files-list__filters .file-list-filters__filter {
.file-list-filter-accounts {
display: none;
}

// Style for filter dropdown buttons (Type, Modified, etc.)
.action-item button.action-item__menutoggle {
background-color: var(--nmc-ods-blue-primary);
color: var(--telekom-color-text-and-icon-black-standard);
border-radius: 8px;
border: none;
height: 28px;
min-height: 28px;
padding: 0 10px;
font-weight: normal;
display: flex;
align-items: center;
box-sizing: border-box;
margin: 0;

&:hover {
background-color: var(--nmc-ods-blue-hover);
}

&:active {
background-color: var(--nmc-ods-blue-pressed);
}

&[aria-expanded="true"] {
background-color: var(--nmc-ods-blue-active);
}

// Hide the left icon
.button-vue__icon {
display: none;
}

.button-vue__text {
color: var(--telekom-color-text-and-icon-black-standard);
}

// Add down arrow icon after the wrapper
.button-vue__wrapper::after {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border-left: 1.5px solid var(--telekom-color-ui-black);
border-bottom: 1.5px solid var(--telekom-color-ui-black);
transform: rotate(-45deg);
margin-left: 8px;
margin-bottom: 2px;
transition: transform 0.2s ease;
}

// Rotate arrow when dropdown is open
&[aria-expanded="true"] .button-vue__wrapper::after {
transform: rotate(135deg);
margin-bottom: -2px;
}
}
}

// Style for active filter chips
.files-list__filters .nc-chip {
background-color: var(--nmc-ods-blue-active);
color: var(--telekom-color-text-and-icon-black-standard);
border-radius: 8px;
border: none;
height: 28px;
padding-left: 8px;

&:hover {
background-color: var(--nmc-ods-blue-hover);
}

&:active {
background-color: var(--nmc-ods-blue-pressed);
}

// Hide the leading icon
.nc-chip__icon {
display: none;
}

// Style the text
.nc-chip__text {
color: var(--telekom-color-text-and-icon-black-standard);
font-weight: var(--telekom-typography-font-weight-bold);
}

// Style the X button
button {
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
min-width: 16px;
width: auto;


svg {
color: var(--telekom-color-ui-black);
width: 16px;
height: 16px;
}
}
}

// File Grid View for v30
Expand Down Expand Up @@ -1021,4 +1149,4 @@ table.files-filestable {
}
}
}
}
}
29 changes: 26 additions & 3 deletions css/components/ncactions.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,12 @@
.v-popper__popper {

.v-popper__wrapper {
box-shadow: none;
border: 1px solid var(--telekom-color-ui-black);

.v-popper__arrow-container {
display: none;
}

.v-popper__inner {

Expand All @@ -37,6 +43,20 @@
&:hover {
cursor: pointer;
}

.action-button__icon {
display: none;

svg path {
fill: var(--telekom-color-ui-black);
}
}

.icon-vue {
svg path {
fill: var(--telekom-color-ui-black);
}
}
}

li.action-separator,
Expand All @@ -50,9 +70,6 @@
background-size: 24px;
}

&.active {
background-color: initial;
}

&[data-cy-upload-picker-menu-entry="upload-folder"] {
display: none;
Expand Down Expand Up @@ -294,6 +311,12 @@
&.v-popper__popper {

.v-popper__wrapper {
box-shadow: none;
border: 1px solid var(--telekom-color-ui-black);

.v-popper__arrow-container {
display: none;
}

.v-popper__inner {
background-color: var(--telekom-color-background-surface);
Expand Down
4 changes: 4 additions & 0 deletions css/nmcdefault.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,10 @@
--nmc-color-icon: invert(17%) sepia(87%) saturate(5418%) hue-rotate(319deg) brightness(85%) contrast(110%);
--nmc-color-icon-hovered: brightness(0) saturate(100%) invert(11%) sepia(93%) saturate(6579%) hue-rotate(321deg) brightness(71%) contrast(107%);
--nmc-color-sceme: light;
--nmc-ods-blue-primary: #D2E2FC;
--nmc-ods-blue-active: #9EC1F7;
--nmc-ods-blue-hover: #ECF3FE;
--nmc-ods-blue-pressed: #FFFFFF;
}

@media (prefers-color-scheme: dark) {
Expand Down
Loading