Merge pull request #2839 from Budibase/mobile-app-search-compat

Add mobile compatibility for app search bar
This commit is contained in:
Andrew Kingston 2021-10-01 14:11:30 +01:00 committed by GitHub
commit c94cc87fa4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 47 additions and 32 deletions

View File

@ -24,9 +24,7 @@ context("Create a Table", () => {
it("updates a column on the table", () => { it("updates a column on the table", () => {
cy.get(".title").click() cy.get(".title").click()
cy.get(".spectrum-Table-editIcon > use").click() cy.get(".spectrum-Table-editIcon > use").click()
cy.get("input") cy.get("input").eq(1).type("updated", { force: true })
.eq(1)
.type("updated", { force: true })
// Unset table display column // Unset table display column
cy.get(".spectrum-Switch-input").eq(1).click() cy.get(".spectrum-Switch-input").eq(1).click()
cy.contains("Save Column").click() cy.contains("Save Column").click()
@ -45,9 +43,7 @@ context("Create a Table", () => {
it("deletes a row", () => { it("deletes a row", () => {
cy.get(".spectrum-Checkbox-input").check({ force: true }) cy.get(".spectrum-Checkbox-input").check({ force: true })
cy.contains("Delete 1 row(s)").click() cy.contains("Delete 1 row(s)").click()
cy.get(".spectrum-Modal") cy.get(".spectrum-Modal").contains("Delete").click()
.contains("Delete")
.click()
cy.contains("RoverUpdated").should("not.exist") cy.contains("RoverUpdated").should("not.exist")
}) })
@ -56,15 +52,18 @@ context("Create a Table", () => {
cy.get(".spectrum-Table-editIcon > use").click() cy.get(".spectrum-Table-editIcon > use").click()
cy.contains("Delete").click() cy.contains("Delete").click()
cy.wait(50) cy.wait(50)
cy.contains("Delete Column") cy.contains("Delete Column").click()
.click()
cy.contains("nameupdated").should("not.exist") cy.contains("nameupdated").should("not.exist")
}) })
it("deletes a table", () => { it("deletes a table", () => {
cy.get(".actions > :nth-child(1) > .icon > .spectrum-Icon > use") cy.get(".nav-item")
.eq(1) .contains("dog")
.click({ force: true }) .parents(".nav-item")
.first()
.within(() => {
cy.get(".actions .spectrum-Icon").click({ force: true })
})
cy.get(".spectrum-Menu > :nth-child(2)").click() cy.get(".spectrum-Menu > :nth-child(2)").click()
cy.contains("Delete Table").click() cy.contains("Delete Table").click()
cy.contains("dog").should("not.exist") cy.contains("dog").should("not.exist")

View File

@ -28,11 +28,7 @@ context("Create a View", () => {
const headers = Array.from($headers).map(header => const headers = Array.from($headers).map(header =>
header.textContent.trim() header.textContent.trim()
) )
expect(removeSpacing(headers)).to.deep.eq([ expect(removeSpacing(headers)).to.deep.eq(["group", "age", "rating"])
"group",
"age",
"rating",
])
}) })
}) })
@ -57,11 +53,12 @@ context("Create a View", () => {
}) })
it("creates a stats calculation view based on age", () => { it("creates a stats calculation view based on age", () => {
cy.wait(1000)
cy.contains("Calculate").click() cy.contains("Calculate").click()
cy.get(".modal-inner-wrapper").within(() => { cy.get(".modal-inner-wrapper").within(() => {
cy.get(".spectrum-Picker-label").eq(0).click() cy.get(".spectrum-Picker-label").eq(0).click()
cy.contains("Statistics").click() cy.contains("Statistics").click()
cy.get(".spectrum-Picker-label").eq(1).click() cy.get(".spectrum-Picker-label").eq(1).click()
cy.contains("age").click({ force: true }) cy.contains("age").click({ force: true })
@ -104,20 +101,20 @@ context("Create a View", () => {
cy.get(".spectrum-Table-cell").then($values => { cy.get(".spectrum-Table-cell").then($values => {
let values = Array.from($values).map(header => header.textContent.trim()) let values = Array.from($values).map(header => header.textContent.trim())
expect(values).to.deep.eq([ expect(values).to.deep.eq([
"Students", "Students",
"70", "70",
"20", "20",
"25", "25",
"3", "3",
"1650", "1650",
"23.333333333333332", "23.333333333333332",
"Teachers", "Teachers",
"85", "85",
"36", "36",
"49", "49",
"2", "2",
"3697", "3697",
"42.5", "42.5",
]) ])
}) })
}) })

View File

@ -216,6 +216,7 @@
<div class="filter"> <div class="filter">
<div class="select"> <div class="select">
<Select <Select
autoWidth
bind:value={sortBy} bind:value={sortBy}
placeholder={null} placeholder={null}
options={[ options={[
@ -224,7 +225,9 @@
{ label: "Sort by status", value: "status" }, { label: "Sort by status", value: "status" },
]} ]}
/> />
<Search placeholder="Search" bind:value={searchTerm} /> <div class="desktop-search">
<Search placeholder="Search" bind:value={searchTerm} />
</div>
</div> </div>
<ActionGroup> <ActionGroup>
<ActionButton <ActionButton
@ -241,6 +244,9 @@
/> />
</ActionGroup> </ActionGroup>
</div> </div>
<div class="mobile-search">
<Search placeholder="Search" bind:value={searchTerm} />
</div>
<div <div
class:appGrid={layout === "grid"} class:appGrid={layout === "grid"}
class:appTable={layout === "table"} class:appTable={layout === "table"}
@ -318,6 +324,7 @@
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
gap: 10px;
} }
.select { .select {
@ -325,6 +332,12 @@
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
grid-gap: 10px; grid-gap: 10px;
} }
.filter :global(.spectrum-ActionGroup) {
flex-wrap: nowrap;
}
.mobile-search {
display: none;
}
.appGrid { .appGrid {
display: grid; display: grid;
@ -364,5 +377,11 @@
.appTable { .appTable {
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
} }
.desktop-search {
display: none;
}
.mobile-search {
display: block;
}
} }
</style> </style>