Skip to content

[stable0.9] fix: Scope CSS styles #2022

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
enjeck merged 3 commits into from
Aug 21, 2025
Merged

[stable0.9] fix: Scope CSS styles #2022

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
442a9d7
fix: Scope smartpicker CSS styles
enjeck Aug 20, 2025
6f73854
fix: Scope scss styles
enjeck Aug 20, 2025
7be8073
fix: Cypress errors, remove unneeded classes
enjeck Aug 21, 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
46 changes: 23 additions & 23 deletions cypress/e2e/view-filtering-selection.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,57 +25,57 @@ describe('Filtering in a view by selection columns', () => {
cy.createSelectionCheckColumn('check', null, false)

// add row
cy.get('button').contains('Create row').click()
cy.get('[data-cy="createRowBtn"]').click()
cy.fillInValueTextLine('title', 'first row')
cy.fillInValueSelection('selection', 'sel1')
cy.fillInValueSelectionMulti('multi selection', ['A', 'B'])
cy.fillInValueSelectionCheck('check')
cy.get('button').contains('Save').click()
cy.get('[data-cy="createRowSaveButton"]').click()

// add row
cy.get('button').contains('Create row').click()
cy.get('[data-cy="createRowBtn"]').click()
cy.fillInValueTextLine('title', 'second row')
cy.fillInValueSelection('selection', 'sel2')
cy.fillInValueSelectionMulti('multi selection', ['B'])
cy.fillInValueSelectionCheck('check')
cy.get('button').contains('Save').click()
cy.get('[data-cy="createRowSaveButton"]').click()

// add row
cy.get('button').contains('Create row').click()
cy.get('[data-cy="createRowBtn"]').click()
cy.fillInValueTextLine('title', 'third row')
cy.fillInValueSelection('selection', 'sel3')
cy.fillInValueSelectionMulti('multi selection', ['C', 'B', 'D'])
cy.get('button').contains('Save').click()
cy.get('[data-cy="createRowSaveButton"]').click()

// add row
cy.get('button').contains('Create row').click()
cy.get('[data-cy="createRowBtn"]').click()
cy.fillInValueTextLine('title', 'fourth row')
cy.fillInValueSelectionMulti('multi selection', ['A'])
cy.fillInValueSelectionCheck('check')
cy.get('button').contains('Save').click()
cy.get('[data-cy="createRowSaveButton"]').click()

// add row
cy.get('button').contains('Create row').click()
cy.get('[data-cy="createRowBtn"]').click()
cy.fillInValueTextLine('title', 'fifths row')
cy.fillInValueSelection('selection', 'sel4')
cy.fillInValueSelectionMulti('multi selection', ['D'])
cy.fillInValueSelectionCheck('check')
cy.get('button').contains('Save').click()
cy.get('[data-cy="createRowSaveButton"]').click()

// add row
cy.get('button').contains('Create row').click()
cy.get('[data-cy="createRowBtn"]').click()
cy.fillInValueTextLine('title', 'sixths row')
cy.fillInValueSelection('selection', 'sel1')
cy.fillInValueSelectionMulti('multi selection', ['C', 'D'])
cy.fillInValueSelectionCheck('check')
cy.get('button').contains('Save').click()
cy.get('[data-cy="createRowSaveButton"]').click()

// add row
cy.get('button').contains('Create row').click()
cy.get('[data-cy="createRowBtn"]').click()
cy.fillInValueTextLine('title', 'sevenths row')
cy.fillInValueSelection('selection', 'sel2')
cy.fillInValueSelectionMulti('multi selection', ['A', 'C', 'B', 'D'])
cy.get('button').contains('Save').click()
cy.get('[data-cy="createRowSaveButton"]').click()
})

it('Filter view for single selection', () => {
Expand All @@ -89,7 +89,7 @@ describe('Filtering in a view by selection columns', () => {
cy.get('.modal-container #settings-section_title input').type(title)

// ## add filter
cy.get('button').contains('Add new filter group').click()
cy.get('[data-cy="filterFormFilterGroupBtn"]').click()
cy.get('.modal-container .filter-group .v-select.select').eq(0).click()
cy.get('ul.vs__dropdown-menu li span[title="selection"]').click()
cy.get('.modal-container .filter-group .v-select.select').eq(1).click()
Expand Down Expand Up @@ -156,7 +156,7 @@ describe('Filtering in a view by selection columns', () => {
cy.get('.modal-container #settings-section_title input').type(title)

// ## add filter
cy.get('button').contains('Add new filter group').click()
cy.get('[data-cy="filterFormFilterGroupBtn"]').click()
cy.get('.modal-container .filter-group .v-select.select').eq(0).click()
cy.get('ul.vs__dropdown-menu li span[title="multi selection"]').click()
cy.get('.modal-container .filter-group .v-select.select').eq(1).click()
Expand Down Expand Up @@ -197,7 +197,7 @@ describe('Filtering in a view by selection columns', () => {
cy.get('.modal-container #settings-section_title input').type(title)

// ## add filter
cy.get('button').contains('Add new filter group').click()
cy.get('[data-cy="filterFormFilterGroupBtn"]').click()
cy.get('.modal-container .filter-group .v-select.select').eq(0).click()
cy.get('ul.vs__dropdown-menu li span[title="multi selection"]').click()
cy.get('.modal-container .filter-group .v-select.select').eq(1).click()
Expand Down Expand Up @@ -238,15 +238,15 @@ describe('Filtering in a view by selection columns', () => {
cy.get('.modal-container #settings-section_title input').type(title)

// ## add filter
cy.get('button').contains('Add new filter group').click()
cy.get('[data-cy="filterFormFilterGroupBtn"]').click()
cy.get('.modal-container .filter-group .v-select.select').eq(0).click()
cy.get('ul.vs__dropdown-menu li span[title="multi selection"]').click()
cy.get('.modal-container .filter-group .v-select.select').eq(1).click()
cy.get('ul.vs__dropdown-menu li span[title="Contains"]').click()
cy.get('.modal-container .filter-group .v-select.select').eq(2).click()
cy.get('ul.vs__dropdown-menu li span[title="A"]').click()

cy.get('button').contains('Add new filter').click()
cy.get('[data-cy="filterGroupAddFilterBtn"]').click()
cy.get('.modal-container .filter-group .v-select.select').eq(3).click()
cy.get('ul.vs__dropdown-menu li span[title="multi selection"]').click()
cy.get('.modal-container .filter-group .v-select.select').eq(4).click()
Expand Down Expand Up @@ -287,23 +287,23 @@ describe('Filtering in a view by selection columns', () => {
cy.get('.modal-container #settings-section_title input').type(title)

// ## add filter
cy.get('button').contains('Add new filter group').click()
cy.get('[data-cy="filterFormFilterGroupBtn"]').click()
cy.get('.modal-container .filter-group .v-select.select').eq(0).click()
cy.get('ul.vs__dropdown-menu li span[title="multi selection"]').click()
cy.get('.modal-container .filter-group .v-select.select').eq(1).click()
cy.get('ul.vs__dropdown-menu li span[title="Contains"]').click()
cy.get('.modal-container .filter-group .v-select.select').eq(2).click()
cy.get('ul.vs__dropdown-menu li span[title="A"]').click()

cy.get('button').contains('Add new filter').click()
cy.get('[data-cy="filterGroupAddFilterBtn"]').click()
cy.get('.modal-container .filter-group .v-select.select').eq(3).click()
cy.get('ul.vs__dropdown-menu li span[title="multi selection"]').click()
cy.get('.modal-container .filter-group .v-select.select').eq(4).click()
cy.get('ul.vs__dropdown-menu li span[title="Contains"]').click()
cy.get('.modal-container .filter-group .v-select.select').eq(5).click()
cy.get('ul.vs__dropdown-menu li span[title="B"]').click()

cy.get('button').contains('Add new filter group').click()
cy.get('[data-cy="filterFormFilterGroupBtn"]').click()
cy.get('.modal-container .filter-group .v-select.select').eq(6).click()
cy.get('ul.vs__dropdown-menu li span[title="multi selection"]').click()
cy.get('.modal-container .filter-group .v-select.select').eq(7).click()
Expand Down Expand Up @@ -344,7 +344,7 @@ describe('Filtering in a view by selection columns', () => {
cy.get('.modal-container #settings-section_title input').type(title)

// ## add filter
cy.get('button').contains('Add new filter group').click()
cy.get('[data-cy="filterFormFilterGroupBtn"]').click()
cy.get('.modal-container .filter-group .v-select.select').eq(0).click()
cy.get('ul.vs__dropdown-menu li span[title="check"]').click()
cy.get('.modal-container .filter-group .v-select.select').eq(1).click()
Expand Down
2 changes: 1 addition & 1 deletion src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,7 @@ export default {
}

</style>
<style lang="scss">
<style lang="scss" scoped>

h1 {
font-size: 1.98em;
Expand Down
1 change: 1 addition & 0 deletions src/modules/main/partials/editViewPartials/filter/FilterGroup.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
:close-after-click="true"
type="tertiary"
:aria-label="t('tables', 'Add new filter')"
data-cy="filterGroupAddFilterBtn"
@click="addFilter">
{{ t('tables', 'Add new filter') }}
<template #icon>
Expand Down
2 changes: 1 addition & 1 deletion src/modules/navigation/partials/NavigationTableItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -307,7 +307,7 @@ export default {
},
}
</script>
<style lang="scss">
<style lang="scss" scoped>

.app-navigation-entry.active {
.icon-share {
Expand Down
2 changes: 1 addition & 1 deletion src/pages/Table.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export default {
},
}
</script>
<style lang="scss">
<style lang="scss" scoped>
.main-table-view {
width: max-content;
min-width: var(--app-content-width, 100%);
Expand Down
2 changes: 1 addition & 1 deletion src/pages/View.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export default {
},
}
</script>
<style lang="scss">
<style lang="scss" scoped>
.main-view-view {
width: max-content;
min-width: var(--app-content-width, 100%);
Expand Down
2 changes: 1 addition & 1 deletion src/shared/components/ncTable/NcTable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -278,7 +278,7 @@ export default {
}
</style>

<style lang="scss">
<style lang="scss" scoped>
.image_container.widget-file {
height: auto !important;
}
Expand Down
2 changes: 1 addition & 1 deletion src/shared/components/ncTable/partials/TiptapMenuBar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,7 +201,7 @@ export default {
}
</script>

<style lang="scss">
<style lang="scss" scoped>

.character-count {
display: flex;
Expand Down
104 changes: 52 additions & 52 deletions src/styles/smart-picker.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,75 +3,75 @@
* SPDX-License-Identifier: AGPL-3.0-or-later
*/

.picker-content {
.tables-smart-picker {
width: 100%;
min-height: 350px;
display: flex;
flex-direction: column;
overflow-y: auto;
padding: 0 16px 16px 16px;
}

.picker-content > h2 {
margin: 12px 0;
text-align: center;
}
> h2 {
margin: 12px 0;
text-align: center;
}

h3 {
margin: 0;
}
h3 {
margin: 0;
}

.space-B {
margin-bottom: calc(var(--default-grid-baseline) * 4);
}
.space-B {
margin-bottom: calc(var(--default-grid-baseline) * 4);
}

.space-T {
margin-top: calc(var(--default-grid-baseline) * 2);
}
.space-T {
margin-top: calc(var(--default-grid-baseline) * 2);
}

table {
width: 100%;
}
table {
width: 100%;

table th, table td {
border: none !important;
width: 50%;
padding-left: calc(var(--default-grid-baseline) * 2);
padding-right: calc(var(--default-grid-baseline) * 2);
}
th, td {
border: none !important;
width: 50%;
padding-left: calc(var(--default-grid-baseline) * 2);
padding-right: calc(var(--default-grid-baseline) * 2);
}
}

.radio {
display: flex;
}
.radio {
display: flex;

.radio > span {
padding-right: calc(var(--default-grid-baseline) * 6);
}
> span {
padding-right: calc(var(--default-grid-baseline) * 6);
}

.radio label .material-design-icon {
padding-right: calc(var(--default-grid-baseline) * 1);
}
label .material-design-icon {
padding-right: calc(var(--default-grid-baseline) * 1);
}
}

.select-button {
bottom: 0;
width: 100%;
display: flex;
align-items: end;
flex-direction: column;
position:sticky;
}
.select-button {
bottom: 0;
width: 100%;
display: flex;
align-items: end;
flex-direction: column;
position: sticky;
}

.selection-wrapper {
width: 100%;
}
.selection-wrapper {
width: 100%;

.selection-wrapper .selection {
margin-left: auto;
margin-right: auto;
width: 550px;
}
.selection {
margin-left: auto;
margin-right: auto;
width: 550px;
}
}

.preview {
border: 2px solid var(--color-border);
border-radius: var(--border-radius-large);
.preview {
border: 2px solid var(--color-border);
border-radius: var(--border-radius-large);
}
}
4 changes: 2 additions & 2 deletions src/views/SmartPicker.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
- SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
<div class="tables-smart-picker picker-content">
<h2 class="picker-title">
<div class="tables-smart-picker">
<h2>
{{ t('tables', 'Nextcloud Tables') }}
</h2>
<div class="selection-wrapper">
Expand Down