Project bar styling fixes

CHANGELOG.md

@@ -6,10 +6,17 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## Unreleased
 
-## Changed
+### Changed
 
+- Stack editor input and output panels based on container width (#869)
 - Blob/URL replacement in HTMLRunner (#877)
 
+### Fixed
+
+- Wrap the project bar when sidebar is wide (#869)
+- Web component project bar state update delay (#869)
+- Left border of the project bar (#869)
+
 ## [0.21.0] - 2024-01-05
 
 ### Added

src/assets/stylesheets/Project.scss

@@ -31,7 +31,6 @@
 }
 
 .proj-container {
-  container-type: inline-size;
   display: flex;
   flex-direction: row;
   overflow-y: hidden;
@@ -42,6 +41,7 @@
   block-size: 100%;
 
   .project-wrapper {
+    container-type: inline-size;
     display: flex;
     flex-direction: column;
     grid-gap: $space-0-5;
@@ -60,7 +60,7 @@
   }
 
   /* TODO: use container queries (fix with cquery breaking positioning of drag/drop & autocomplete) */
-  @container (min-width: 880px) {
+  @container (min-width: 720px) {
     .proj-editor-wrapper {
       flex-flow: row;
     }
@@ -137,7 +137,7 @@
     background-color: $rpf-white;
   }
 
-  @container (min-width: 560px) {
+  @media screen and (min-width: 601px) {
     .proj-runner-container,
     .proj-editor-container,
     .sidebar {
@@ -153,7 +153,7 @@
     background-color: $rpf-grey-800;
   }
 
-  @container (min-width: 560px) {
+  @media screen and (min-width: 601px) {
     .proj-runner-container,
     .proj-editor-container,
     .sidebar {

src/assets/stylesheets/ProjectBar.scss

@@ -11,16 +11,22 @@
   background-color: var(--editor-color-layer-3);
   border: 1px solid var(--editor-color-outline);
 
+  @container (max-width: 367px) {
+    flex-direction: column;
+    block-size: fit-content;
+    justify-content: left;
+  }
+
   .project-name {
     border-inline-end: 1px solid var(--editor-color-outline);
-  }
+    margin-inline-end: -1px;
+    min-inline-size: 0px;
 
-  &__right {
-    margin-inline-start: auto;
-    display: flex;
-    align-items: center;
-    block-size: 100%;
-    flex-shrink: 0;
+    @container (max-width: 365px) {
+      inline-size: 100%;
+      box-sizing: border-box;
+      border-inline-end: none;
+    }
   }
 
   .btn--save {
@@ -43,6 +49,26 @@
 
 .project-bar__right {
   border-inline-start: 1px solid var(--editor-color-outline);
+  margin-inline-start: auto;
+  display: flex;
+  align-items: center;
+  block-size: 100%;
+  flex-shrink: 0;
+  max-inline-size: 55%;
+
+  @container (max-width: 365px) {
+    margin-inline-start: 0;
+    border-inline-start: none;
+    border-block-start: 1px solid var(--editor-color-outline);
+    block-size: fit-content;
+    inline-size: 100%;
+    max-inline-size: 100%;
+
+    .save-status {
+      flex: 1;
+      justify-content: center;
+    }
+  }
 }
 
 .project-bar__btn {

src/assets/stylesheets/ProjectName.scss

@@ -17,8 +17,12 @@
 .project-name__title {
   @include font-size-1-25(bold);
   font-weight: $font-weight-bold;
+  margin-block: $space-1;
   margin-inline-start: $space-0-5;
   margin-inline-end: $space-1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-wrap: nowrap;
 }
 
 .project-name__label {

src/assets/stylesheets/Sidebar.scss

@@ -80,7 +80,7 @@
 }
 
 .sidebar__bar-option-wrapper {
-  padding: 0.625rem;
+  padding: calc(0.75 * $space-0-5);
   border: 1px solid transparent;
 
   &--selected {

src/components/Editor/Project/Project.jsx

@@ -18,6 +18,7 @@ import { projContainer } from "../../../utils/containerQueries";
 const Project = (props) => {
   const webComponent = useSelector((state) => state.editor.webComponent);
   const {
+    forWebComponent = false,
     withProjectbar = true,
     withSidebar = true,
     sidebarOptions = [],
@@ -39,13 +40,13 @@ const Project = (props) => {
   const [loading, setLoading] = useState(true);
 
   useMemo(() => {
-    const isDesktop = params["width-larger-than-880"];
+    const isDesktop = params["width-larger-than-720"];
 
     setDefaultWidth(isDesktop ? "50%" : "100%");
     setDefaultHeight(isDesktop ? "100%" : "50%");
     setMaxWidth(isDesktop ? "75%" : "100%");
     setHandleDirection(isDesktop ? "right" : "bottom");
-  }, [params["width-larger-than-880"]]);
+  }, [params["width-larger-than-720"]]);
 
   useEffect(() => {
     setLoading(false);
@@ -54,14 +55,13 @@ const Project = (props) => {
   return (
     <div className="proj">
       <div
-        ref={containerRef}
         className={classnames("proj-container", {
           "proj-container--wc": webComponent,
         })}
       >
         {withSidebar && <Sidebar options={sidebarOptions} />}
-        <div className="project-wrapper">
-          {withProjectbar && <ProjectBar />}
+        <div className="project-wrapper" ref={containerRef}>
+          {withProjectbar && <ProjectBar forWebComponent={forWebComponent} />}
           {!loading && (
             <div className="proj-editor-wrapper">
               <ResizableWithHandle

src/components/ProjectBar/ProjectBar.jsx

@@ -8,24 +8,24 @@ import DownloadButton from "../DownloadButton/DownloadButton";
 import SaveButton from "../SaveButton/SaveButton";
 
 import "../../assets/stylesheets/ProjectBar.scss";
+import { isOwner } from "../../utils/projectHelpers";
 
-const ProjectBar = () => {
+const ProjectBar = ({ forWebComponent = false }) => {
   const { t } = useTranslation();
 
-  const user = useSelector((state) => state.auth.user);
   const project = useSelector((state) => state.editor.project);
+  const user = useSelector((state) => state.auth.user);
   const loading = useSelector((state) => state.editor.loading);
   const saving = useSelector((state) => state.editor.saving);
   const lastSavedTime = useSelector((state) => state.editor.lastSavedTime);
+  const projectOwner = isOwner(user, project);
 
   return (
     loading === "success" && (
       <div className="project-bar">
-        {/* TODO: Look into alternative approach so we don't need hidden h1 */}
-        <h1 style={{ height: 0, width: 0, overflow: "hidden" }}>
-          {project.name || t("header.newProject")}
-        </h1>
-        {loading === "success" && <ProjectName />}
+        {loading === "success" && (
+          <ProjectName forWebComponent={forWebComponent} />
+        )}
         <div className="project-bar__right">
           {loading === "success" && (
             <div className="project-bar__btn-wrapper">
@@ -37,9 +37,11 @@ const ProjectBar = () => {
               />
             </div>
           )}
-          <div className="project-bar__btn-wrapper">
-            <SaveButton className="project-bar__btn btn--save" />
-          </div>
+          {loading === "success" && !projectOwner && (
+            <div className="project-bar__btn-wrapper">
+              <SaveButton className="project-bar__btn btn--save" />
+            </div>
+          )}
           {lastSavedTime && user && (
             <SaveStatus saving={saving} lastSavedTime={lastSavedTime} />
           )}

src/components/ProjectName/ProjectName.jsx

@@ -11,9 +11,12 @@ import "../../assets/stylesheets/ProjectName.scss";
 import classNames from "classnames";
 import PropTypes from "prop-types";
 
-const ProjectName = ({ className = null, showLabel = false }) => {
+const ProjectName = ({
+  className = null,
+  showLabel = false,
+  forWebComponent = false,
+}) => {
   const project = useSelector((state) => state.editor.project, shallowEqual);
-  const webComponent = useSelector((state) => state.editor.webComponent);
 
   const dispatch = useDispatch();
   const { t } = useTranslation();
@@ -22,7 +25,6 @@ const ProjectName = ({ className = null, showLabel = false }) => {
   const tickButton = useRef();
 
   const [isEditable, setEditable] = useState(false);
-  const [isReadOnly, setReadOnly] = useState(false);
   const [name, setName] = useState(project.name || t("projectName.newProject"));
 
   const onEditNameButtonClick = () => {
@@ -39,10 +41,6 @@ const ProjectName = ({ className = null, showLabel = false }) => {
     }
   };
 
-  useEffect(() => {
-    setReadOnly(!!webComponent);
-  }, [webComponent]);
-
   useEffect(() => {
     setName(project.name);
   }, [project.name]);
@@ -106,7 +104,11 @@ const ProjectName = ({ className = null, showLabel = false }) => {
         </label>
       )}
       <div className={classNames("project-name", className)}>
-        {isReadOnly ? (
+        {/* TODO: Look into alternative approach so we don't need hidden h1 */}
+        <h1 style={{ height: 0, width: 0, overflow: "hidden" }}>
+          {project.name || t("header.newProject")}
+        </h1>
+        {forWebComponent ? (
           <div className="project-name__title">{name}</div>
         ) : (
           <input
@@ -122,7 +124,7 @@ const ProjectName = ({ className = null, showLabel = false }) => {
             onChange={handleOnChange}
           />
         )}
-        {!isReadOnly && (
+        {!forWebComponent && (
           <div ref={tickButton}>
             <DesignSystemButton
               className="project-name__button"
@@ -135,7 +137,6 @@ const ProjectName = ({ className = null, showLabel = false }) => {
               icon={isEditable ? <TickIcon /> : <PencilIcon />}
               onClick={isEditable ? updateName : onEditNameButtonClick}
               type={isEditable ? "primary" : "tertiary"}
-              fill
             />
           </div>
         )}

src/components/ProjectName/ProjectName.test.js

@@ -48,20 +48,22 @@ describe("With a webComponent=true", () => {
     const initialState = {
       editor: {
         project,
-        webComponent: true,
       },
     };
     store = mockStore(initialState);
     render(
       <Provider store={store}>
-        <ProjectName showLabel={true} />
+        <ProjectName showLabel={true} forWebComponent={true} />
       </Provider>,
     );
   });
 
-  test("Project name shown", () => {
-    screen.debug();
-    expect(screen.queryByText(project.name)).toBeInTheDocument();
+  test("Contains hidden project name heading", () => {
+    expect(screen.queryByRole("heading")).toHaveTextContent(project.name);
+  });
+
+  test("Shows project name", () => {
+    expect(screen.queryAllByText(project.name)[1]).toBeInTheDocument();
   });
 
   test("Edit field not shown", () => {

src/utils/ResizableWithHandle.js

@@ -75,7 +75,7 @@ const ResizableWithHandle = (props) => {
       onResizeStop={onResizeStop}
       size={{ width: width, height: height }}
       handleStyles={{
-        right: { height: "98%", top: "1%" },
+        right: { height: "96%", top: "2%" },
       }}
       {...rest}
     >

src/utils/containerQueries.js

@@ -1,6 +1,6 @@
 export const projContainer = {
-  "width-larger-than-880": {
-    minWidth: 880,
+  "width-larger-than-720": {
+    minWidth: 720,
   },
   "width-smaller-than-600": {
     maxWidth: 600,