Skip to content
Snippets Groups Projects
Commit cdc91e17 authored by Florian Sesser's avatar Florian Sesser
Browse files

Merge branch '31.magic-folders-view' into 'main'

Implement MagicFolders list view

Closes #31

See merge request !34
parents 309c2c75 e9b7e944
No related branches found
No related tags found
1 merge request!34Implement MagicFolders list view
Pipeline #3997 passed
......@@ -60,8 +60,8 @@ fullRouteEncoder = mkFullRouteEncoder
(\case
FrontendRoute_Main -> PathEnd $ unitEncoder mempty
FrontendRoute_TechDemo -> PathSegment "techdemo" $ unitEncoder mempty
FrontendRoute_MagicFolders -> PathSegment "magic-folder" $ unitEncoder mempty
FrontendRoute_FileBrowser -> PathSegment "folder" $ pathOnlyEncoder
FrontendRoute_MagicFolders -> PathSegment "magic-folders" $ unitEncoder mempty
FrontendRoute_FileBrowser -> PathSegment "browse" $ pathOnlyEncoder
)
concat <$> mapM deriveRouteComponent
......
......@@ -23,7 +23,7 @@ iconForEntry Directory { } = "folder_open"
describeEntry :: FolderEntry -> Text
describeEntry File { folderEntrySize } = humanReadableSize folderEntrySize
describeEntry Directory { folderEntrySize, directoryChildCount } =
Data.Text.concat [ childCount, "; ", humanReadableSize folderEntrySize, "; "]
Data.Text.concat [ childCount, "; ", humanReadableSize folderEntrySize]
where
childCount = case directoryChildCount of
1 -> "1 file"
......@@ -71,7 +71,7 @@ fileBrowser entriesDyn = do
(leaveButton, _) <- elAttr' "button" ("class" =: "material-icons mdc-top-app-bar__navigation-icon mdc-icon-button" <> "aria-label" =: "Close") $
dynText $ leaveActionIcon . leaveAction <$> r
elClass "span" "mdc-top-app-bar__title" $
text "Documents"
text "File browser" -- TODO: Show current folder name here
elAttr "section" ("class" =: "mdc-top-app-bar__section mdc-top-app-bar__section--align-end" <> "role" =: "toolbar") $ do
elAttr "button" ("class" =: "material-icons mdc-top-app-bar__action-item mdc-icon-button" <> "aria-label" =: "Share") $
text "share"
......
......@@ -4,16 +4,60 @@
module Pages.MagicFolders (magicFolders) where
import Reflex.Material.List
import Reflex.Material.Types
import Reflex.Dom.Core
import Obelisk.Route.Frontend
import Common.Route
import Static (logo)
import MagicFolder
magicFolders :: (DomBuilder t m, PostBuild t m, SetRoute t (R FrontendRoute) m) => Dynamic t [MagicFolder] -> m ()
magicFolders folders =
magicFolders folders = do
-- r <- askRoute -- TODO what is this for?
elClass "header" "mdc-top-app-bar mdc-ripple-surface" $
divClass "mdc-top-app-bar__row" $
elClass "section" "mdc-top-app-bar__section mdc-top-app-bar__section--align-start" $ do
elAttr "button" ("class" =: "material-icons mdc-top-app-bar__navigation-icon mdc-icon-button ps-logo-button") $
elAttr "img" ("src" =: logo) blank
elClass "span" "mdc-top-app-bar__title" $
text "PrivateStorage"
elAttr "section" ("class" =: "mdc-top-app-bar__section mdc-top-app-bar__section--align-end" <> "role" =: "toolbar") blank
-- setRoute $ ffor (tag (current r) (domEvent Click leaveButton)) $ \path ->
-- case leaveAction path of
-- Close -> FrontendRoute_MagicFolders :/ ()
-- Up -> FrontendRoute_FileBrowser :/ dropEnd1 path
elClass "main" "magic-folder-page mdc-top-app-bar--fixed-adjust" $ do
list_ "ul" (mdcListTwoLine_ <> CssClass "mdc-list" <> CssClass "inline-demo-list") $
dyn_ $ mapM_ folderWidget <$> folders
elAttr "button" ("class" =: "mdc-fab" <> "aria-label" =: "Add") $ do
divClass "mdc-fab__ripple" blank
elClass "span" "mdc-fab__icon material-icons" $
text "add"
el "script" $ do
text "mdc.ripple.MDCRipple.attachTo(document.querySelector('.mdc-ripple-surface'));"
text "mdc.ripple.MDCRipple.attachTo(document.querySelector('.mdc-fab'));"
folderWidget :: (DomBuilder t m, SetRoute t (R FrontendRoute) m) => MagicFolder -> m ()
folderWidget (MagicFolder name) = do
(theEl', _) <- el' "div" $ text name
(theEl', _) <- elClass' "li" "mdc-list-item mdc-ripple-surface" $ do
elAttr "span" ("class" =: "mdc-list-item__graphic material-icons" <> "aria-hidden" =: "true") $
text "folder"
elAttr "span" ("class" =: "mdc-list-item__text") $ do
elAttr "span" ("class" =: "mdc-list-item__primary-text") $
text name
elAttr "span" ("class" =: "mdc-list-item__secondary-text") $
text "Might contain magic"
setRoute $ FrontendRoute_FileBrowser :/ [name] <$ domEvent Click theEl'
......@@ -107,8 +107,8 @@ techDemoPage = prerender_ (pure ()) $ do
-- Add some buttons to get out of here.
jump "main" (FrontendRoute_Main :/ ())
jump "magic-folder browser" (FrontendRoute_MagicFolders :/ ())
jump "folder browser" (FrontendRoute_FileBrowser :/ ["foo", "bar"])
jump "magic-folder list" (FrontendRoute_MagicFolders :/ ())
jump "file browser" (FrontendRoute_FileBrowser :/ ["foo", "bar"])
jump :: (DomBuilder t m, SetRoute t r m) => T.Text -> r -> m ()
jump label route = do
......
......@@ -18,3 +18,7 @@ mainCss = $(static "main.css")
-- | The location of one of the logos for the app.
logoStacked :: T.Text
logoStacked = $(static "PrivateStorage_Logo_Stacked.svg")
-- | The location of one of the logos for the app.
logo :: T.Text
logo = $(static "PrivateStorage_Logo.svg")
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 99 99"><defs><style>.cls-1{fill:#9ba2b5;}.cls-2{fill:#38466d;}.cls-3{fill:#837dba;}.cls-4{fill:#14b1e6;}.cls-5{fill:#fdbd4e;}</style></defs><title>PrivateStorage_Logo_RGB_Brandmark</title><path class="cls-1" d="M184.5423,94.5H142.20081l-9,36,18,27-9,36H184.5423a7.15849,7.15849,0,0,0,7.15851-7.15851v-84.683A7.15847,7.15847,0,0,0,184.5423,94.5Z" transform="translate(-92.70081 -94.5)"/><path class="cls-2" d="M133.20081,130.5l9-36H99.85932a7.15848,7.15848,0,0,0-7.15851,7.15845v84.683A7.15849,7.15849,0,0,0,99.85932,193.5h42.34149l9-36Z" transform="translate(-92.70081 -94.5)"/><path class="cls-2" d="M152.523,179.1012c.10534.06506.21563.12243.32153.18664.0769.05329.14691.11554.22558.16644.25586.13819.50635.28479.753.4372.08564.04431.17786.07672.265.11841a8.89446,8.89446,0,0,0,7.99207-.11841c.24664-.15241.49713-.299.753-.4372a8.97243,8.97243,0,0,0,.22528-14.94244q-.61424-.37226-1.24323-.72174a8.82987,8.82987,0,0,0-7.72717,0q-.62934.349-1.24323.72174c-.106.06427-.21643.1217-.32183.18683-.15729.08142-.31989.1535-.4795.23083l-3.17511,12.70044A22.4683,22.4683,0,0,1,152.523,179.1012Z" transform="translate(-92.70081 -94.5)"/><path class="cls-2" d="M178.58234,136.44568c-.25586-.13818-.50635-.28479-.753-.4372a8.89426,8.89426,0,0,0-7.99212-.11834q-.62934.349-1.24323.72174c-.106.06427-.21643.1217-.32184.18683a22.6084,22.6084,0,0,1-4.26269,1.67547,22.1219,22.1219,0,0,1-12.11731,0,22.6085,22.6085,0,0,1-4.2627-1.67547c-.10541-.06513-.21582-.12256-.32184-.18683q-.61422-.37226-1.24322-.72174A8.92432,8.92432,0,0,0,142.20081,135a8.81505,8.81505,0,0,0-2.95752.51367l9.9776,14.96643a22.98752,22.98752,0,0,1,2.67127-.95428,22.1219,22.1219,0,0,1,12.11731,0,22.60416,22.60416,0,0,1,4.26269,1.67541c.10535.06507.21564.12244.32153.18665q.61414.37234,1.24311.72174a8.89389,8.89389,0,0,0,7.99255-.11816c.24664-.15235.49713-.299.753-.43714a8.98751,8.98751,0,0,0,0-15.10864Z" transform="translate(-92.70081 -94.5)"/><path class="cls-2" d="M142.20161,120.78a22.28435,22.28435,0,0,1,6.05865.84582,22.60361,22.60361,0,0,1,4.2627,1.67542c.10534.06506.21563.12244.32153.18664.0769.05329.14691.11554.22558.16645.25586.13818.50635.28479.753.43713.08545.04425.17756.07654.26453.11816a8.82951,8.82951,0,0,0,7.728,0c.087-.04162.17908-.07391.26453-.11816.24664-.15234.49713-.299.753-.43713.07867-.05091.14868-.11316.22558-.16645a8.9724,8.9724,0,0,0-.22558-14.9422c-.25586-.13818-.50635-.28479-.753-.43719a8.89433,8.89433,0,0,0-7.99213-.11835c-.0871.04169-.17938.074-.265.11835-.24664.1524-.49713.299-.753.43719-.07855.05085-.14843.113-.22528.1662-.106.06427-.21643.12171-.32183.18683a22.60785,22.60785,0,0,1-4.2627,1.67548,22.28435,22.28435,0,0,1-6.05865.84582c-.51056,0-1.01581-.0205-1.51624-.05822l-2.44775,9.79107A22.0198,22.0198,0,0,1,142.20161,120.78Z" transform="translate(-92.70081 -94.5)"/><path class="cls-3" d="M142.20167,167.22a22.284,22.284,0,0,1-6.05866-.84582,22.60749,22.60749,0,0,1-4.26269-1.67548c-.10541-.06513-.21582-.12256-.32184-.18683-.07685-.05322-.14673-.11536-.22528-.1662-.25586-.13818-.50635-.28479-.753-.43719-.08558-.04431-.17786-.07666-.265-.11835a8.82987,8.82987,0,0,0-7.72717,0c-.0871.04169-.17938.074-.26495.11835-.24665.1524-.49714.299-.753.43719-.07856.05084-.14844.113-.22529.1662a8.97244,8.97244,0,0,0,.22529,14.94244c.25585.13819.50634.28479.753.4372a8.89444,8.89444,0,0,0,7.99206.11841c.08716-.04169.17938-.0741.265-.11841.24664-.15241.49713-.299.753-.4372.07867-.0509.14868-.11315.22558-.16644.1059-.06421.21619-.12158.32154-.18664a22.60325,22.60325,0,0,1,4.26269-1.67542,22.28365,22.28365,0,0,1,6.05866-.84582c.50994,0,1.01464.0205,1.51458.05816l2.4477-9.79071A22.018,22.018,0,0,1,142.20167,167.22Z" transform="translate(-92.70081 -94.5)"/><path class="cls-4" d="M132.50953,138.47418a22.1219,22.1219,0,0,1-12.11731,0,22.6085,22.6085,0,0,1-4.2627-1.67547c-.10541-.06513-.21582-.12256-.32184-.18683q-.61422-.37226-1.24322-.72174a8.89429,8.89429,0,0,0-7.99213.11834c-.24664.15241-.49713.299-.753.4372a8.98751,8.98751,0,0,0,0,15.10864c.25586.13818.50635.28479.753.43714a8.89391,8.89391,0,0,0,7.99256.11816q.62923-.3491,1.2431-.72174c.1059-.06421.21619-.12158.32153-.18665a22.60426,22.60426,0,0,1,4.2627-1.67541,22.1219,22.1219,0,0,1,12.11731,0,22.6039,22.6039,0,0,1,4.26269,1.67541c.10535.06507.21564.12244.32154.18665q.61413.37234,1.2431.72174a8.92443,8.92443,0,0,0,3.864.89038,8.81623,8.81623,0,0,0,2.95746-.51373l-9.9776-14.96637A22.99821,22.99821,0,0,1,132.50953,138.47418Z" transform="translate(-92.70081 -94.5)"/><path class="cls-5" d="M131.88032,108.89868c-.10541-.06512-.21582-.12256-.32184-.18683-.07685-.05322-.14673-.11535-.22528-.1662-.25586-.13818-.50635-.28479-.753-.43719-.08558-.04431-.17786-.07666-.265-.11835a8.89431,8.89431,0,0,0-7.99212.11835c-.24665.1524-.49714.299-.753.43719a8.9724,8.9724,0,0,0-.22559,14.9422c.0769.05329.14691.11554.22559.16645.25585.13818.50634.28479.753.43713.08545.04425.17755.07654.26452.11816a8.82951,8.82951,0,0,0,7.728,0c.087-.04162.17908-.07391.26453-.11816.24664-.15234.49713-.299.753-.43713.07867-.05091.14868-.11316.22558-.16645.1059-.0642.21619-.12158.32154-.18664.15667-.08112.31866-.15283.47766-.22992l3.17547-12.70184A22.46568,22.46568,0,0,1,131.88032,108.89868Z" transform="translate(-92.70081 -94.5)"/></svg>
\ No newline at end of file
......@@ -48,3 +48,21 @@ main.firstRunPage button {
padding: 2em 3em;
border-radius: 1em;
}
header .ps-logo-button {
padding: 8px;
}
header .ps-logo-button img {
width: unset;
height: unset;
}
main.magic-folder-page button[aria-label="Add"] {
position: absolute;
right: 32px;
bottom: 32px;
background-color: #6200ee; /* This is our primary color. MDC default to the secondary color for FABs for some reason? */
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment