Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: background colors and FormPage
There are 3 pages that have lighter content backgrounds: RunImage, DeployPodToKube, and Help. After fixing the header and scrollbars globally, these screens look odd because the lighter background doesn't cover the entire content area when the screen is large. I thought these screens were incorrect compared to the others, but after checking with @mairin these three are actually more recent designs. The intention is for all 'task pages' (Pull Image, Build Image, etc) to have the same lighter background, and be similar to the Details pages with breadcrumbs, close button, and potentially icons or other things in the future. The only fix for the background color is to customize NavPage's content background - or just define these as a new FormPage component. Since I was going to create this component anyway I added some basic features: the same breadcrumb and close button as we have in the details pages. So to sum up this: - fix: Fixes the problem with incomplete background color. - chore: Defines common FormPage for these pages. - feat: Adds breadcrumb and close button to these pages, matching what we have in the Details pages. Future work (follow-up PRs): - Switch the other task pages over. - Wait for full design and add icons or other features. Fixes #2976. Signed-off-by: Tim deBoer <git@tdeboer.ca>
- Loading branch information
1 parent
b6d1bd7
commit fe18540
Showing
5 changed files
with
119 additions
and
12 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| /********************************************************************** | ||
| * Copyright (C) 2023 Red Hat, Inc. | ||
| * | ||
| * Licensed under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. | ||
| * You may obtain a copy of the License at | ||
| * | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software | ||
| * distributed under the License is distributed on an "AS IS" BASIS, | ||
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| * See the License for the specific language governing permissions and | ||
| * limitations under the License. | ||
| * | ||
| * SPDX-License-Identifier: Apache-2.0 | ||
| ***********************************************************************/ | ||
|
|
||
| import '@testing-library/jest-dom'; | ||
| import { test, expect } from 'vitest'; | ||
| import { render, screen } from '@testing-library/svelte'; | ||
| import FormPage from './FormPage.svelte'; | ||
|
|
||
| test('Expect title is defined', async () => { | ||
| const name = 'My Name'; | ||
| const title = 'My Dummy Title'; | ||
| render(FormPage, { | ||
| name, | ||
| title, | ||
| }); | ||
|
|
||
| const titleElement = screen.getByRole('heading', { level: 1, name: title }); | ||
| expect(titleElement).toBeInTheDocument(); | ||
| expect(titleElement).toHaveTextContent(title); | ||
| }); | ||
|
|
||
| test('Expect backlink is defined', async () => { | ||
| const name = 'My Name'; | ||
| const title = 'My Dummy Title'; | ||
| const parentName = 'Parent'; | ||
| const parentURL = '/test'; | ||
| render(FormPage, { | ||
| name, | ||
| title, | ||
| parentName, | ||
| parentURL, | ||
| }); | ||
|
|
||
| const nameElement = screen.getByLabelText('back'); | ||
| expect(nameElement).toBeInTheDocument(); | ||
| expect(nameElement).toHaveTextContent(parentName); | ||
| expect(nameElement).toHaveAttribute('href', parentURL); | ||
| }); | ||
|
|
||
| test('Expect close link is defined', async () => { | ||
| const name = 'My Name'; | ||
| const title = 'My Dummy Title'; | ||
| const parentURL = '/test'; | ||
| render(FormPage, { | ||
| name, | ||
| title, | ||
| parentURL, | ||
| }); | ||
|
|
||
| const closeElement = screen.getByTitle('Close'); | ||
| expect(closeElement).toBeInTheDocument(); | ||
| expect(closeElement).toHaveAttribute('href', parentURL); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| <script lang="ts"> | ||
| export let name: string = undefined; | ||
| export let title: string; | ||
| export let parentName: string = undefined; | ||
| export let parentURL: string = undefined; | ||
| </script> | ||
|
|
||
| <div class="flex flex-col w-full h-full shadow-pageheader"> | ||
| <div class="flex flex-row w-full h-fit px-5 py-4"> | ||
| <div class="flex flex-col w-full h-fit"> | ||
| {#if parentName} | ||
| <div class="flex flew-row items-center"> | ||
| <a | ||
| aria-label="back" | ||
| class="text-violet-400 text-base hover:no-underline" | ||
| href="{parentURL}" | ||
| title="Go back to {parentName}">{parentName}</a> | ||
| <div class="text-xl mx-2 text-gray-700">></div> | ||
| <div class="text-sm font-extralight text-gray-700">{name}</div> | ||
| </div> | ||
| {/if} | ||
| <h1 aria-label="{title}" class="text-xl first-letter:uppercase">{title}</h1> | ||
| </div> | ||
| <div class="flex flex-1 justify-end"> | ||
| {#if parentURL} | ||
| <a href="{parentURL}" title="Close" class="mt-2 mr-2 text-gray-900"> | ||
| <i class="fas fa-times" aria-hidden="true"></i> | ||
| </a> | ||
| {/if} | ||
| </div> | ||
| </div> | ||
| <div class="flex w-full h-full bg-zinc-700 overflow-auto"> | ||
| <slot name="content" /> | ||
| </div> | ||
| </div> |