Merge pull request #144 from virto-network/fix/initiative-description

Fix markdown editor
virto-network · Oct 28, 2024 · 38a3bd4 · 38a3bd4
2 parents afcc72f + 8a0ad04
commit 38a3bd4
Show file tree

Hide file tree

Showing 30 changed files with 853 additions and 540 deletions.
diff --git a/index.html b/index.html
@@ -236,34 +236,14 @@
     };
 
     init("/{base_path}/assets/dioxus/{app_name}_bg.wasm").then(
-      async (wasm) => {   
+      async (wasm) => {
         if (wasm.__wbindgen_start == undefined) {
           wasm.main();
         }
       }
     );
   </script>
   <script src="https://unpkg.com/tiny-markdown-editor/dist/tiny-mde.min.js"></script>
-  <script type="text/javascript">
-    function initMarkdownEditor() {
-      let tinyMDE = new TinyMDE.Editor({ element: document.getElementById("editor") });
-      let commandBar = new TinyMDE.CommandBar({
-        element: document.getElementById("toolbar"),
-        editor: tinyMDE,
-      });
-
-      window.initMarkdownEditor = function (callback) {
-        tinyMDE.addEventListener('change', function () {
-          let content = tinyMDE.getContent();
-          callback(content);
-        });
-      };
-
-      window.setContentMarkdownEditor = function (content) {
-        tinyMDE.setContent(content);
-      };
-    }
-  </script>
   {script_include}
 </body>
 

diff --git a/public/styles/main.scss b/public/styles/main.scss
@@ -237,6 +237,7 @@ $fw-bold: 700;
 
 .bg--state-primary-active {
     background: var(--state-primary-active) !important;
+
     &:hover {
         background-color: var(--fill-400) !important;
     }
@@ -580,6 +581,7 @@ $fw-bold: 700;
     background: var(--fill-50);
 }
 
+.form__inputs--initiative .TinyMDE,
 .form__inputs--initiative .input-wrapper {
     background: var(--fill-00);
 }
@@ -771,6 +773,7 @@ $fw-bold: 700;
     border: none;
     color: var(--fill-00);
     background: var(--state-primary-active);
+
     &:hover {
         background-color: var(--fill-400);
     }
@@ -780,6 +783,7 @@ $fw-bold: 700;
     border: none;
     color: var(--text-loud);
     background: var(--fill-100);
+
     &:hover {
         background-color: var(--fill-200);
     }
@@ -1266,13 +1270,13 @@ $fw-bold: 700;
     background: var(--fill-00);
     border: none;
     box-shadow: 0px 0.5px 0px 0px rgba(26, 26, 26, .08), 0px 1px 3px 0px rgba(26, 26, 26, .08);
+
     &:focus-within {
         outline: 3px solid var(--state-primary-active);
     }
 }
 
 .markdown__wrapper--editor .TinyMDE {
-    background: transparent;
     color: var(--text-primary);
 }
 
@@ -1470,6 +1474,7 @@ $fw-bold: 700;
 .dropdown__item {
     text-align: left;
     border-bottom: 2px solid #4BAA54;
+
     &:hover {
         background: var(--fill-200);
     }
@@ -1530,6 +1535,10 @@ $fw-bold: 700;
     height: var(--element-size-small);
 }
 
+.TinyMDE {
+    min-height: var(--element-size-medium);
+}
+
 .tab--small {
     padding: 0 16px;
 }
@@ -1582,21 +1591,25 @@ textarea::placeholder {
     color: var(--text-secondary);
 }
 
+.TinyMDE,
 .input-wrapper {
     width: 100%;
     min-width: 220px;
     padding: 0 20px;
     border-radius: 12px;
-    display: flex;
-    gap: 12px;
-    align-items: center;
     background: var(--fill-00);
     border: none;
     box-shadow: 0px 0.5px var(--Blur-blur-0, 0px) 0px var(--Colors-alpha-dark-50, rgba(26, 26, 26, 0.08)), 0px 1px var(--Blur-blur-2, 3px) 0px rgba(26, 26, 26, 0.08);
+
     &:focus-within {
         border: 3px solid var(--state-primary-active);
     }
 }
+.input-wrapper {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+}
 
 .button--primary,
 .button--secondary,
@@ -1749,6 +1762,7 @@ textarea::placeholder {
     gap: 4px;
     width: 100%;
     border-radius: 12px;
+
     &:focus-within {
         outline: 3px solid var(--state-primary-active);
     }
@@ -1921,7 +1935,7 @@ textarea::placeholder {
     height: fit-content;
 }
 
-.checkbox-card > .checkbox-card__header {
+.checkbox-card>.checkbox-card__header {
     display: flex;
     width: 100%;
     gap: 8px;
@@ -2662,7 +2676,8 @@ textarea::placeholder {
     right: 16px;
 }
 
-.wallet, .transfers {
+.wallet,
+.transfers {
     max-height: 100vh;
     width: 100%;
     display: flex;
@@ -3032,7 +3047,7 @@ small.summary__item__value {
     width: 100%;
 }
 
-.widthdraw__data > * {
+.widthdraw__data>* {
     width: 100%;
 }
 
@@ -3570,7 +3585,7 @@ small.summary__item__value {
     width: auto;
     min-width: 150px;
     height: 1.62em;
-    vertical-align:bottom;
+    vertical-align: bottom;
     overflow: hidden;
     text-align: start;
 }
@@ -3590,19 +3605,25 @@ small.summary__item__value {
 .animated-text span:nth-child(1) {
     animation-delay: 0s;
 }
+
 .animated-text span:nth-child(2) {
     animation-delay: 2s;
 }
+
 .animated-text span:nth-child(3) {
     animation-delay: 4s;
 }
 
 @keyframes roll {
-    0%, 33.33% {
+
+    0%,
+    33.33% {
         opacity: 0;
         transform: translateY(100%);
     }
-    5%, 28.33% {
+
+    5%,
+    28.33% {
         opacity: 1;
         transform: translateY(0);
     }
@@ -3616,9 +3637,11 @@ small.summary__item__value {
     0% {
         background-color: var(--fill-100);
     }
+
     50% {
         background-color: var(--fill-50);
     }
+
     100% {
         background-color: var(--fill-100);
     }

diff --git a/src/components/atoms/attach.rs b/src/components/atoms/attach.rs
@@ -142,10 +142,14 @@ pub fn Attach(props: AttachProps) -> Element {
                                 variant: IconButtonVariant::Round,
                                 size: ElementSize::Big,
                                 class: "button--avatar bg--transparent",
-                                body: rsx!(
-                                    Icon { icon : Close, height : 28, width : 28, fill :
-                                    "var(--state-destructive-active)" }
-                                ),
+                                body: rsx! {
+                                    Icon {
+                                        icon: Close,
+                                        height: 28,
+                                        width: 28,
+                                        fill: "var(--state-destructive-active)"
+                                    }
+                                },
                                 on_click: move |_| { error.set(None) }
                             }
                         }

diff --git a/src/components/atoms/bar.rs b/src/components/atoms/bar.rs
@@ -26,13 +26,20 @@ pub fn Bar(props: BarProps) -> Element {
     rsx!(
         section {
             div { class: "bar {variant}",
-                span { class: "bar__content bar__content--left", style: format!("width: {}%", props.left_value),
+                span {
+                    class: "bar__content bar__content--left",
+                    style: format!("width: {}%", props.left_value),
                     p { class: "votes-counter__title", {props.left_helper} }
                 }
                 if let Some(value) = props.center_value {
-                    span { class: "bar__content__threshold", style: format!("left: {}%", value) }
+                    span {
+                        class: "bar__content__threshold",
+                        style: format!("left: {}%", value)
+                    }
                 }
-                span { class: "bar__content bar__content--right", style: format!("width: {}%", props.right_value),
+                span {
+                    class: "bar__content bar__content--right",
+                    style: format!("width: {}%", props.right_value),
                     p { class: "votes-counter__title", {props.right_helper} }
                 }
             }

diff --git a/src/components/atoms/card.rs b/src/components/atoms/card.rs
@@ -15,10 +15,14 @@ pub fn Card(props: CardProps) -> Element {
             div { class: "card__container",
                 div { class: "card__head",
                     IconButton {
-                        body: rsx!(
-                            Avatar { name : "{props.community.name}", size : 48, uri : props.community.icon,
-                            variant : Variant::SemiRound }
-                        ),
+                        body: rsx! {
+                            Avatar {
+                                name: "{props.community.name}",
+                                size: 48,
+                                uri: props.community.icon,
+                                variant: Variant::SemiRound
+                            }
+                        },
                         on_click: move |_| {}
                     }
                     h3 { class: "card__title", "{props.community.name}" }
@@ -38,10 +42,15 @@ pub fn Card(props: CardProps) -> Element {
             div { class: "card__cta",
                 IconButton {
                     class: "button--avatar",
-                    body: rsx!(
-                        Icon { icon : ArrowRight, height : 16, width : 16, stroke_width : 2, stroke :
-                        "var(--text-primary)" }
-                    ),
+                    body: rsx! {
+                        Icon {
+                            icon: ArrowRight,
+                            height: 16,
+                            width: 16,
+                            stroke_width: 2,
+                            stroke: "var(--text-primary)"
+                        }
+                    },
                     on_click: move |_| {}
                 }
             }

diff --git a/src/components/atoms/card_skeleton.rs b/src/components/atoms/card_skeleton.rs
@@ -4,8 +4,7 @@ use dioxus::prelude::*;
 pub fn CardSkeleton() -> Element {
     rsx!(
         section { class: "card card--skeleton",
-            div { class: "card__container",
-            }
+            div { class: "card__container" }
         }
     )
 }
diff --git a/src/components/atoms/input.rs b/src/components/atoms/input.rs
@@ -108,10 +108,15 @@ pub fn Input(props: InputProps) -> Element {
                     IconButton {
                         class: "button--avatar bg--transparent",
                         size: props.size,
-                        body: rsx!(
-                            Icon { icon : Search, height : 26, width : 26, stroke_width : 1.5, fill :
-                            "var(--text-secondary)" }
-                        ),
+                        body: rsx! {
+                            Icon {
+                                icon: Search,
+                                height: 26,
+                                width: 26,
+                                stroke_width: 1.5,
+                                fill: "var(--text-secondary)"
+                            }
+                        },
                         on_click: move |_| {
                             is_active.toggle();
                         }

diff --git a/src/components/atoms/input_tags.rs b/src/components/atoms/input_tags.rs
@@ -127,7 +127,9 @@ pub fn InputTags(props: InputTagsProps) -> Element {
                         }
                         IconButton {
                             class: "button--drop bg--transparent",
-                            body: rsx!(Icon { icon : Close, height : 20, width : 20, fill : "var(--fill-400)" }),
+                            body: rsx! {
+                                Icon { icon: Close, height: 20, width: 20, fill: "var(--fill-400)" }
+                            },
                             on_click: move |_| {
                                 new_value.set(tags()[tags().len() - 1].clone());
                             }