Merge pull request #9 from abadi199/remove-elm-ui

Remove elm ui

elm.json

@@ -1,40 +1,37 @@
 {
-    "type": "application",
-    "source-directories": [
-        "src/client"
-    ],
-    "elm-version": "0.19.0",
-    "dependencies": {
-        "direct": {
-            "Fresheyeball/elm-return": "7.0.0",
-            "Skinney/murmur3": "2.0.8",
-            "elm/browser": "1.0.1",
-            "elm/bytes": "1.0.8",
-            "elm/core": "1.0.2",
-            "elm/file": "1.0.4",
-            "elm/html": "1.0.0",
-            "elm/http": "2.0.0",
-            "elm/json": "1.1.3",
-            "elm/parser": "1.1.0",
-            "elm/svg": "1.0.1",
-            "elm/url": "1.0.0",
-            "ivadzy/bbase64": "1.1.0",
-            "mdgriffith/elm-ui": "1.1.0",
-            "rtfeldman/elm-css": "15.1.0"
-        },
-        "indirect": {
-            "elm/regex": "1.0.0",
-            "elm/time": "1.0.0",
-            "elm/virtual-dom": "1.0.2",
-            "rtfeldman/elm-hex": "1.0.0"
-        }
+  "type": "application",
+  "source-directories": ["src/client"],
+  "elm-version": "0.19.0",
+  "dependencies": {
+    "direct": {
+      "Fresheyeball/elm-return": "7.0.0",
+      "Skinney/murmur3": "2.0.8",
+      "elm/browser": "1.0.1",
+      "elm/bytes": "1.0.8",
+      "elm/core": "1.0.2",
+      "elm/file": "1.0.4",
+      "elm/html": "1.0.0",
+      "elm/http": "2.0.0",
+      "elm/json": "1.1.3",
+      "elm/parser": "1.1.0",
+      "elm/svg": "1.0.1",
+      "elm/url": "1.0.0",
+      "ivadzy/bbase64": "1.1.0",
+      "rtfeldman/elm-css": "15.1.0"
     },
-    "test-dependencies": {
-        "direct": {
-            "elm-explorations/test": "1.2.1"
-        },
-        "indirect": {
-            "elm/random": "1.0.0"
-        }
+    "indirect": {
+      "elm/regex": "1.0.0",
+      "elm/time": "1.0.0",
+      "elm/virtual-dom": "1.0.2",
+      "rtfeldman/elm-hex": "1.0.0"
     }
+  },
+  "test-dependencies": {
+    "direct": {
+      "elm-explorations/test": "1.2.1"
+    },
+    "indirect": {
+      "elm/random": "1.0.0"
+    }
+  }
 }

src/client/Assets.elm

@@ -0,0 +1,5 @@
+module Assets exposing (Assets)
+
+
+type alias Assets =
+    { logo : String, logoText : String, menuIcon : String }

src/client/Main.elm

@@ -1,12 +1,13 @@
 module Main exposing (main)
 
+import Assets exposing (Assets)
 import Browser
 import Browser.Dom exposing (Viewport)
 import Browser.Events
 import Browser.Navigation as Nav
-import Element as E
 import Entity.Category exposing (Category)
-import Html exposing (..)
+import Html
+import Html.Styled as H exposing (..)
 import Page.ByCategory as ByCategoryPage
 import Page.Home as HomePage
 import Page.Problem as ProblemPage
@@ -17,14 +18,11 @@ import ReloadableData exposing (ReloadableWebData)
 import Return
 import Task
 import UI.Layout
-import UI.Nav.Side
-import UI.Parts.Dialog as Dialog
-import UI.Parts.Search
 import Url
 import Url.Parser as Parser exposing ((</>), Parser, int, oneOf, s, top)
 
 
-main : Program () Model Msg
+main : Program Assets Model Msg
 main =
     Browser.application
         { init = init
@@ -45,7 +43,8 @@ type alias Model =
     , page : Page
     , favoriteCategories : ReloadableWebData () (List Category)
     , viewport : Viewport
-    , searchText : String
+    , assets : Assets
+    , layoutState : UI.Layout.State Msg
     }
 
 
@@ -59,8 +58,8 @@ type Page
     | Problem String
 
 
-init : () -> Url.Url -> Nav.Key -> ( Model, Cmd Msg )
-init _ url key =
+init : Assets -> Url.Url -> Nav.Key -> ( Model, Cmd Msg )
+init assets url key =
     let
         ( model, cmd ) =
             stepUrl url
@@ -71,7 +70,8 @@ init _ url key =
                     { scene = { width = 0, height = 0 }
                     , viewport = { x = 0, y = 0, width = 0, height = 0 }
                     }
-                , searchText = ""
+                , assets = assets
+                , layoutState = UI.Layout.initialState
                 }
     in
     ( model
@@ -131,11 +131,11 @@ view : Model -> Browser.Document Msg
 view model =
     case model.page of
         Home homeModel ->
-            HomePage.view model.key model.favoriteCategories homeModel
+            HomePage.view model homeModel
                 |> mapPage (PageMsg << HomeMsg)
 
         Publication publicationModel ->
-            PublicationPage.view model.favoriteCategories publicationModel
+            PublicationPage.view model publicationModel
                 |> mapPage (PageMsg << PublicationMsg)
 
         Read readModel ->
@@ -146,22 +146,22 @@ view model =
             ProblemPage.view text
 
         ByMediaType ->
-            UI.Layout.withSideNav
-                { title = "Pustaka - Browse By Media Type"
-                , sideNav =
-                    model.favoriteCategories
-                        |> UI.Nav.Side.view (always NoOp) UI.Nav.Side.BrowseByMediaType
-                        |> UI.Nav.Side.withSearch (UI.Parts.Search.view (always NoOp) model.searchText)
-                , content = E.none
-                , dialog = Dialog.none
+            UI.Layout.withNav
+                { key = model.key
+                , title = "Pustaka - Browse By Media Type"
+                , assets = model.assets
+                , content = text "WIP"
+                , categories = model.favoriteCategories
+                , state = model.layoutState
+                , onStateChange = \_ _ -> NoOp
                 }
 
         ByCategory byCategoryModel ->
-            ByCategoryPage.view model.key model.favoriteCategories byCategoryModel
+            ByCategoryPage.view model byCategoryModel
                 |> mapPage (PageMsg << ByCategoryMsg)
 
         PublicationEdit pageModel ->
-            PublicationEditPage.view model.favoriteCategories pageModel
+            PublicationEditPage.view model pageModel
                 |> mapPage (PageMsg << PublicationEditMsg)
 
 

src/client/Page/ByCategory.elm

@@ -6,21 +6,16 @@ module Page.ByCategory exposing
     , view
     )
 
+import Assets exposing (Assets)
 import Browser
 import Browser.Navigation as Nav
-import Element as E exposing (..)
 import Entity.Category exposing (Category)
+import Html.Styled as H exposing (..)
 import ReloadableData exposing (ReloadableWebData)
 import Route
-import Set
-import UI.Css.Basics
-import UI.Css.Color
 import UI.Icon as Icon
 import UI.Layout
 import UI.Link as UI
-import UI.Nav.Side
-import UI.Parts.Dialog as Dialog
-import UI.Parts.Search
 import UI.ReloadableData
 
 
@@ -31,15 +26,15 @@ import UI.ReloadableData
 type alias Model =
     { categories : ReloadableWebData () (List Category)
     , selectedCategoryId : Maybe Int
-    , searchText : String
+    , layoutState : UI.Layout.State Msg
     }
 
 
 init : Maybe Int -> ( Model, Cmd Msg )
 init selectedCategoryId =
     ( { categories = ReloadableData.Loading ()
       , selectedCategoryId = selectedCategoryId
-      , searchText = ""
+      , layoutState = UI.Layout.initialState
       }
     , Entity.Category.list LoadCategoryCompleted
     )
@@ -53,51 +48,52 @@ type Msg
     = NoOp
     | MenuItemClicked String
     | LoadCategoryCompleted (ReloadableWebData () (List Category))
+    | LayoutStateChanged (UI.Layout.State Msg) (Cmd Msg)
 
 
 
 -- VIEW
 
 
-view : Nav.Key -> ReloadableWebData () (List Category) -> Model -> Browser.Document Msg
-view key categories model =
-    UI.Layout.withSideNav
-        { title = "Pustaka - Browse By Category"
-        , sideNav =
-            categories
-                |> UI.Nav.Side.view MenuItemClicked UI.Nav.Side.BrowseByCategory
-                |> UI.Nav.Side.withSearch (UI.Parts.Search.view (always NoOp) model.searchText)
+view : { a | key : Nav.Key, assets : Assets, favoriteCategories : ReloadableWebData () (List Category) } -> Model -> Browser.Document Msg
+view { key, assets, favoriteCategories } model =
+    UI.Layout.withNav
+        { key = key
+        , title = "Pustaka - Browse By Category"
+        , assets = assets
         , content = categorySliderView key model
-        , dialog = Dialog.none
+        , categories = favoriteCategories
+        , state = model.layoutState
+        , onStateChange = LayoutStateChanged
         }
 
 
-categorySliderView : Nav.Key -> Model -> Element Msg
+categorySliderView : Nav.Key -> Model -> Html Msg
 categorySliderView key model =
-    el
+    div
         []
-        (row
+        [ div
             []
             (UI.ReloadableData.view (categoriesView key model) model.categories
                 :: [ UI.link
                         []
                         { msg = MenuItemClicked
                         , url = ""
                         , label =
-                            row
+                            div
                                 []
                                 [ Icon.expandMore Icon.small
                                 , text "All Categories"
                                 ]
                         }
                    ]
             )
-        )
+        ]
 
 
-categoriesView : Nav.Key -> Model -> List Category -> Element Msg
+categoriesView : Nav.Key -> Model -> List Category -> Html Msg
 categoriesView key model categories =
-    row
+    div
         []
         (categoryView key model "All" Nothing
             :: (categories
@@ -107,10 +103,10 @@ categoriesView key model categories =
         )
 
 
-categoryView : Nav.Key -> Model -> String -> Maybe Int -> Element Msg
+categoryView : Nav.Key -> Model -> String -> Maybe Int -> Html Msg
 categoryView key model categoryName maybeCategoryId =
-    el []
-        (case maybeCategoryId of
+    div []
+        [ case maybeCategoryId of
             Just categoryId ->
                 UI.link
                     []
@@ -126,7 +122,7 @@ categoryView key model categoryName maybeCategoryId =
                     , url = Route.browseByCategoryUrl
                     , label = text categoryName
                     }
-        )
+        ]
 
 
 
@@ -144,3 +140,6 @@ update key msg model =
 
         LoadCategoryCompleted categories ->
             ( { model | categories = categories }, Cmd.none )
+
+        LayoutStateChanged layoutState cmd ->
+            ( { model | layoutState = layoutState }, cmd )