mirror of
https://github.com/Orasund/elm-ui-widgets.git
synced 2024-11-22 04:58:49 +03:00
Removed reusableView elements from layout
This commit is contained in:
parent
b17c63cfc5
commit
21f07bdfac
1
elm.json
1
elm.json
@ -11,7 +11,6 @@
|
||||
"Widget.Material.Color",
|
||||
"Widget.Customize",
|
||||
"Widget.Layout",
|
||||
"Widget.ScrollingNav",
|
||||
"Widget.Snackbar",
|
||||
"Widget.Icon"
|
||||
],
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
||||
|
@ -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
|
||||
]
|
||||
}
|
||||
|
@ -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
|
||||
}
|
@ -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
|
||||
|
@ -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
|
Loading…
Reference in New Issue
Block a user