Merge pull request #577 from Lemoncode/vnext

glow post it selected

Author: brauliodiez

src/App.css

@@ -106,6 +106,11 @@
   --bg-table: var(--background-700);
   --header-table: var(--primary-300);
 
+  /* Note */
+  --bg-note: #f8f4d3;
+  --border-note: #d4c896;
+  --shadow-note: #9a8550;
+
   /* Input */
   --bg-input: var(--background-500);
   --bg-input-disabled: var(--background-600);
@@ -165,6 +170,11 @@ body {
   --bg-table: #f6f7f9;
   --header-table: var(--primary-300);
 
+  /* Note */
+  --bg-note: #f8f4d3;
+  --border-note: #d4c896;
+  --shadow-note: #9a8550;
+
   /* Toolbar */
   --bg-toolbar: #f0f2f5;
   --border-toolbar: 1.5px solid var(--primary-200);

src/pods/canvas/canvas-svg.component.tsx

@@ -9,6 +9,7 @@ import {
 import { DatabaseTable } from './components/table/database-table.component';
 import { DatabaseRelationCollectionComponent } from './components/relation';
 import { SelectedTableFilterHighlightComponent } from './components/table/components/selected-table-filter-highlight.component';
+import { SelectedNoteFilterHighlightComponent } from './components/note/components';
 import { CANVAS_MAX_HEIGHT, CANVAS_MAX_WIDTH } from '@/core/providers';
 import { Note } from './components/note';
 
@@ -65,6 +66,7 @@ export const CanvasSvgComponent: React.FC<Props> = props => {
         onSelectRelation={onSelectElement}
       />
       <SelectedTableFilterHighlightComponent />
+      <SelectedNoteFilterHighlightComponent />
       {canvasSchema.tables.map(table => (
         <DatabaseTable
           key={table.id}

src/pods/canvas/components/note/components/index.ts

@@ -1,3 +1,4 @@
 export * from './note-body.component';
 export * from './note-title.component';
 export * from './note-border.component';
+export * from './selected-note-filter-highlight.component';

src/pods/canvas/components/note/components/note-border.component.tsx

@@ -10,13 +10,18 @@ interface Props {
 export const NoteBorder: React.FC<Props> = props => {
   const { width, height, isSelected } = props;
 
+  const rectStyle = {
+    filter: isSelected ? 'url(#note_component_selected)' : 'none',
+  };
+
   return (
     <rect
       x="0"
       y="0"
       width={width}
       height={height}
-      className={isSelected ? classes.noteBorderSelected : classes.noteBorder}
+      style={rectStyle}
+      className={classes.noteBorder}
     />
   );
 };

src/pods/canvas/components/note/components/selected-note-filter-highlight.component.tsx

@@ -0,0 +1,14 @@
+export const SelectedNoteFilterHighlightComponent: React.FC = () => {
+  return (
+    <defs>
+      <filter id="note_component_selected" x="0" y="0">
+        <feDropShadow
+          dx="4"
+          dy="4"
+          stdDeviation="3"
+          floodColor="var(--shadow-note)"
+        />
+      </filter>
+    </defs>
+  );
+};

src/pods/canvas/components/note/note.module.css

@@ -1,5 +1,5 @@
 .noteTitleContainer {
-  fill: #f8f4d3;
+  fill: var(--bg-note);
 }
 
 .noteTitle {
@@ -15,7 +15,7 @@
 }
 
 .noteBody {
-  fill: #f8f4d3;
+  fill: var(--bg-note);
 }
 
 .noteBodyText {
@@ -36,22 +36,16 @@
   white-space: pre-wrap;
 }
 
-.noteBorder {
-  fill: none;
-  stroke: #d4c896;
-  stroke-width: 1;
-}
-
-.noteBorderSelected {
-  fill: none;
-  stroke: #c9b155;
-  stroke-width: 3;
-}
-
 .noteContainer {
   cursor: grabbing;
 }
 
+.noteBorder {
+  fill: var(--bg-note);
+  stroke: var(--border-note);
+  stroke-width: 1;
+}
+
 .editIcon {
   color: var(--text-dark);
 }