Marlowe playground FE: fix other modals

IntersectMBO · Nov 24, 2020 · 0b988a5 · 0b988a5
1 parent 4edd8a5
commit 0b988a5
Show file tree

Hide file tree

Showing 11 changed files with 94 additions and 58 deletions.
diff --git a/marlowe-playground-client/src/Demos/View.purs b/marlowe-playground-client/src/Demos/View.purs
@@ -6,7 +6,7 @@ import Data.Newtype (wrap)
 import Demos.Types (Action(..), Demo)
 import Effect.Aff.Class (class MonadAff)
 import Halogen (ClassName(..), ComponentHTML)
-import Halogen.HTML (HTML, button, div, h1_, h2_, hr_, span, text)
+import Halogen.HTML (HTML, button, div, div_, h1_, h2, h2_, hr_, span, text)
 import Halogen.HTML.Events (onClick)
 import Halogen.HTML.Properties (class_, classes)
 import Projects.Types (Lang(..))
@@ -18,12 +18,17 @@ render ::
   state ->
   ComponentHTML Action ChildSlots m
 render state =
-  div [ classes [ ClassName "projects-container" ] ]
-    [ h1_ [ text "Example Files" ]
-    , demoFile (wrap "Escrow") "Escrow" "Escrow is a financial arrangement where a third party holds and regulates payment of the funds required for two parties involved in a given transaction."
-    , demoFile (wrap "ZeroCouponBond") "Zero Coupon Bond" "A zero-coupon bond is a debt security that does not pay interest but instead trades at a deep discount, rendering a profit at maturity, when the bond is redeemed for its full face value."
-    , demoFile (wrap "CouponBondGuaranteed") "Coupon Bond Guaranteed" "A guaranteed bond is a debt security that offers a secondary guarantee that interest and principal payments will be made by a third party, should the issuer default. It can be backed by a bond insurance company, a fund or group entity, a government authority, or the corporate parents of subsidiaries or joint ventures that are issuing bonds."
-    , demoFile (wrap "Swap") "Swap" "A swap is a derivative contract through which two parties exchange the cash flows or liabilities from two different financial instruments. Most swaps involve cash flows based on a notional principal amount such as a loan or bond, although the instrument can be almost anything. Usually, the principal does not change hands. Each cash flow comprises one leg of the swap. One cash flow is generally fixed, while the other is variable and based on a benchmark interest rate, floating currency exchange rate or index price. "
+  div_
+    [ div [ classes [ ClassName "modal-header" ] ]
+        [ -- TODO: create an HTML helper so all dialogs have the same header/title?
+          h2 [ classes [ ClassName "title" ] ] [ text "Demo Files" ]
+        ]
+    , div [ classes [ ClassName "modal-content", ClassName "projects-container" ] ]
+        [ demoFile (wrap "Escrow") "Escrow" "Escrow is a financial arrangement where a third party holds and regulates payment of the funds required for two parties involved in a given transaction."
+        , demoFile (wrap "ZeroCouponBond") "Zero Coupon Bond" "A zero-coupon bond is a debt security that does not pay interest but instead trades at a deep discount, rendering a profit at maturity, when the bond is redeemed for its full face value."
+        , demoFile (wrap "CouponBondGuaranteed") "Coupon Bond Guaranteed" "A guaranteed bond is a debt security that offers a secondary guarantee that interest and principal payments will be made by a third party, should the issuer default. It can be backed by a bond insurance company, a fund or group entity, a government authority, or the corporate parents of subsidiaries or joint ventures that are issuing bonds."
+        , demoFile (wrap "Swap") "Swap" "A swap is a derivative contract through which two parties exchange the cash flows or liabilities from two different financial instruments. Most swaps involve cash flows based on a notional principal amount such as a loan or bond, although the instrument can be almost anything. Usually, the principal does not change hands. Each cash flow comprises one leg of the swap. One cash flow is generally fixed, while the other is variable and based on a benchmark interest rate, floating currency exchange rate or index price. "
+        ]
     ]
 
 demoFile :: forall p. Demo -> String -> String -> HTML p Action

diff --git a/marlowe-playground-client/src/GistButtons.purs b/marlowe-playground-client/src/GistButtons.purs
@@ -20,13 +20,16 @@ authButton intendedAction state =
     authStatus = state ^. (_authStatus <<< to (map (view authStatusAuthRole)))
   in
     case authStatus of
+      -- TODO: Check how it looks visually and rethink if it should have a CTA to retry
       Failure _ ->
         button
           [ idPublishGist
           ]
           [ text "Failed to login" ]
       Success Anonymous ->
-        div [ class_ (ClassName "auth-button-container") ]
+        -- TODO: Validate this dialog with the designer, see if we should add a title
+        --       based on the intendedAction
+        div [ classes [ClassName "modal-content", ClassName "auth-button-container"] ]
           [ p_ [ text "We use gists to save your projects, in order to save and load your projects you will need to login to Github." ]
           , p_ [ text "If you don't wish to login you can still use the Marlowe Playground however you won't be able to save your work." ]
           , div_

diff --git a/marlowe-playground-client/src/MainFrame/View.purs b/marlowe-playground-client/src/MainFrame/View.purs
@@ -43,7 +43,7 @@ render ::
   State ->
   ComponentHTML Action ChildSlots m
 render settings state =
-  div [ class_ (ClassName "site-wrap") ]
+  div [ class_ ( ClassName "site-wrap")]
     ( [ header [ classes [ noMargins, aHorizontal ] ]
           [ div [ classes [ aHorizontal, fullWidth ] ]
               [ div [ classes [ ClassName "group", aHorizontal, ClassName "marlowe-title-group" ] ]

diff --git a/marlowe-playground-client/src/NewProject/State.purs b/marlowe-playground-client/src/NewProject/State.purs
@@ -5,7 +5,7 @@ import Data.Maybe (Maybe(..))
 import Effect.Aff.Class (class MonadAff)
 import Halogen (ClassName(..), ComponentHTML, HalogenM)
 import Halogen.Classes (newProjectHaskellIcon, newProjectJavascriptIcon, newProjectMarloweIcon, newProjectBlocklyIcon)
-import Halogen.HTML (button, div, h2_, h2, h3, hr_, input, text, img, span)
+import Halogen.HTML (button, div, div_, h2, h2_, h3, hr_, img, input, span, text)
 import Halogen.HTML.Events (onClick, onValueChange)
 import Halogen.HTML.Properties (class_, classes, src, value)
 import MainFrame.Types (ChildSlots)
@@ -30,13 +30,13 @@ render ::
   State ->
   ComponentHTML Action ChildSlots m
 render state =
-  div [ classes [ ClassName "new-project-container" ] ]
+  div_
     [ div [ classes [ ClassName "modal-header" ] ]
         [ -- TODO: confirm that we dont want to change the project name and remove -- input [ value (state ^. _projectName), onValueChange (Just <<< ChangeProjectName) ]
           -- TODO: create an HTML helper so all dialogs have the same header/title?
           h2 [ classes [ ClassName "title" ] ] [ text "New Project" ]
         ]
-    , div [ classes [ ClassName "modal-content" ] ]
+    , div [ classes [ ClassName "modal-content", ClassName "new-project-container" ] ]
         [ h3 [ classes [ ClassName "text-base", ClassName "font-semibold" ] ] [ text "Please choose your initial coding environment" ]
         , div [ classes [ ClassName "environment-selector-group" ] ] (map link [ Haskell, Javascript, Marlowe, Blockly ])
         , renderError (state ^. _error)

diff --git a/marlowe-playground-client/src/Projects/State.purs b/marlowe-playground-client/src/Projects/State.purs
@@ -17,7 +17,7 @@ import Effect.Aff.Class (class MonadAff)
 import Gist (Gist(..), gistCreatedAt, gistDescription, gistId, gistUpdatedAt)
 import Halogen (ClassName(..), ComponentHTML, HalogenM)
 import Halogen.Classes (flex)
-import Halogen.HTML (HTML, a, div, h1_, hr_, span, table, tbody, td, td_, text, th_, thead, tr, tr_)
+import Halogen.HTML (HTML, a, div, div_, h2, hr_, span, table, tbody, td, td_, text, th_, thead, tr, tr_)
 import Halogen.HTML.Events (onClick)
 import Halogen.HTML.Properties (class_, classes)
 import MainFrame.Types (ChildSlots)
@@ -57,18 +57,25 @@ render ::
   State ->
   ComponentHTML Action ChildSlots m
 render state =
-  div [ classes [ ClassName "projects-container" ] ]
-    [ h1_ [ text "Open Project" ]
-    , hr_
-    , body (view _projects state)
+  div_
+    [
+      div [ classes [ ClassName "modal-header" ] ]
+        [
+          -- TODO: create an HTML helper so all dialogs have the same header/title?
+          h2 [ classes [ ClassName "title" ] ] [ text "Open Project" ]
+        ],
+      div [ classes [ ClassName "modal-content", ClassName "projects-container" ] ]
+        [
+         body (view _projects state)
+        ]
     ]
   where
   body (Success []) = span [ class_ (ClassName "empty-result") ] [ text "No saved projects found" ]
 
   body (Success gists) = gistsTable $ filter playgroundGist gists
 
   body (Failure _) = span [ class_ (ClassName "error") ] [ text "Failed to load gists" ]
-
+  -- TODO: fix loading design
   body Loading = span [ class_ (ClassName "loading") ] [ text "Loading..." ]
 
   body NotAsked = text mempty

diff --git a/marlowe-playground-client/src/Rename/State.purs b/marlowe-playground-client/src/Rename/State.purs
@@ -4,7 +4,7 @@ import Data.Lens (assign, (^.))
 import Data.Maybe (Maybe(..))
 import Effect.Aff.Class (class MonadAff)
 import Halogen (ClassName(..), ComponentHTML, HalogenM)
-import Halogen.HTML (button, div, input, text)
+import Halogen.HTML (button, div, div_, h2, input, text)
 import Halogen.HTML.Events (onClick, onValueChange)
 import Halogen.HTML.Properties (class_, classes, value)
 import Marlowe (SPParams_)
@@ -28,10 +28,16 @@ render ::
   State ->
   ComponentHTML Action ChildSlots m
 render state =
-  div [ classes [ ClassName "new-project-container" ] ]
-    [ input [ value (state ^. _projectName), onValueChange (Just <<< ChangeInput) ]
-    , button [ onClick $ const $ Just SaveProject ] [ text "Save" ]
-    , renderError (state ^. _error)
+  div_
+    [ div [ classes [ ClassName "modal-header" ] ]
+        [ -- TODO: create an HTML helper so all dialogs have the same header/title?
+          h2 [ classes [ ClassName "title" ] ] [ text "Rename Project" ]
+        ]
+    , div [ classes [ ClassName "modal-content" ] ]
+        [ input [ class_ (ClassName "project-name-input"), value (state ^. _projectName), onValueChange (Just <<< ChangeInput) ]
+        , button [ onClick $ const $ Just SaveProject ] [ text "Save" ]
+        , renderError (state ^. _error)
+        ]
     ]
   where
   renderError Nothing = text ""

diff --git a/marlowe-playground-client/src/SaveAs/State.purs b/marlowe-playground-client/src/SaveAs/State.purs
@@ -4,7 +4,7 @@ import Data.Lens (assign, (^.))
 import Data.Maybe (Maybe(..))
 import Effect.Aff.Class (class MonadAff)
 import Halogen (ClassName(..), ComponentHTML, HalogenM)
-import Halogen.HTML (button, div, input, text)
+import Halogen.HTML (button, div, div_, h2, input, text)
 import Halogen.HTML.Events (onClick, onValueChange)
 import Halogen.HTML.Properties (class_, classes, value)
 import Marlowe (SPParams_)
@@ -28,10 +28,15 @@ render ::
   State ->
   ComponentHTML Action ChildSlots m
 render state =
-  div [ classes [ ClassName "new-project-container" ] ]
-    [ input [ value (state ^. _projectName), onValueChange (Just <<< ChangeInput) ]
-    , button [ onClick $ const $ Just SaveProject ] [ text "Save" ]
-    , renderError (state ^. _error)
+  div_
+    [ div [ classes [ ClassName "modal-header" ] ]
+        [ h2 [ classes [ ClassName "title" ] ] [ text "Save as" ]
+        ]
+    , div [ classes [ ClassName "modal-content" ] ]
+        [ input [ class_ (ClassName "project-name-input"), value (state ^. _projectName), onValueChange (Just <<< ChangeInput) ]
+        , button [ onClick $ const $ Just SaveProject ] [ text "Save" ]
+        , renderError (state ^. _error)
+        ]
     ]
   where
   renderError Nothing = text ""

diff --git a/marlowe-playground-client/static/css/css_var_globals.scss b/marlowe-playground-client/static/css/css_var_globals.scss
@@ -10,6 +10,8 @@
   --small-margin: 0.687rem; // Half of medium margin
   --medium-margin: 1.375rem; // With current rem, 22px
 
+  --breakpoint-mid: 1024px;
+
 }
 
 $breakpoint-tablet: 768px;

diff --git a/marlowe-playground-client/static/css/modal.scss b/marlowe-playground-client/static/css/modal.scss
@@ -1,3 +1,10 @@
+/* TODO: this only works if set on body, need to check how to add it there
+without doing it as an Effect in a mainframe action
+*/
+.avoid-scrolling {
+  overflow-y: hidden;
+}
+
 /* The "grey" background that prevents other actions to be performed */
 .overlay {
   /*
@@ -14,11 +21,9 @@
   left: 0;
   top: 0;
   /* Full width */
-  width: 100%;
+  width: 100vw;
   /* Full height */
-  height: 100%;
-  /* Enable scroll if needed */
-  overflow: auto;
+  height: 100vh;
   /* Fallback color */
   background-color: rgb(0, 0, 0);
   /* Black w/ opacity */
@@ -32,6 +37,15 @@
   position: relative;
   border-radius: var(--border-radius);
   box-shadow: 0 3px 27px 0 rgba(0, 0, 0, 0.34);
+
+  /* The width cant be bigger than the 1024 size minus margins of both sides*/
+  max-width: calc(var(--breakpoint-mid) - 2 * var(--medium-margin));
+  /*
+    The height cant be bigger than 90% of the vertical height and it's allowed
+    to scroll.
+  */
+  max-height: 90vh;
+  overflow: auto;
 }
 
 
@@ -75,4 +89,5 @@
 
 .modal-content {
   padding: var(--medium-margin);
+
 }
diff --git a/marlowe-playground-client/static/css/new-project.scss b/marlowe-playground-client/static/css/new-project.scss
@@ -37,21 +37,21 @@
       opacity: 0.8;
     }
   }
+}
 
-  // This class is not used for the new project dialog any more
-  // but it is being used by the Save as and Rename modal.
-  // TODO: Move/Remove/Rename
-  input {
-    font-weight: normal;
-    font-size: 1.912em;
-    line-height: calc(18px + 1.8vw);
-    padding: 0;
-    display: block;
-    margin-inline-start: 0px;
-    margin-inline-end: 0px;
-    border: none;
-    appearance: none;
-    background-color: var(--bg-light);
-    color: var(--text-color);
-  }
+// This class is not used for the new project dialog any more
+// but it is being used by the Save as and Rename modal.
+// TODO: Move to more appropiate location
+.project-name-input {
+  font-weight: normal;
+  font-size: 1.912em;
+  line-height: calc(18px + 1.8vw);
+  padding: 0;
+  display: block;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+  border: none;
+  appearance: none;
+  background-color: var(--bg-light);
+  color: var(--text-color);
 }
diff --git a/marlowe-playground-client/static/css/projects.scss b/marlowe-playground-client/static/css/projects.scss
@@ -1,13 +1,4 @@
 .projects-container {
-  width: 90%;
-}
-
-.projects-container h1 {
-  margin: 1.5rem 0rem;
-}
-
-.projects-container hr {
-  margin-bottom: 2rem;
 }
 
 .gists tr:nth-child(even) {
@@ -35,6 +26,8 @@ table.gists {
   text-align: center;
   a {
     flex: 1;
+    // TODO: temporary fix to separate project types, need to redesign the whole modal
+    margin-right: var(--small-margin);
   }
   .empty {
     flex: 1;
@@ -43,4 +36,4 @@ table.gists {
 
 td.date {
   text-align: center;
-}
+}