Skip to content

Commit

Permalink
Template adjustments
Browse files Browse the repository at this point in the history
  • Loading branch information
@rob-gordon
rob-gordon committed May 23, 2024
1 parent e441065 commit ef89325
Show file tree
Hide file tree
Showing 11 changed files with 77 additions and 77 deletions.
Binary file modified app/public/templates/template11.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified app/public/templates/template17.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified app/public/templates/template18.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified app/public/templates/template21.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 2 additions & 1 deletion app/src/components/Tabs/ThemeTab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -376,6 +376,7 @@ const Form = createForm<{
options: [
{ label: "Bezier", value: "bezier" },
{ label: "Taxi", value: "taxi" },
{ label: "Round Taxi", value: "round-taxi" },
],
},
{
Expand Down Expand Up @@ -631,7 +632,7 @@ export function ThemeTab() {
function Section({ title, children }: { title: string; children: ReactNode }) {
return (
<>
<h2 className="font-bold text-blue-600 text-base -mb-8 ml-3 dark:text-blue-400">
<h2 className="font-bold text-neutral-800 text-base -mb-8 ml-px dark:text-blue-400">
{title}
</h2>
<div className="border border-blue-100 dark:border-neutral-800 rounded-xl relative w-full overflow-hidden">
Expand Down
2 changes: 1 addition & 1 deletion app/src/lib/FFTheme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export type Direction = "RIGHT" | "LEFT" | "DOWN" | "UP";

export type Shape = "rectangle" | "roundrectangle" | "ellipse";

export type CurveStyle = "bezier" | "taxi";
export type CurveStyle = "bezier" | "taxi" | "round-taxi";

export type Border = "none" | "solid" | "dashed" | "dotted" | "double";

Expand Down
43 changes: 23 additions & 20 deletions app/src/lib/templates/code-flow-template.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,33 +20,36 @@ User
`;

export const theme: FFTheme = {
arrowScale: 1,
background: "#f8f8f8",
borderColor: "#6f7280",
borderWidth: 2,
curveStyle: "taxi",
layoutName: "dagre",
direction: "DOWN",
edgeColor: "#b9a6a6",
edgeTextSize: 1,
edgeWidth: 2,
spacingFactor: 1.15,

background: "#f8f8f8",
fontFamily: "IBM Plex Sans",
layoutName: "dagre",
lineHeight: 1.4,
nodeBackground: "#6f7280",

shape: "roundrectangle",
nodeBackground: "#9397a6",
nodeForeground: "#ffffff",
padding: 19,
rotateEdgeLabel: false,
shape: "roundrectangle",
sourceArrowShape: "none",
sourceDistanceFromNode: 0,
spacingFactor: 1,
targetArrowShape: "triangle",
targetDistanceFromNode: 5,
textMarginY: 1.5,
borderWidth: 2,
borderColor: "#8f95b1",
textMaxWidth: 146,
lineHeight: 1.4,
textMarginY: 1.5,
useFixedHeight: false,
fixedHeight: 50,

curveStyle: "round-taxi",
edgeWidth: 2,
edgeColor: "#9a9a9a",
sourceArrowShape: "none",
targetArrowShape: "triangle",
sourceDistanceFromNode: 0,
targetDistanceFromNode: 5,
arrowScale: 1,
edgeTextSize: 1,
rotateEdgeLabel: false,
};

export const cytoscapeStyle =
"$background: rgb(248, 248, 248);\n$color: #000000;\n$blue: #3375e5;\n$purple: #8b53e6;\n$red: #e63946;\n$orange: #f4a261;\n$yellow: #f1fa3b;\n$green: #72d9b3;\n$grey: #6f7280;\n$lightgrey: #3a3636;\n\n/** Start */\n:childless[in_degree < 1][out_degree > 0] {\n shape: roundrectangle;\n border-color: $color;\n background-color: white;\n color: $color;\n}\n\n/** Branching */\n:childless[in_degree > 0][in_degree < 2][out_degree > 1] {\n shape: diamond;\n border-color: $blue;\n background-color: #d7e9fc;\n color: $color;\n height: $width;\n text-margin-y: 2;\n}\n\n/** Merging **/\n:childless[in_degree > 1][out_degree > 0][out_degree < 2] {\n}\n\n:childless.color_red {\n background-color: $red;\n color: white;\n}\n:childless.color_orange {\n background-color: $orange;\n color: white;\n}\n:childless.color_yellow {\n background-color: $yellow;\n}\n:childless.color_green {\n border-color: $green;\n background-color: #f0fbf8;\n color: $color;\n}\n:childless.color_blue {\n border-color: $blue;\n background-color: #d7e9fc;\n color: $color;\n}\n:childless.color_purple {\n border-color: $purple;\n background-color: #e1d8f4;\n color: $color;\n}\n:childless.color_grey {\n background-color: $grey;\n}\n\n:parent.color_white {\n background-color: white;\n}\n:parent.color_grey {\n background-color: $grey;\n}";
"$background: rgb(248, 248, 248);\n$color: #000000;\n$blue: #3375e5;\n$purple: #8646ed;\n$red: #e63946;\n$orange: #f4a261;\n$yellow: #f1fa3b;\n$green: #72d9b3;\n$grey: #474747;\n$lightgrey: #3a3636;\n\n/** Start */\n:childless[in_degree < 1][out_degree > 0] {\n shape: roundrectangle;\n border-color: $color;\n background-color: white;\n color: $color;\n}\n\n/** Branching */\n:childless[in_degree > 0][in_degree < 2][out_degree > 1] {\n shape: diamond;\n border-color: $blue;\n background-color: #d7e9fc;\n color: $color;\n height: $width;\n text-margin-y: 2;\n}\n\n/** Merging **/\n:childless[in_degree > 1][out_degree > 0][out_degree < 2] {\n}\n\n:childless.color_red {\n background-color: $red;\n color: white;\n}\n:childless.color_orange {\n background-color: $orange;\n color: white;\n}\n:childless.color_yellow {\n background-color: $yellow;\n}\n:childless.color_green {\n border-color: $green;\n background-color: #f0fbf8;\n color: $color;\n}\n:childless.color_blue {\n border-color: $blue;\n background-color: $blue;\n}\n:childless.color_purple {\n border-color: $purple;\n background-color: $purple;\n}\n:childless.color_grey {\n background-color: $grey;\n border-color: $grey;\n}\n\n:parent.color_white {\n background-color: white;\n}\n:parent.color_grey {\n background-color: $grey;\n}";
31 changes: 17 additions & 14 deletions app/src/lib/templates/default-template.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,25 +10,28 @@ Begin Typing
Now erase the text and try it yourself!`;

export const theme: FFTheme = {
background: "#FFFFFF",
fontFamily: "IBM Plex Sans",
layoutName: "dagre",
direction: "DOWN",
spacingFactor: 1.1,
shape: "rectangle",
nodeBackground: "#f2eded",
nodeForeground: "#31405b",
padding: 25,
borderWidth: 2,
borderColor: "#31405b",
textMaxWidth: 150,
lineHeight: 1.4,

background: "#ffffff",
fontFamily: "IBM Plex Sans",

shape: "roundrectangle",
nodeBackground: "#e6e6e6",
nodeForeground: "#000000",
padding: 16,
borderWidth: 0,
borderColor: "#000000",
textMaxWidth: 146,
lineHeight: 1.3,
textMarginY: 0,
useFixedHeight: false,
fixedHeight: 60,
fixedHeight: 50,

curveStyle: "bezier",
edgeWidth: 1,
edgeColor: "#000000",
edgeWidth: 2,
edgeColor: "#606ef6",
sourceArrowShape: "none",
targetArrowShape: "triangle",
sourceDistanceFromNode: 0,
Expand All @@ -39,4 +42,4 @@ export const theme: FFTheme = {
};

export const cytoscapeStyle =
"$color: #31405b;\n$red: #e63946;\n$orange: #f4a261;\n$yellow: #f1fa3b;\n$green: #2a9d8f;\n$blue: #606ef6;\n$purple: #6d4a7c;\n$grey: #f2eded;\n\n:childless {\n font-weight: 500;\n}\n\n/** Start - uncomment to use\n:childless[in_degree < 1][out_degree > 0] {\n border-width: 0;\n shape: roundrectangle;\n background-color: $green;\n color: white;\n}\n*/\n\n/** Terminal - uncomment to use\n:childless[out_degree < 1][in_degree > 0] {\n border-width: 0;\n shape: roundrectangle;\n background-color: $red;\n color: white;\n}\n*/\n\n/** Branching - uncomment to use\n:childless[in_degree > 0][in_degree < 2][out_degree > 1] {\n shape: diamond;\n background-color: $blue;\n color: white;\n height: $width;\n border-width: 0;\n text-margin-y: 2;\n}\n*/\n\n/** Merging **/\n:childless[in_degree > 1][out_degree > 0][out_degree < 2] {\n}\n\n:childless.color_red {\n background-color: $red;\n color: white;\n}\n:childless.color_orange {\n background-color: $orange;\n color: white;\n}\n:childless.color_yellow {\n background-color: $yellow;\n}\n:childless.color_green {\n background-color: $green;\n color: white;\n}\n:childless.color_blue {\n background-color: $blue;\n color: white;\n}\n:childless.color_purple {\n background-color: $purple;\n color: white;\n}\n:childless.color_grey {\n background-color: $grey;\n}\n\n:parent.color_white {\n background-color: white;\n}\n:parent.color_grey {\n background-color: $grey;\n}";
"$color: #000000;\n$red: #e63946;\n$orange: #f4a261;\n$yellow: #f1fa3b;\n$green: #2a9d8f;\n$blue: #606ef6;\n$purple: #6d4a7c;\n$grey: #f2eded;\n\n/** Start - uncomment to use\n:childless[in_degree < 1][out_degree > 0] {\n border-width: 0;\n shape: roundrectangle;\n background-color: $green;\n color: white;\n}\n*/\n\n/** Terminal - uncomment to use\n:childless[out_degree < 1][in_degree > 0] {\n border-width: 0;\n shape: roundrectangle;\n background-color: $red;\n color: white;\n}\n*/\n\n/** Branching - uncomment to use\n:childless[in_degree > 0][in_degree < 2][out_degree > 1] {\n shape: diamond;\n background-color: $blue;\n color: white;\n height: $width;\n border-width: 0;\n text-margin-y: 2;\n}\n*/\n\n/** Merging **/\n:childless[in_degree > 1][out_degree > 0][out_degree < 2] {\n}\n\n:childless.color_red {\n background-color: $red;\n color: white;\n}\n:childless.color_orange {\n background-color: $orange;\n color: white;\n}\n:childless.color_yellow {\n background-color: $yellow;\n}\n:childless.color_green {\n background-color: $green;\n color: white;\n}\n:childless.color_blue {\n background-color: $blue;\n color: white;\n}\n:childless.color_purple {\n background-color: $purple;\n color: white;\n}\n:childless.color_grey {\n background-color: $grey;\n}\n\n:parent.color_white {\n background-color: white;\n}\n:parent.color_grey {\n background-color: $grey;\n}";
33 changes: 18 additions & 15 deletions app/src/lib/templates/flowchart-template.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,30 +18,33 @@ Research
export const theme: FFTheme = {
layoutName: "dagre",
direction: "DOWN",
spacingFactor: 1.05,
lineHeight: 1.4,
spacingFactor: 1,

background: "#ffffff",
fontFamily: "REM",

shape: "rectangle",
background: "#f0f3f5",
textMaxWidth: 150,
nodeBackground: "#f5c844",
nodeForeground: "#1a1a1a",
padding: 10,
fontFamily: "REM",
curveStyle: "bezier",
textMarginY: 0,
borderWidth: 0,
edgeTextSize: 0.88,
borderColor: "#1a1a1a",
textMaxWidth: 150,
lineHeight: 1.4,
textMarginY: 0,
useFixedHeight: true,
fixedHeight: 80,

curveStyle: "bezier",
edgeWidth: 2,
edgeColor: "#1a1a1a",
sourceArrowShape: "none",
targetArrowShape: "vee",
edgeColor: "#5a5a5a",
borderColor: "#1a1a1a",
nodeBackground: "#f5c844",
nodeForeground: "#1a1a1a",
targetArrowShape: "triangle",
sourceDistanceFromNode: 0,
targetDistanceFromNode: 0,
targetDistanceFromNode: 4,
arrowScale: 1.5,
rotateEdgeLabel: false,
edgeTextSize: 1,
rotateEdgeLabel: true,
};

export const cytoscapeStyle =
Expand Down
38 changes: 14 additions & 24 deletions app/src/lib/templates/org-chart-template.ts
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,7 @@
import { FFTheme } from "../FFTheme";

export const content = `
Saraswati Sharma .size_lg.color_pink
Robert Wilson .color_red
Sarah Thompson .color_yellow
David Brown .color_yellow
Jennifer Lee .color_blue
Andrew Miller .color_green
Carrie Richards .color_green
Terry Peralta .border_dashed
Lisa Anderson .color_red
Camille Mitchell .color_yellow
Christopher White .color_blue
Saraswati Sharma .size_lg.color_black\n Robert Wilson\n Sarah Thompson\n David Brown\n Jennifer Lee\n Andrew Miller .color_green\n Carrie Richards .color_green\n Terry Peralta .color_green\n Lisa Anderson .color_purple\n Camille Mitchell .color_purple\n Christopher White .color_purple\n
`;

export const theme: FFTheme = {
Expand All @@ -20,28 +10,28 @@ export const theme: FFTheme = {
spacingFactor: 0.96,
lineHeight: 1.4,
shape: "roundrectangle",
background: "#fefdf9",
textMaxWidth: 176,
padding: 14,
fontFamily: "Onest",
curveStyle: "taxi",
textMarginY: 1,
borderWidth: 1,
background: "#ffffff",
textMaxWidth: 142,
padding: 16,
fontFamily: "Overpass",
curveStyle: "round-taxi",
textMarginY: 2.5,
borderWidth: 2,
edgeTextSize: 1,
edgeWidth: 1,
edgeWidth: 2,
useFixedHeight: false,
fixedHeight: 60,
sourceArrowShape: "none",
targetArrowShape: "none",
edgeColor: "#2a2a26",
borderColor: "#2a2a26",
nodeBackground: "#fefdf9",
nodeForeground: "#2a2a26",
edgeColor: "#b6b6b6",
borderColor: "#dadada",
nodeBackground: "#f4f4f4",
nodeForeground: "#2a2a2a",
sourceDistanceFromNode: 0,
targetDistanceFromNode: 0,
arrowScale: 1,
rotateEdgeLabel: false,
};

export const cytoscapeStyle =
"$red: #f1bfb8;\n$orange: #ff8e16;\n$yellow: #f8edba;\n$green: #b1d1d3;\n$blue: #c1e1f8;\n$pink: #e9b5da;\n$purple: #d0a9e1;\n$grey: #cacaca;\n\n:childless {\n font-weight: 300;\n}\n\n:childless.color_red {\n background-color: $red;\n border-color: #be8179;\n}\n:childless.color_yellow {\n background-color: $yellow;\n border-color: #c8bd84;\n}\n:childless.color_green {\n background-color: $green;\n border-color: #7ea9a5;\n}\n:childless.color_blue {\n background-color: $blue;\n border-color: #89add1;\n}\n:childless.color_purple {\n background-color: $purple;\n border-color: #aa82ba;\n}\n:childless.color_pink {\n background-color: $pink;\n border-color: #a585b1;\n}\n\n:childless.size_lg {\n font-size: 24;\n padding: 18;\n width: 250;\n text-max-width: 218;\n text-margin-y: 2;\n}";
"edge {taxi-radius: 40px;}\n\n$red: #ffd1cb;\n$orange: #ff8e16;\n$yellow: #fff7d5;\n$green: #bcfcff;\n$blue: #c1e1f8;\n$pink: #ffe7f7;\n$purple: #eec6ff;\n$grey: #cacaca;\n\n:childless {\n font-weight: 300;\n}\n\n:childless.color_red {\n background-color: $red;\n border-color: #b38d88;\n}\n:childless.color_yellow {\n background-color: $yellow;\n border-color: #c8bd84;\n}\n:childless.color_green {\n background-color: $green;\n border-color: #60c8bd;\n}\n:childless.color_blue {\n background-color: $blue;\n border-color: #89add1;\n}\n:childless.color_purple {\n background-color: $purple;\n border-color: #aa82ba;\n}\n:childless.color_pink {\n background-color: $pink;\n border-color: #c5aacf;\n}\n:childless.color_black {\n background-color: black;\n border-color: black;\n color: white;\n}\n\n:childless.size_lg {\n font-size: 24;\n padding: 18;\n width: 250;\n text-max-width: 218;\n text-margin-y: 3;\n}";
4 changes: 2 additions & 2 deletions app/src/lib/templates/templates.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,15 @@ export const templates: {
{
key: "flowchart",
img: "template11.png",
bgColor: "#F1F3F5",
bgColor: "#FFFFFF",
title: () => `Flowchart`,
promptType: "flowchart",
accentClasses: ["color_blue", "color_green"],
},
{
key: "org-chart",
img: "template17.png",
bgColor: "#fefdf9",
bgColor: "#FFFFFF",
title: () => t`Organization Chart`,
promptType: "flowchart",
accentClasses: ["color_blue", "color_orange"],
Expand Down

0 comments on commit ef89325

Please sign in to comment.