General: Reduce Sidebar Width (#350)

ls1intum · Apr 11, 2024 · a43dc4e · a43dc4e
1 parent 6a0c404
commit a43dc4e
Show file tree

Hide file tree

Showing 31 changed files with 103 additions and 91 deletions.
diff --git a/src/main/components/create-pane/create-pane.tsx b/src/main/components/create-pane/create-pane.tsx
@@ -35,6 +35,7 @@ type OwnProps = {};
 type StateProps = {
   type: UMLDiagramType;
   colorEnabled: boolean;
+  previewScaleFactor?: number;
 };
 
 type DispatchProps = {
@@ -121,7 +122,10 @@ class CreatePaneComponent extends Component<Props, State> {
       .map((preview, index) => {
         const { styles: previewStyles } = preview;
         return (
-          <div style={previewStyles} key={index}>
+          <div
+            style={{ ...previewStyles, height: preview.bounds.height * (this.props?.previewScaleFactor ?? 0.8) + 8 }}
+            key={index}
+          >
             <PreviewElementComponent element={preview} create={this.create} />
           </div>
         );

diff --git a/src/main/components/create-pane/preview-element-component.tsx b/src/main/components/create-pane/preview-element-component.tsx
@@ -9,14 +9,17 @@ import { hoverable } from '../uml-element/hoverable/hoverable';
 type Props = {
   element: UMLElement;
   create: (element: UMLElement, owner?: string) => void;
+  scale?: number;
 };
 
-export const Preview = styled(hoverable(CanvasElement)).attrs({
+export const Preview = styled(hoverable(CanvasElement)).attrs((props: { scale?: number }) => ({
   child: CanvasElement,
-})`
-  margin: 8px;
+  scale: props.scale,
+}))`
   overflow: visible;
   fill: white;
+  scale: ${(props) => props.scale ?? 0.8};
+  transform-origin: center center;
 `;
 
 export class PreviewElementComponent extends Component<Props> {

diff --git a/src/main/components/sidebar/sidebar-styles.ts b/src/main/components/sidebar/sidebar-styles.ts
@@ -3,14 +3,16 @@ import styled from 'styled-components';
 export type ContainerProps = {};
 
 export const Container = styled.aside.attrs<ContainerProps>({})<ContainerProps>`
-  flex: 0 0 230px;
+  flex: 0 0 148px;
   padding: 0 10px;
   height: 100%;
   min-height: inherit;
   max-height: inherit;
-  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
   display: flex;
   flex-direction: column;
+  align-items: center;
 
   svg {
     display: block;

diff --git a/src/main/packages/common/color-legend/color-legend.ts b/src/main/packages/common/color-legend/color-legend.ts
@@ -9,7 +9,7 @@ export class ColorLegend extends UMLElement {
   type: UMLElementType = ColorLegendElementType.ColorLegend;
 
   constructor(values?: DeepPartial<IUMLElement>) {
-    super(values && !values.bounds ? { ...values, bounds: { x: 0, y: 0, width: 200, height: 50 } } : values);
+    super(values && !values.bounds ? { ...values, bounds: { x: 0, y: 0, width: 160, height: 50 } } : values);
   }
 
   render(canvas: ILayer): ILayoutable[] {

diff --git a/src/main/packages/flowchart/flowchart-diagram-preview.ts b/src/main/packages/flowchart/flowchart-diagram-preview.ts
@@ -12,7 +12,7 @@ export const composeFlowchartPreview: ComposePreview = (
   translate: (id: string) => string,
 ): PreviewElement[] => {
   const elements: PreviewElement[] = [];
-  const defaultBounds: IBoundary = { x: 0, y: 0, width: 150, height: computeDimension(1.0, 70) };
+  const defaultBounds: IBoundary = { x: 0, y: 0, width: 160, height: computeDimension(1.0, 70) };
 
   elements.push(
     new FlowchartTerminal({
@@ -38,7 +38,10 @@ export const composeFlowchartPreview: ComposePreview = (
   elements.push(
     new FlowchartInputOutput({
       name: translate('packages.Flowchart.FlowchartInputOutput'),
-      bounds: defaultBounds,
+      bounds: {
+        ...defaultBounds,
+        width: 140,
+      },
     }),
   );
 

diff --git a/src/main/packages/uml-reachability-graph/reachability-graph-preview.ts b/src/main/packages/uml-reachability-graph/reachability-graph-preview.ts
@@ -11,7 +11,7 @@ export const composeReachabilityGraphPreview: ComposePreview = (
 
   const umlReachabilityGraphMarking = new UMLReachabilityGraphMarking({
     name: translate('packages.ReachabilityGraph.ReachabilityGraphMarking'),
-    bounds: { x: 0, y: 0, width: 200, height: 100 },
+    bounds: { x: 0, y: 0, width: 160, height: 100 },
   });
 
   elements.push(umlReachabilityGraphMarking);

diff --git a/src/main/services/uml-element/uml-element.ts b/src/main/services/uml-element/uml-element.ts
@@ -82,7 +82,7 @@ export abstract class UMLElement implements IUMLElement, ILayoutable {
   id = uuid();
   name = '';
   abstract type: UMLElementType | UMLRelationshipType | UMLDiagramType;
-  bounds = { x: 0, y: 0, width: 200, height: 100 };
+  bounds = { x: 0, y: 0, width: 160, height: 100 };
   owner = null as string | null;
   highlight?: string;
   fillColor?: string;

diff --git a/src/tests/unit/components/uml-element/assessable/__snapshots__/assessable-test.tsx.snap b/src/tests/unit/components/uml-element/assessable/__snapshots__/assessable-test.tsx.snap
@@ -6,7 +6,7 @@ exports[`test assessable HOC display negative score 1`] = `
     <svg>
       <g
         pointer-events="none"
-        transform="translate(200 0)"
+        transform="translate(160 0)"
       >
         <circle
           class="sc-kpDqfm"
@@ -42,7 +42,7 @@ exports[`test assessable HOC display neutral score 1`] = `
     <svg>
       <g
         pointer-events="none"
-        transform="translate(200 0)"
+        transform="translate(160 0)"
       >
         <circle
           class="sc-kpDqfm"
@@ -78,7 +78,7 @@ exports[`test assessable HOC display positive score 1`] = `
     <svg>
       <g
         pointer-events="none"
-        transform="translate(200 0)"
+        transform="translate(160 0)"
       >
         <circle
           class="sc-kpDqfm"

diff --git a/.../unit/packages/bpmn/bpmn-annotation/__snapshots__/bpmn-annotation-component-test.tsx.snap b/.../unit/packages/bpmn/bpmn-annotation/__snapshots__/bpmn-annotation-component-test.tsx.snap
@@ -12,7 +12,7 @@ exports[`render the bpmn-annotation-component 1`] = `
           rx="10"
           ry="10"
           stroke="transparent"
-          width="200"
+          width="160"
         />
         <path
           class="sc-gEvEer JpXgg"
@@ -25,13 +25,13 @@ exports[`render the bpmn-annotation-component 1`] = `
           height="100"
           pointer-events="none"
           text-anchor="middle"
-          width="200"
-          x="100"
+          width="160"
+          x="80"
           y="50"
         >
           <tspan
             dy="5.5"
-            x="100"
+            x="80"
           >
             Annotation
           </tspan>

diff --git a/...packages/bpmn/bpmn-call-activity/__snapshots__/bpmn-call-activity-component-test.tsx.snap b/...packages/bpmn/bpmn-call-activity/__snapshots__/bpmn-call-activity-component-test.tsx.snap
@@ -13,20 +13,20 @@ exports[`render the bpmn-call-activity-component 1`] = `
           ry="10"
           stroke="black"
           stroke-width="3"
-          width="200"
+          width="160"
         />
         <text
           font-weight="bold"
           height="100"
           pointer-events="none"
           text-anchor="middle"
-          width="200"
-          x="100"
+          width="160"
+          x="80"
           y="50"
         >
           <tspan
             dy="5.5"
-            x="100"
+            x="80"
           >
             Call Activity
           </tspan>

diff --git a/src/tests/unit/packages/bpmn/bpmn-data-object/__snapshots__/bpmn-data-object-test.tsx.snap b/src/tests/unit/packages/bpmn/bpmn-data-object/__snapshots__/bpmn-data-object-test.tsx.snap
@@ -8,19 +8,19 @@ exports[`render the bpmn-data-object-component 1`] = `
         <polyline
           class="sc-aXZVg bUvEJV"
           fill="white"
-          points="0 0, 0 100, 200 100, 200 15, 185 0, 185 15, 200 15, 185 0, 0 0"
+          points="0 0, 0 100, 160 100, 160 15, 145 0, 145 15, 160 15, 145 0, 0 0"
           stroke="black"
         />
         <text
           pointer-events="none"
           text-anchor="middle"
-          width="400"
-          x="100"
+          width="320"
+          x="80"
           y="120"
         >
           <tspan
             dy="11"
-            x="100"
+            x="80"
           >
             Data Object
           </tspan>

diff --git a/src/tests/unit/packages/bpmn/bpmn-data-store/__snapshots__/bpmn-data-object-test.tsx.snap b/src/tests/unit/packages/bpmn/bpmn-data-store/__snapshots__/bpmn-data-object-test.tsx.snap
@@ -7,38 +7,38 @@ exports[`render the bpmn-data-store-component 1`] = `
       <g>
         <path
           class="sc-gEvEer fMgKSV"
-          d="M 0 10 L 0 90 A 100 10 0 0 0 200 90 L 200 10 A 100 10 180 0 0 0 10"
+          d="M 0 10 L 0 90 A 80 10 0 0 0 160 90 L 160 10 A 80 10 180 0 0 0 10"
           fill="white"
           stroke="black"
         />
         <path
           class="sc-gEvEer JpXgg"
-          d="M 0 30 A 100 10 0 0 0 200 30"
+          d="M 0 30 A 80 10 0 0 0 160 30"
           fill="transparent"
           stroke="black"
         />
         <path
           class="sc-gEvEer JpXgg"
-          d="M 0 20 A 100 10 0 0 0 200 20"
+          d="M 0 20 A 80 10 0 0 0 160 20"
           fill="transparent"
           stroke="black"
         />
         <path
           class="sc-gEvEer JpXgg"
-          d="M 0 10 A 100 10 0 0 0 200 10"
+          d="M 0 10 A 80 10 0 0 0 160 10"
           fill="transparent"
           stroke="black"
         />
         <text
           pointer-events="none"
           text-anchor="middle"
-          width="400"
-          x="100"
+          width="320"
+          x="80"
           y="120"
         >
           <tspan
             dy="11"
-            x="100"
+            x="80"
           >
             Data Store
           </tspan>

diff --git a/src/tests/unit/packages/bpmn/bpmn-group/__snapshots__/bpmn-group-component-test.tsx.snap b/src/tests/unit/packages/bpmn/bpmn-group/__snapshots__/bpmn-group-component-test.tsx.snap
@@ -20,13 +20,13 @@ exports[`render the bpmn-group-component 1`] = `
           height="100"
           pointer-events="none"
           text-anchor="middle"
-          width="200"
-          x="100"
+          width="160"
+          x="80"
           y="50"
         >
           <tspan
             dy="5.5"
-            x="100"
+            x="80"
           >
             Group
           </tspan>

diff --git a/...tests/unit/packages/bpmn/bpmn-pool/__snapshots__/bpmn-transaction-component-test.tsx.snap b/...tests/unit/packages/bpmn/bpmn-pool/__snapshots__/bpmn-transaction-component-test.tsx.snap
@@ -18,7 +18,7 @@ exports[`render the bpmn-pool-component 1`] = `
           fill="white"
           height="100"
           stroke="black"
-          width="160"
+          width="120"
           x="40"
           y="0"
         />

diff --git a/.../unit/packages/bpmn/bpmn-subprocess/__snapshots__/bpmn-subprocess-component-test.tsx.snap b/.../unit/packages/bpmn/bpmn-subprocess/__snapshots__/bpmn-subprocess-component-test.tsx.snap
@@ -20,21 +20,21 @@ exports[`render the bpmn-subprocess-component 1`] = `
           height="14"
           stroke="black"
           width="14"
-          x="93"
+          x="73"
           y="86"
         />
         <polyline
           class="sc-aXZVg bUvEJV"
           fill="white"
-          points="96 93, 104 93"
+          points="76 93, 84 93"
           stroke="black"
           stroke-linecap="round"
           stroke-linejoin="round"
         />
         <polyline
           class="sc-aXZVg bUvEJV"
           fill="white"
-          points="100 89, 100 97"
+          points="80 89, 80 97"
           stroke="black"
           stroke-linecap="round"
           stroke-linejoin="round"
@@ -44,13 +44,13 @@ exports[`render the bpmn-subprocess-component 1`] = `
           height="100"
           pointer-events="none"
           text-anchor="middle"
-          width="200"
-          x="100"
+          width="160"
+          x="80"
           y="50"
         >
           <tspan
             dy="5.5"
-            x="100"
+            x="80"
           >
             SyntaxTreeTerminal
           </tspan>

diff --git a/...ests/unit/packages/bpmn/bpmn-swimlane/__snapshots__/bpmn-swimlane-component-test.tsx.snap b/...ests/unit/packages/bpmn/bpmn-swimlane/__snapshots__/bpmn-swimlane-component-test.tsx.snap
@@ -10,7 +10,7 @@ exports[`render the bpmn-swimlane-component 1`] = `
           fill="white"
           height="100"
           stroke="black"
-          width="200"
+          width="160"
         />
         <text
           alignment-baseline="middle"

diff --git a/src/tests/unit/packages/bpmn/bpmn-task/__snapshots__/bpmn-task-component-test.tsx.snap b/src/tests/unit/packages/bpmn/bpmn-task/__snapshots__/bpmn-task-component-test.tsx.snap
@@ -19,13 +19,13 @@ exports[`render the bpmn-task-component 1`] = `
           height="100"
           pointer-events="none"
           text-anchor="middle"
-          width="200"
-          x="100"
+          width="160"
+          x="80"
           y="50"
         >
           <tspan
             dy="5.5"
-            x="100"
+            x="80"
           >
             Task
           </tspan>

diff --git a/...nit/packages/bpmn/bpmn-transaction/__snapshots__/bpmn-transaction-component-test.tsx.snap b/...nit/packages/bpmn/bpmn-transaction/__snapshots__/bpmn-transaction-component-test.tsx.snap
@@ -12,7 +12,7 @@ exports[`render the bpmn-transaction-component 1`] = `
           rx="10"
           ry="10"
           stroke="black"
-          width="200"
+          width="160"
         />
         <rect
           class="sc-fqkvVR kprGcp"
@@ -21,7 +21,7 @@ exports[`render the bpmn-transaction-component 1`] = `
           rx="7"
           ry="7"
           stroke="black"
-          width="194"
+          width="154"
           x="3"
           y="3"
         />
@@ -30,13 +30,13 @@ exports[`render the bpmn-transaction-component 1`] = `
           height="100"
           pointer-events="none"
           text-anchor="middle"
-          width="200"
-          x="100"
+          width="160"
+          x="80"
           y="50"
         >
           <tspan
             dy="5.5"
-            x="100"
+            x="80"
           >
             Transaction
           </tspan>