Removed reusableView elements from layout

This commit is contained in:
Lucas Payr 2021-02-05 11:55:49 +01:00
parent b17c63cfc5
commit 21f07bdfac
8 changed files with 268 additions and 237 deletions

View File

@ -11,7 +11,6 @@
"Widget.Material.Color",
"Widget.Customize",
"Widget.Layout",
"Widget.ScrollingNav",
"Widget.Snackbar",
"Widget.Icon"
],

View File

@ -33,7 +33,6 @@ import Widget
, AppBarStyle
)
import Widget.Icon as Icon exposing (Icon)
import Widget.Layout exposing (LayoutStyle)
import Widget.Snackbar exposing (SnackbarStyle)
import Widget.Material as Material exposing (Palette)
import Widget.Material.Color as MaterialColor
@ -67,7 +66,6 @@ style palette =
, chipButton = Material.chip palette
, dialog = Material.alertDialog palette
, progressIndicator = Material.progressIndicator palette
, layout = Material.layout palette
, switch = Material.switch palette
, fullBleedDivider = Material.fullBleedDivider palette
, insetDivider = Material.insetDivider palette
@ -130,7 +128,6 @@ type alias Style msg =
, sortTable : SortTableStyle msg
, selectButton : ButtonStyle msg
, progressIndicator : ProgressIndicatorStyle msg
, layout : LayoutStyle msg
, insetDivider : ItemStyle (DividerStyle msg) msg
, middleDivider : ItemStyle (DividerStyle msg) msg
, fullBleedDivider : ItemStyle (DividerStyle msg) msg

View File

@ -18,6 +18,7 @@ import Element.Border as Border
import Material.Icons.Types exposing (Coloring(..))
import Material.Icons
import Widget.Customize as Customize
import Time
type Part
= LeftSheet
@ -110,6 +111,7 @@ type Msg
| AddSnackbar
| ShowDialog Bool
| SetSearchText String
| TimePassed Int
init : ( Model, Cmd Msg )
@ -151,10 +153,28 @@ update msg model =
( { model | searchText = maybeString}
, Cmd.none
)
TimePassed sec ->
( case model.active of
Just LeftSheet ->
model
Just RightSheet ->
model
_ ->
{ model
| snackbar = model.snackbar |> Snackbar.timePassed sec
}
, Cmd.none
)
subscriptions : Model -> Sub Msg
subscriptions _ =
Events.onResize (\h w -> Resized { height = h, width = w })
Sub.batch
[ Events.onResize (\h w -> Resized { height = h, width = w })
, Time.every 50 (always (TimePassed 50))
]
{-| You can remove the msgMapper. But by doing so, make sure to also change `msg` to `Msg` in the line below.
-}
@ -233,6 +253,7 @@ view msgMapper style {snackbar,searchText,selected, window, showDialog, active }
if
(deviceClass == Phone)
|| (deviceClass == Tablet)
|| (menu.options |> List.length) > 5
then
Widget.menuBar style.menuBar
{ title = title
@ -247,18 +268,7 @@ view msgMapper style {snackbar,searchText,selected, window, showDialog, active }
else
Widget.tabBar style.tabBar
{ title = title
, menu =
{ selected = Just selected
, options =
[ "Home", "About" ]
|> List.map
(\string ->
{ text = string
, icon = always Element.none
}
)
, onSelect = SetSelected >> msgMapper >> Just
}
, menu = menu
, deviceClass = deviceClass
, openRightSheet = Just <|msgMapper <| ChangedSidebar <| Just RightSheet
, openTopSheet = Nothing

View File

@ -9,7 +9,7 @@ import Data.Example as Example exposing (Example)
import Data.Section as Section exposing (Section(..))
import Data.Style exposing (Style)
import Data.Theme as Theme exposing (Theme(..))
import Element exposing (DeviceClass(..), Element)
import Element exposing (DeviceClass(..), Element,Attribute)
import Element.Input as Input
import FeatherIcons
import Framework
@ -23,16 +23,26 @@ import Set.Any as AnySet exposing (AnySet)
import Stateless
import Task
import Time
import Widget
import Widget exposing (Modal,TextInput)
import Widget.Icon as Icon
import Widget.Layout as Layout exposing (Layout, Part)
import Widget.Layout as Layout exposing (Part)
import Widget.ScrollingNav as ScrollingNav
import Widget.Snackbar as Snackbar exposing (Message)
import Material.Icons.Types exposing (Coloring(..))
import Material.Icons
import Widget.Material.Typography as Typography
type Part
= LeftSheet
| RightSheet
| Search
type alias LoadedModel =
{ stateless : Stateless.Model
, scrollingNav : ScrollingNav.ScrollingNav Example
, layout : Layout LoadedMsg
, snackbar : Snackbar.Snackbar (Message LoadedMsg)
, active : Maybe Part
, displayDialog : Bool
, window :
{ height : Int
@ -97,7 +107,8 @@ initialModel { viewport } =
in
( { stateless = stateless
, scrollingNav = scrollingNav
, layout = Layout.init
, snackbar = Snackbar.init
, active = Nothing
, displayDialog = False
, window =
{ width = viewport.width |> round
@ -140,6 +151,13 @@ updateLoaded msg model =
(Cmd.map StatelessSpecific)
UpdateScrollingNav fun ->
let
_ =
model.scrollingNav |> fun
|> ScrollingNav.current Example.fromString
|> Maybe.map Example.toString
|> Debug.log "section"
in
( { model | scrollingNav = model.scrollingNav |> fun }
, Cmd.none
)
@ -150,7 +168,18 @@ updateLoaded msg model =
model.search
in
( { model
| layout = model.layout |> Layout.timePassed int
| snackbar =
case model.active of
Just LeftSheet ->
model.snackbar
Just RightSheet ->
model.snackbar
_ ->
model.snackbar |> Snackbar.timePassed int
, search =
if search.remaining > 0 then
if search.remaining <= int then
@ -173,23 +202,25 @@ updateLoaded msg model =
AddSnackbar ( string, bool ) ->
( { model
| layout =
model.layout
|> Layout.queueMessage
{ text = string
, button =
if bool then
Just
{ text = "Add"
, onPress =
Just <|
AddSnackbar ( "This is another message", False )
}
| snackbar =
model.snackbar
|> Snackbar.insert
{ text = string
, button =
if bool then
Just
{ text = "Add"
, onPress =
Just <|
AddSnackbar ( "This is another message", False )
}
else
Nothing
}
}
else
Nothing
}
}
, Cmd.none
)
@ -204,7 +235,7 @@ updateLoaded msg model =
)
ChangedSidebar sidebar ->
( { model | layout = model.layout |> Layout.activate sidebar }
( { model | active = sidebar }
, Cmd.none
)
@ -212,12 +243,19 @@ updateLoaded msg model =
( model, Navigation.load string )
JumpTo section ->
let
_ =
section
|> Example.toString
|> Debug.log "section"
in
( model
, model.scrollingNav
|> ScrollingNav.jumpTo
{ section = section
, onChange = always Idle
}
)
ChangedSearch string ->
@ -298,87 +336,179 @@ view model =
in
Html.map LoadedSpecific <|
Element.layout
(Layout.view style.layout
{ dialog =
if m.displayDialog then
{ text = "This is a dialog window"
, title = Just "Dialog"
, accept =
Just
{ text = "Ok"
, onPress = Just <| ToggleDialog False
}
, dismiss =
Just
{ text = "Dismiss"
, onPress = Just <| ToggleDialog False
}
}
|> Widget.dialog style.dialog
|> Just
else
Nothing
, layout = m.layout
, window = m.window
, menu =
m.scrollingNav
|> ScrollingNav.toSelect
(\int ->
m.scrollingNav.arrangement
|> Array.fromList
|> Array.get int
|> Maybe.map JumpTo
)
, actions =
[ { onPress = Just <| Load "https://package.elm-lang.org/packages/Orasund/elm-ui-widgets/latest/"
, text = "Docs"
, icon = FeatherIcons.book |> Icon.elmFeather FeatherIcons.toHtml
}
, { onPress = Just <| Load "https://github.com/Orasund/elm-ui-widgets"
, text = "Github"
, icon = FeatherIcons.github |> Icon.elmFeather FeatherIcons.toHtml
}
, { onPress =
if m.theme /= Material then
Just <| SetTheme <| Material
else
Nothing
, text = "Material Theme"
, icon = FeatherIcons.penTool |> Icon.elmFeather FeatherIcons.toHtml
}
, { onPress =
if m.theme /= DarkMaterial then
Just <| SetTheme <| DarkMaterial
else
Nothing
, text = "Dark Material Theme"
, icon = FeatherIcons.penTool |> Icon.elmFeather FeatherIcons.toHtml
}
]
, onChangedSidebar = ChangedSidebar
, title =
"Elm-Ui-Widgets"
|> Element.text
|> Element.el Heading.h1
, search =
Just
{ chips = []
, text = m.search.raw
, onChange = ChangedSearch
, label = "Search"
, placeholder =
Just <|
Input.placeholder [] <|
Element.text "Search Widgets..."
}
}
)
(viewLayout identity style m)
<|
viewLoaded m
viewLayout : (LoadedMsg -> LoadedMsg) -> Style LoadedMsg -> LoadedModel -> List (Attribute LoadedMsg)
viewLayout msgMapper style model =
let
deviceClass : DeviceClass
deviceClass =
Layout.getDeviceClass model.window
dialog : Maybe (Modal LoadedMsg)
dialog =
Nothing
onChangedSidebar =
ChangedSidebar
menu =
model.scrollingNav
|> ScrollingNav.toSelect
(\int ->
model.scrollingNav.arrangement
|> Array.fromList
|> Array.get int
|> Maybe.map JumpTo
)
actions =
[ { onPress = Just <| Load "https://package.elm-lang.org/packages/Orasund/elm-ui-widgets/latest/"
, text = "Docs"
, icon = FeatherIcons.book |> Icon.elmFeather FeatherIcons.toHtml
}
, { onPress = Just <| Load "https://github.com/Orasund/elm-ui-widgets"
, text = "Github"
, icon = FeatherIcons.github |> Icon.elmFeather FeatherIcons.toHtml
}
, { onPress =
if model.theme /= Material then
Just <| SetTheme <| Material
else
Nothing
, text = "Material Theme"
, icon = FeatherIcons.penTool |> Icon.elmFeather FeatherIcons.toHtml
}
, { onPress =
if model.theme /= DarkMaterial then
Just <| SetTheme <| DarkMaterial
else
Nothing
, text = "Dark Material Theme"
, icon = FeatherIcons.penTool |> Icon.elmFeather FeatherIcons.toHtml
}
]
{ primaryActions, moreActions } =
Layout.partitionActions actions
title =
"Elm-Ui-Widgets"
|> Element.text
|> Element.el (Typography.h6 ++ [ Element.paddingXY 8 0 ])
search : TextInput LoadedMsg
search =
{ chips = []
, text = model.search.raw
, placeholder = Just <|
Input.placeholder [] <|
Element.text "Search Widgets..."
, label = "Search"
, onChange = ChangedSearch >> msgMapper
}
nav : Element LoadedMsg
nav =
if
(deviceClass == Phone)
|| (deviceClass == Tablet)
|| (menu.options |> List.length) > 5
then
Widget.menuBar style.menuBar
{ title = title
, deviceClass = deviceClass
, openLeftSheet = Just <| msgMapper <| ChangedSidebar <| Just LeftSheet
, openRightSheet = Just <| msgMapper <| ChangedSidebar <| Just RightSheet
, openTopSheet = Just <| msgMapper <| ChangedSidebar <| Just Search
, primaryActions = primaryActions
, search = Just search
}
else
Widget.tabBar style.tabBar
{ title = title
, menu = menu
, deviceClass = deviceClass
, openRightSheet = Just <|msgMapper <| ChangedSidebar <| Just RightSheet
, openTopSheet = Nothing
, primaryActions = primaryActions
, search = Just search
}
snackbarElem : Element LoadedMsg
snackbarElem =
model.snackbar
|> Snackbar.view style.snackbar identity
|> Maybe.map
(Element.el
[ Element.padding 8
, Element.alignBottom
, Element.alignRight
]
)
|> Maybe.withDefault Element.none
onDismiss =
Nothing
|> ChangedSidebar
|> msgMapper
modals =
Layout.orderModals
{ dialog = dialog
, leftSheet =
if model.active == Just LeftSheet then
Layout.leftSheet
{ button = style.sheetButton
, sheet = style.sideSheet
}
{ title = title
, menu = menu
, onDismiss = onDismiss
}
|> Just
else
Nothing
, rightSheet =
if model.active == Just RightSheet then
Layout.rightSheet
{ sheet = style.sideSheet
, insetItem = style.insetItem
}
{ onDismiss = onDismiss
, moreActions =moreActions
}
|> Just
else
Nothing
, topSheet =
if model.active == Just Search then
Layout.searchSheet style.searchFill
{ search = search
, onDismiss = onDismiss
}
|> Just
else
Nothing
, bottomSheet = Nothing
}
in
List.concat
[ style.container
, [ Element.inFront snackbarElem
, Element.inFront nav
]
, modals
|> Widget.singleModal
]
viewLoaded : LoadedModel -> Element LoadedMsg
viewLoaded m =
@ -493,13 +623,7 @@ viewLoaded m =
|> Element.column (Grid.section ++ [ Element.centerX ])
)
)
|> Element.column (Framework.container ++ style.layout.container)
, Html.node "link"
[ Attributes.rel "stylesheet"
, Attributes.href "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
]
[]
|> Element.html
|> Element.column (Framework.container ++ style.container)
]
|> Element.column Grid.compact

View File

@ -36,7 +36,7 @@ snackbar style addSnackbar =
)
scrollingNavCard : Style msg -> ( String, Element msg, List (Element msg) )
{--scrollingNavCard : Style msg -> ( String, Element msg, List (Element msg) )
scrollingNavCard _ =
( "Scrolling Nav"
, Element.text "Resize the screen and open the side-menu. Then start scrolling to see the scrolling navigation in action."
@ -44,17 +44,7 @@ scrollingNavCard _ =
|> Element.paragraph []
, []
)
layout : Style msg -> ( String, Element msg, List (Element msg) )
layout _ =
( "Layout"
, Element.text "The layout combines the menu bar, both side bar, the dialog window and the snackbar. Try using all of them and also try resizing the window to see how they interact with each other."
|> List.singleton
|> Element.paragraph []
, []
)
-}
view :
{ theme : Theme
@ -74,7 +64,6 @@ view { theme, addSnackbar } =
, description = "Reusable views have an internal state but no update function. You will need to do some wiring, but nothing complicated."
, items =
[ snackbar style addSnackbar
, scrollingNavCard style
, layout style
--, scrollingNavCard style
]
}

View File

@ -1,47 +0,0 @@
module Internal.Material.Layout exposing (layout)
import Element
import Element.Background as Background
import Element.Border as Border
import Element.Font as Font
import Internal.Button exposing (ButtonStyle)
import Internal.Material.AppBar as AppBar
import Internal.Material.Button as Button
import Internal.Material.Icon as Icon
import Internal.Material.Item as Item
import Internal.Material.Palette exposing (Palette)
import Internal.Material.Sheet as Sheet
import Internal.Material.Snackbar as Snackbar
import Internal.Material.TextInput as TextInput
import Svg
import Svg.Attributes
import Widget.Customize as Customize
import Widget.Icon as Icon exposing (Icon)
import Widget.Layout exposing (LayoutStyle)
import Widget.Material.Color as MaterialColor
import Widget.Material.Typography as Typography
layout : Palette -> LayoutStyle msg
layout palette =
{ container =
(palette.background |> MaterialColor.textAndBackground)
++ [ Font.family
[ Font.typeface "Roboto"
, Font.sansSerif
]
, Font.size 16
, Font.letterSpacing 0.5
]
, menuBar = AppBar.menuBar palette
, tabBar = AppBar.tabBar palette
, snackbar = Snackbar.snackbar palette
, sheetButton = Item.selectItem palette
, sheet = Sheet.sideSheet palette
, spacing = 8
, title = Typography.h6 ++ [ Element.paddingXY 8 0 ]
, searchFill =
TextInput.textInputBase palette
|> Customize.elementRow [ Element.height <| Element.px 56 ]
, insetItem = Item.insetItem palette
}

View File

@ -1,5 +1,5 @@
module Widget.Layout exposing
( LayoutStyle, Layout, Part, init, timePassed
( Part, timePassed
, activate, queueMessage
, leftSheet, rightSheet, searchSheet
, getDeviceClass, partitionActions, orderModals
@ -19,7 +19,7 @@ It is responsive and changes view to apply to the [material design guidelines](h
# Basics
@docs LayoutStyle, Layout, Part, init, timePassed
@docs Layout, Part, timePassed
# Actions
@ -29,6 +29,7 @@ It is responsive and changes view to apply to the [material design guidelines](h
# Views
## Sheets
@docs leftSheet, rightSheet, searchSheet
@ -98,15 +99,6 @@ type alias Layout msg =
}
{-| The initial state of the layout
-}
init : Layout msg
init =
{ snackbar = Snackbar.init
, active = Nothing
}
{-| Queues a message and displayes it as a snackbar once no other snackbar is visible.
-}
queueMessage : Message msg -> Layout msg -> Layout msg
@ -343,13 +335,14 @@ view style { search, title, onChangedSidebar, menu, actions, window, dialog, lay
AppBar.menuBar style.menuBar
{ title = title
, deviceClass = deviceClass
, openLeftSheet = Just <|onChangedSidebar <| Just LeftSheet
, openRightSheet =
, openLeftSheet = Just <| onChangedSidebar <| Just LeftSheet
, openRightSheet =
if moreActions |> List.isEmpty then
Nothing
else
Just <| onChangedSidebar <| Just RightSheet
, openTopSheet = Just <|onChangedSidebar <| Just Search
, openTopSheet = Just <| onChangedSidebar <| Just Search
, primaryActions = primaryActions
, search = search
}
@ -359,9 +352,10 @@ view style { search, title, onChangedSidebar, menu, actions, window, dialog, lay
{ title = title
, menu = menu
, deviceClass = deviceClass
, openRightSheet =
, openRightSheet =
if moreActions |> List.isEmpty then
Nothing
else
Just <| onChangedSidebar <| Just RightSheet
, openTopSheet = Just <| onChangedSidebar <| Just Search

View File

@ -16,7 +16,6 @@ module Widget.Material exposing
, sortTable
, snackbar
, tab, tabButton
, layout
)
{-| ![Example using the Material Design style](https://orasund.github.io/elm-ui-widgets/assets/material-style.png)
@ -122,10 +121,6 @@ You way want to use special items to visually organize the content of your list.
@docs tab, tabButton
# Layout
@docs layout
# Advanced
@ -156,7 +151,6 @@ import Internal.Material.Button as Button
import Internal.Material.Chip as Chip
import Internal.Material.Dialog as Dialog
import Internal.Material.Item as Item
import Internal.Material.Layout as Layout
import Internal.Material.List as List
import Internal.Material.Palette as Palette
import Internal.Material.ProgressIndicator as ProgressIndicator
@ -173,7 +167,6 @@ import Internal.Switch exposing (SwitchStyle)
import Internal.Tab exposing (TabStyle)
import Internal.TextInput exposing (TextInputStyle)
import Widget.Icon exposing (Icon)
import Widget.Layout exposing (LayoutStyle)
import Widget.Snackbar exposing (SnackbarStyle)
@ -603,32 +596,4 @@ tabButton =
-}
tab : Palette -> TabStyle msg
tab =
Tab.tab
{-------------------------------------------------------------------------------
-- L A Y O U T
-------------------------------------------------------------------------------}
{-| The Layout Widget combines the following Material design concepts:
- Top bar
- Navigation drawer
- Side Sheet
- Dialog
- Snackbar
Future updates might try to seperate them into there own widgets.
But for now they are only available as an all-in-one solution.
Technical Remark:
- The Icons are taken from [danmarcab/material-icons](https://dark.elm.dmy.fr/packages/danmarcab/material-icons/latest/).
- The drawer button as not taken from the specification (This will been to be added later)
-}
layout : Palette -> LayoutStyle msg
layout =
Layout.layout
Tab.tab