feat: templates framework #4254
Open
Conversation
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 comment has been minimized.
This comment has been minimized.
Schwehn42
added
Changes Requested
Schwehn42
added
Review Needed
This reverts commit 004bde4.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
|
The deployment to the dev cluster was successful. You can find the deployment here: https://4254.development.scrumlr.fra.ics.inovex.io Deployed Images
|
🐙 OctomindTest Report: 3/14 successful.
commit sha: 4dd0f37 |
| display: flex; | ||
| flex-direction: row; | ||
| align-items: center; | ||
| gap: 0; |
There was a problem hiding this comment.
There should be a small gap imo
| const clearInput = () => props.handleValueChange(""); | ||
|
|
||
| return ( | ||
| <div className={classNames(props.className, "search-bar", {"search-bar--disabled": props.disabled})}> |
There was a problem hiding this comment.
Clicking on the search bar should always focus the input. Right now, the input is only focused if you actually click on the input within the container.
These should be aligned
|
| * stateless search bar component. | ||
| * if the input is not empty, it's clearable using the X button | ||
| */ | ||
| export const SearchBar = (props: SearchBarProps) => { |
There was a problem hiding this comment.
Should probably use debounce
Comment on lines
42
to
+66
| <Route | ||
| path="/new" | ||
| path="/boards" | ||
| element={ | ||
| <RequireAuthentication> | ||
| <NewBoard /> | ||
| <Boards /> | ||
| </RequireAuthentication> | ||
| } | ||
| /> | ||
| > | ||
| <Route index element={<Navigate to="templates" />} /> | ||
| <Route path="templates" element={<Templates />}> | ||
| {/* TODO extract settings routes to avoid repetition */} | ||
| <Route path="settings" element={<SettingsDialog enabledMenuItems={{appearance: true, feedback: feedbackEnabled, profile: true}} />}> | ||
| <Route path="appearance" element={<Appearance />} /> | ||
| <Route path="feedback" element={<Feedback />} /> | ||
| <Route path="profile" element={<ProfileSettings />} /> | ||
| </Route> | ||
| </Route> | ||
| <Route path="sessions" element={<Sessions />}> | ||
| <Route path="settings" element={<SettingsDialog enabledMenuItems={{appearance: true, feedback: feedbackEnabled, profile: true}} />}> | ||
| <Route path="appearance" element={<Appearance />} /> | ||
| <Route path="feedback" element={<Feedback />} /> | ||
| <Route path="profile" element={<ProfileSettings />} /> | ||
| </Route> | ||
| </Route> | ||
| </Route> |
There was a problem hiding this comment.
These routes should be /templates and /sessions instead of /board/templates and /board/sessions
Comment on lines
+53
to
+56
| <Route path="settings" element={<SettingsDialog enabledMenuItems={{appearance: true, feedback: feedbackEnabled, profile: true}} />}> | ||
| <Route path="appearance" element={<Appearance />} /> | ||
| <Route path="feedback" element={<Feedback />} /> | ||
| <Route path="profile" element={<ProfileSettings />} /> |
There was a problem hiding this comment.
Both the appearance and profile menu item have the same background-color on hover
Comment on lines
+59
to
+66
| <Route path="sessions" element={<Sessions />}> | ||
| <Route path="settings" element={<SettingsDialog enabledMenuItems={{appearance: true, feedback: feedbackEnabled, profile: true}} />}> | ||
| <Route path="appearance" element={<Appearance />} /> | ||
| <Route path="feedback" element={<Feedback />} /> | ||
| <Route path="profile" element={<ProfileSettings />} /> | ||
| </Route> | ||
| </Route> | ||
| </Route> |
There was a problem hiding this comment.
Should we hide the sessions for anonymous users?
| * it is completely stateless, which means the logic to actually flip the switch resides in the parent component. | ||
| * the component itself only emits whenever the switch is interacted with. | ||
| */ | ||
| export const Switch = (props: SwitchProps) => ( |
There was a problem hiding this comment.
Suggestion: I wouldn't highlight the currently selected tab with the background color. It would be cool if the indicator is animated and you see it moving from left to right / right to left. The way to do it is to have a separate 'indicator' div, which you can position absolute and move around on change. With Chrome and some other browser, you could even use the new anchor positioning for that.
There was a problem hiding this comment.
@import "constants/style";
$padding--default: $spacing--xs;
$padding--mobile: 6px;
.switch {
all: unset;
user-select: none;
position: relative;
display: flex;
flex-direction: row;
align-items: center;
gap: 4px;
width: fit-content;
padding: $padding--default;
border-radius: $rounded--large;
background-color: $gray--000;
&:enabled {
cursor: pointer;
@include default-states($padding: $padding--default);
}
&:disabled {
background-color: $gray--000;
.switch__item {
color: $gray--800;
background-color: $gray--000;
&--active {
background-color: $gray--400;
}
}
}
}
.switch__item {
position: relative;
z-index: 20;
box-sizing: border-box;
width: 120px;
height: 48px;
padding: 14.5px $spacing--base;
border-radius: $rounded--full;
text-align: center;
font-size: $text--base;
font-weight: 600;
color: #292f3b;
transition:
background-color 0.3s,
color 0.3s;
&--active {
color: $gray--000;
font-weight: 700;
}
}
@media screen and (max-width: $breakpoint--smartphone) {
.switch {
padding: $padding--mobile;
margin-left: $spacing--sm;
&:enabled {
@include default-states($padding: $padding--mobile);
}
}
.switch__item {
font-size: $text--sm;
}
}
[theme="dark"] {
.switch {
background-color: $navy--600;
&:disabled {
background-color: $navy--700;
.switch__item {
color: $navy--300;
background-color: $navy--700;
&--active {
color: $navy--300;
background-color: $gray--400;
}
}
}
}
.switch__item {
color: $gray--000;
background-color: $navy--400;
&--active {
color: $navy--600;
background-color: $gray--000;
}
}
}
@supports (anchor-name: --selected-option) {
.switch::before {
content: '';
position: absolute;
width: 120px;
height: 48px;
border-radius: $rounded--full;
background-color: $navy--600;
color: $gray--000;
font-weight: 700;
z-index: 10;
}
.switch__item--active {
anchor-name: --selected-option;
}
.switch::before {
position-anchor: --selected-option;
top: anchor(top);
left: anchor(left);
transition: all 120ms linear;
}
}
@supports (anchor-name: --selected-option) {
.switch__item--active {
background-color: $navy--600;
}
}There was a problem hiding this comment.
Screen.Recording.2025-02-02.at.14.29.19.mov
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Resolves #4201
Resolves #4253
Adds the framework for the new template page. This includes both the layout and some functionality (like routing).
After logging into scrumlr, users will now be redirected to the templates page.
Important
To see the changes, make sure the env var
REACT_APP_LEGACY_CREATE_BOARDis set tofalse.Right now, they default to
falsein dev env, andtruein prod env.This is so the different changes can be merged into main without affecting current use.
The page consists of the header and main section
Header section
Main section
Changelog
templatesandsessionsto routenewSessionsaccordinglyUserPillSwitchSearchBarNewBoardto a grid including the new components in header, and the views as Outletstyle.scssTODO
Checklist
(Optional) Visual Changes
Show media