From e8b899051933e46c86327695eb2e75f67e10396b Mon Sep 17 00:00:00 2001 From: Lucas Payr Date: Wed, 9 Jun 2021 15:38:38 +0200 Subject: [PATCH] Clean Up before merge --- explorer/src/Main.elm | 4 +- explorer/src/Page.elm | 4 +- explorer/src/Page/{Layout.elm => AppBar.elm} | 28 +-- explorer/src/Page/Button.elm | 2 +- explorer/src/Page/Dialog.elm | 8 +- explorer/src/Page/Icon.elm | 67 +++--- explorer/src/Page/Item.elm | 185 +++++++++++++--- explorer/src/Page/Modal.elm | 7 +- explorer/src/Page/MultiSelect.elm | 56 ++--- explorer/src/Page/ProgressIndicator.elm | 25 +-- explorer/src/UIExplorer.elm | 219 ++++++++++--------- explorer/src/UIExplorer/Tile.elm | 5 +- 12 files changed, 350 insertions(+), 260 deletions(-) rename explorer/src/Page/{Layout.elm => AppBar.elm} (96%) diff --git a/explorer/src/Main.elm b/explorer/src/Main.elm index 4a97d65..5ecee40 100644 --- a/explorer/src/Main.elm +++ b/explorer/src/Main.elm @@ -1,11 +1,11 @@ module Main exposing (main) import Element +import Page.AppBar import Page.Button import Page.Dialog import Page.Icon import Page.Item -import Page.Layout import Page.Modal import Page.MultiSelect import Page.PasswordInput @@ -32,7 +32,7 @@ pages = |> UIExplorer.nextPage "Item" Page.Item.page |> UIExplorer.nextPage "ProgressIndicator" Page.ProgressIndicator.page |> UIExplorer.nextPage "Modal" Page.Modal.page - |> UIExplorer.nextPage "Layout" Page.Layout.page + |> UIExplorer.nextPage "App Bar" Page.AppBar.page |> UIExplorer.nextPage "Icon" Page.Icon.page |> UIExplorer.nextPage "Dialog" Page.Dialog.page diff --git a/explorer/src/Page.elm b/explorer/src/Page.elm index 65cf080..ae69f41 100644 --- a/explorer/src/Page.elm +++ b/explorer/src/Page.elm @@ -19,7 +19,7 @@ create : , book : Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) () , demo : Tile model msg () } - -> Page ( ( ( (), () ), ( StorySelectorModel, () ) ), model ) (TileMsg (TileMsg (TileMsg () msg1) (TileMsg StorySelectorMsg ())) msg) () + -> Page ( ( ( (), () ), model ), ( StorySelectorModel, () ) ) (TileMsg (TileMsg (TileMsg () msg1) msg) (TileMsg StorySelectorMsg ())) () create config = Tile.static [] (\_ _ -> @@ -29,8 +29,8 @@ create config = |> Element.column [ Element.spacing 32 ] ) |> Tile.first - |> Tile.nextGroup config.book |> Tile.next config.demo + |> Tile.nextGroup config.book |> Tile.page diff --git a/explorer/src/Page/Layout.elm b/explorer/src/Page/AppBar.elm similarity index 96% rename from explorer/src/Page/Layout.elm rename to explorer/src/Page/AppBar.elm index 8a87c0c..b872b24 100644 --- a/explorer/src/Page/Layout.elm +++ b/explorer/src/Page/AppBar.elm @@ -1,12 +1,10 @@ -module Page.Layout exposing (page) +module Page.AppBar exposing (page) {-| This is an example Page. If you want to add your own pages, simple copy and modify this one. -} -import Browser import Browser.Events as Events -import Element exposing (Attribute, DeviceClass(..), Element) -import Element.Background as Background +import Element exposing (DeviceClass(..), Element) import Element.Border as Border import Element.Font as Font import Material.Icons as MaterialIcons @@ -15,39 +13,27 @@ import Page import Time import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg) import UIExplorer.Tile as Tile exposing (Context, Tile, TileMsg) -import Widget - exposing - ( AppBarStyle - , ButtonStyle - , ColumnStyle - , DialogStyle - , InsetItemStyle - , ItemStyle - , Modal - , TextInput - , TextInputStyle - ) -import Widget.Customize as Customize -import Widget.Icon as Icon exposing (Icon) +import Widget exposing (Modal, TextInput) +import Widget.Icon as Icon import Widget.Layout as Layout import Widget.Material as Material import Widget.Material.Color as MaterialColor import Widget.Material.Typography as Typography -import Widget.Snackbar as Snackbar exposing (Snackbar, SnackbarStyle) +import Widget.Snackbar as Snackbar exposing (Snackbar) {-| The title of this page -} title : String title = - "Button" + "App Bar" {-| The description. I've taken this description directly from the [Material-UI-Specification](https://material.io/components/buttons) -} description : String description = - "Buttons allow users to take actions, and make choices, with a single tap." + "The top app bar displays information and actions relating to the current screen." {-| List of view functions. Essentially, anything that takes a Button as input. diff --git a/explorer/src/Page/Button.elm b/explorer/src/Page/Button.elm index 70d7a66..240afc9 100644 --- a/explorer/src/Page/Button.elm +++ b/explorer/src/Page/Button.elm @@ -92,7 +92,7 @@ book = [ ( "Outlined", Material.outlinedButton ) , ( "Text", Material.textButton ) , ( "Chip", Material.chip ) - , ( "IconButton", Material.iconButton) + , ( "IconButton", Material.iconButton ) ] ) --Changing the text of the label diff --git a/explorer/src/Page/Dialog.elm b/explorer/src/Page/Dialog.elm index 5fa842e..3a3040b 100644 --- a/explorer/src/Page/Dialog.elm +++ b/explorer/src/Page/Dialog.elm @@ -3,21 +3,15 @@ module Page.Dialog exposing (page) {-| This is an example Page. If you want to add your own pages, simple copy and modify this one. -} -import Browser import Element exposing (Element) -import Element.Background as Background -import FeatherIcons import Material.Icons as MaterialIcons import Material.Icons.Types exposing (Coloring(..)) import Page import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg) import UIExplorer.Tile as Tile exposing (Context, Tile, TileMsg) -import Widget exposing (ButtonStyle, DialogStyle) -import Widget.Customize as Customize +import Widget import Widget.Icon as Icon import Widget.Material as Material -import Widget.Material.Color as MaterialColor -import Widget.Material.Typography as Typography {-| The title of this page diff --git a/explorer/src/Page/Icon.elm b/explorer/src/Page/Icon.elm index bf8edd9..8c794fd 100644 --- a/explorer/src/Page/Icon.elm +++ b/explorer/src/Page/Icon.elm @@ -4,9 +4,7 @@ module Page.Icon exposing (page) -} import Ant.Icons.Svg -import Browser import Element exposing (Element) -import Element.Background as Background import FeatherIcons import FontAwesome.Solid import FontAwesome.Svg @@ -17,13 +15,10 @@ import Material.Icons.Action import Material.Icons.Types exposing (Coloring(..)) import Octicons import Page -import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg) -import UIExplorer.Tile as Tile exposing (Context, Tile, TileMsg) -import Widget exposing (ButtonStyle, RowStyle) -import Widget.Customize as Customize +import UIExplorer.Tile as Tile exposing (Context, Tile) +import Widget import Widget.Icon import Widget.Material as Material -import Widget.Material.Color as MaterialColor import Widget.Material.Typography as Typography import Zondicons @@ -43,8 +38,6 @@ description = - - {- This next section is essentially just a normal Elm program. -} -------------------------------------------------------------------------------- -- Interactive Demonstration @@ -86,51 +79,51 @@ view : Context -> Model -> Element Msg view { palette } () = [ ( Material.Icons.done |> Widget.Icon.elmMaterialIcons Color - , "elm-material-icons" - ) - , ( Material.Icons.Action.done + , "elm-material-icons" + ) + , ( Material.Icons.Action.done |> Widget.Icon.materialIcons - , "material-icons" - ) - , ( FeatherIcons.check + , "material-icons" + ) + , ( FeatherIcons.check |> Widget.Icon.elmFeather FeatherIcons.toHtml - , "elm-feather" - ) - , ( FontAwesome.Solid.check + , "elm-feather" + ) + , ( FontAwesome.Solid.check |> Widget.Icon.elmFontawesome FontAwesome.Svg.viewIcon - , "elm-fontawesome" - ) - , ( Ionicon.checkmark + , "elm-fontawesome" + ) + , ( Ionicon.checkmark |> Widget.Icon.elmIonicons - , "elm-ionicons" - ) - , ( Octicons.check + , "elm-ionicons" + ) + , ( Octicons.check |> Widget.Icon.elmOcticons { withSize = Octicons.size , withColor = Octicons.color , defaultOptions = Octicons.defaultOptions } - , "elm-octicons" - ) - , ( Heroicons.Solid.check + , "elm-octicons" + ) + , ( Heroicons.Solid.check |> Widget.Icon.elmHeroicons - , "elm-heroicons" - ) - , ( Ant.Icons.Svg.checkOutlined + , "elm-heroicons" + ) + , ( Ant.Icons.Svg.checkOutlined |> Widget.Icon.antDesignIconsElm - , "ant-design-icons-elm" - ) - , ( Zondicons.checkmark + , "ant-design-icons-elm" + ) + , ( Zondicons.checkmark |> Widget.Icon.elmZondicons - , "elm-zondicons" - ) - ] + , "elm-zondicons" + ) + ] |> List.map (\( icon, text ) -> Widget.button (Material.containedButton palette) { text = text , icon = icon - , onPress = Just () + , onPress = Just () } ) |> Element.wrappedRow [ Element.spacing 10 ] diff --git a/explorer/src/Page/Item.elm b/explorer/src/Page/Item.elm index 0e85879..d2e1b0c 100644 --- a/explorer/src/Page/Item.elm +++ b/explorer/src/Page/Item.elm @@ -1,18 +1,16 @@ -module Page.Item exposing (page) +module Page.Item exposing (page, update) {-| This is an example Page. If you want to add your own pages, simple copy and modify this one. -} -import Browser import Element exposing (Element) -import Element.Background as Background +import Element.Font as Font import Material.Icons as MaterialIcons import Material.Icons.Types exposing (Coloring(..)) import Page import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg) import UIExplorer.Tile as Tile exposing (Context, Tile, TileMsg) -import Widget exposing (ButtonStyle, ColumnStyle, HeaderStyle, InsetItemStyle, ItemStyle) -import Widget.Customize as Customize +import Widget import Widget.Icon as Icon import Widget.Material as Material import Widget.Material.Color as MaterialColor @@ -540,26 +538,36 @@ selectItemBook = -------------------------------------------------------------------------------- -type Model - = IsEnabled Bool +type alias Model = + { isEnabled : Bool + , isExpanded : Bool + } type Msg = ToggleModal Bool + | ToogleExpand Bool init : ( Model, Cmd Msg ) init = - ( IsEnabled True + ( { isEnabled = True + , isExpanded = False + } , Cmd.none ) update : Msg -> Model -> ( Model, Cmd Msg ) -update msg _ = +update msg model = case msg of ToggleModal bool -> - ( IsEnabled bool + ( { model | isEnabled = bool } + , Cmd.none + ) + + ToogleExpand bool -> + ( { model | isExpanded = bool } , Cmd.none ) @@ -572,43 +580,148 @@ subscriptions _ = {-| You can remove the msgMapper. But by doing so, make sure to also change `msg` to `Msg` in the line below. -} view : Context -> Model -> Element Msg -view { palette } (IsEnabled isEnabled) = +view { palette } model = Widget.button (Material.containedButton palette) { text = "Show Sheet" , icon = MaterialIcons.visibility |> Icon.elmMaterialIcons Color , onPress = ToggleModal True |> Just } |> Element.el - ([ Element.height <| Element.minimum 200 <| Element.fill + ([ Element.height <| Element.minimum 800 <| Element.fill , Element.width <| Element.minimum 400 <| Element.fill ] - ++ (if isEnabled then + ++ (if model.isEnabled then { content = - [ "Menu" - |> Element.text - |> Element.el Typography.h6 - |> Widget.asItem - , Widget.insetItem (Material.insetItem palette) - { onPress = Just <| ToggleModal False - , icon = - MaterialIcons.change_history - |> Icon.elmMaterialIcons Color - , text = "Home" + [ [ "Section 1" + |> Widget.headerItem (Material.fullBleedHeader palette) + , Widget.asItem <| Element.text <| "Custom Item" + , Widget.divider (Material.middleDivider palette) + , Widget.fullBleedItem (Material.fullBleedItem palette) + { onPress = Nothing + , icon = + \_ -> + Element.none + , text = "Full Bleed Item" + } + , "Section 2" + |> Widget.headerItem (Material.fullBleedHeader palette) + , Widget.insetItem (Material.insetItem palette) + { onPress = Nothing + , icon = + MaterialIcons.change_history + |> Icon.elmMaterialIcons Color + , text = "Item with Icon" + , content = + \_ -> + Element.none + } + , Widget.imageItem (Material.imageItem palette) + { onPress = Nothing + , image = + Element.image [ Element.width <| Element.px <| 40, Element.height <| Element.px <| 40 ] + { src = "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Elm_logo.svg/1024px-Elm_logo.svg.png" + , description = "Elm logo" + } + , text = "Item with Image" + , content = + \{ size, color } -> + "1." + |> Element.text + |> Element.el + [ Font.color <| MaterialColor.fromColor color + , Font.size size + ] + } + , Widget.divider (Material.insetDivider palette) + , Widget.insetItem (Material.insetItem palette) + { onPress = not model.isExpanded |> ToogleExpand |> Just + , icon = always Element.none + , text = "Click Me" + , content = + \{ size, color } -> + "2." + |> Element.text + |> Element.el + [ Font.color <| MaterialColor.fromColor color + , Font.size size + ] + } + , Widget.multiLineItem (Material.multiLineItem palette) + { title = "Item" + , text = "Description. Description. Description. Description. Description. Description. Description. Description. Description. Description." + , onPress = Nothing + , icon = always Element.none + , content = always Element.none + } + , Widget.imageItem (Material.imageItem palette) + { onPress = not model.isExpanded |> ToogleExpand |> Just + , image = Element.none + , text = "Clickable Item with Switch" + , content = + \_ -> + Widget.switch (Material.switch palette) + { description = "Click Me" + , active = model.isExpanded + , onPress = + not model.isExpanded + |> ToogleExpand + |> Just + } + } + , Widget.divider (Material.fullBleedDivider palette) + ] + , Widget.expansionItem (Material.expansionItem palette) + { onToggle = ToogleExpand + , isExpanded = model.isExpanded + , icon = always Element.none + , text = "Expandable Item" , content = - \_ -> - Element.none - } - , Widget.insetItem (Material.insetItem palette) - { onPress = Just <| ToggleModal False - , icon = - MaterialIcons.change_history - |> Icon.elmMaterialIcons Color - , text = "About" - , content = - \_ -> - Element.none + [ "Section 3" + |> Widget.headerItem (Material.insetHeader palette) + , Widget.insetItem (Material.insetItem palette) + { onPress = Nothing + , icon = always Element.none + , text = "Item" + , content = + \{ size, color } -> + "3." + |> Element.text + |> Element.el + [ Font.color <| MaterialColor.fromColor color + , Font.size size + ] + } + ] } + , [ "Menu" |> Widget.headerItem (Material.fullBleedHeader palette) ] + , { selected = + if model.isExpanded then + Just 1 + + else + Just 0 + , options = + [ True, False ] + |> List.map + (\bool -> + { text = + if bool then + "Expanded" + + else + "Collapsed" + , icon = always Element.none + } + ) + , onSelect = + \int -> + (int == 1) + |> ToogleExpand + |> Just + } + |> Widget.selectItem (Material.selectItem palette) ] + |> List.concat |> Widget.itemList (Material.sideSheet palette) , onDismiss = Just <| ToggleModal False } @@ -645,6 +758,7 @@ page = |> Element.column [ Element.spacing 32 ] ) |> Tile.first + |> Tile.next demo |> Tile.nextGroup dividerBook |> Tile.nextGroup headerBook |> Tile.nextGroup fullBleedItemBook @@ -652,5 +766,4 @@ page = |> Tile.nextGroup multiLineItemBook |> Tile.nextGroup expansionItemBook |> Tile.nextGroup selectItemBook - |> Tile.next demo |> Tile.page diff --git a/explorer/src/Page/Modal.elm b/explorer/src/Page/Modal.elm index 328b3fb..a91fc79 100644 --- a/explorer/src/Page/Modal.elm +++ b/explorer/src/Page/Modal.elm @@ -3,20 +3,15 @@ module Page.Modal exposing (page) {-| This is an example Page. If you want to add your own pages, simple copy and modify this one. -} -import Browser import Element exposing (Element) -import Element.Background as Background import Material.Icons as MaterialIcons import Material.Icons.Types exposing (Coloring(..)) import Page import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg) import UIExplorer.Tile as Tile exposing (Context, Tile, TileMsg) -import Widget exposing (ButtonStyle, ColumnStyle) -import Widget.Customize as Customize +import Widget import Widget.Icon as Icon import Widget.Material as Material -import Widget.Material.Color as MaterialColor -import Widget.Material.Typography as Typography {-| The title of this page diff --git a/explorer/src/Page/MultiSelect.elm b/explorer/src/Page/MultiSelect.elm index 01c20b4..02bbd10 100644 --- a/explorer/src/Page/MultiSelect.elm +++ b/explorer/src/Page/MultiSelect.elm @@ -2,24 +2,18 @@ module Page.MultiSelect exposing (page) {-| This is an example Page. If you want to add your own pages, simple copy and modify this one. -} -import Browser + import Element exposing (Element) -import Set exposing (Set) -import Widget exposing (ButtonStyle, RowStyle) -import Widget.Material as Material -import Element exposing (Element) -import Element.Background as Background import Material.Icons as MaterialIcons import Material.Icons.Types exposing (Coloring(..)) import Page +import Set exposing (Set) import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg) import UIExplorer.Tile as Tile exposing (Context, Tile, TileMsg) import Widget -import Widget.Customize as Customize import Widget.Icon as Icon import Widget.Material as Material -import Widget.Material.Color as MaterialColor -import Widget.Material.Typography as Typography + {-| The title of this page -} @@ -41,9 +35,10 @@ viewFunctions = let viewSelectRow style selected1 selected2 selected3 options onSelect { palette } () = Widget.multiSelect - { selected = - [ selected1, selected2, selected3] |> List.filterMap identity - |> Set.fromList + { selected = + [ selected1, selected2, selected3 ] + |> List.filterMap identity + |> Set.fromList , options = options , onSelect = onSelect } @@ -54,10 +49,12 @@ viewFunctions = --Don't forget to change the title |> Page.viewTile "Widget.buttonRow " - viewTogggleRow style selected1 selected2 selected3 options onSelect { palette } () = + viewTogggleRow style selected1 selected2 selected3 options onSelect { palette } () = Widget.multiSelect - { selected = [ selected1, selected2, selected3] |> List.filterMap identity - |> Set.fromList + { selected = + [ selected1, selected2, selected3 ] + |> List.filterMap identity + |> Set.fromList , options = options , onSelect = onSelect } @@ -68,10 +65,12 @@ viewFunctions = --Don't forget to change the title |> Page.viewTile "Widget.toggleRow" - viewWrappedRow style selected1 selected2 selected3 options onSelect { palette } () = + viewWrappedRow style selected1 selected2 selected3 options onSelect { palette } () = Widget.multiSelect - { selected = [ selected1, selected2, selected3] |> List.filterMap identity - |> Set.fromList + { selected = + [ selected1, selected2, selected3 ] + |> List.filterMap identity + |> Set.fromList , options = options , onSelect = onSelect } @@ -82,10 +81,12 @@ viewFunctions = --Don't forget to change the title |> Page.viewTile "Widget.wrappedButtonRow" - viewSelectColumn style selected1 selected2 selected3 options onSelect { palette } () = + viewSelectColumn style selected1 selected2 selected3 options onSelect { palette } () = Widget.multiSelect - { selected = [ selected1, selected2, selected3] |> List.filterMap identity - |> Set.fromList + { selected = + [ selected1, selected2, selected3 ] + |> List.filterMap identity + |> Set.fromList , options = options , onSelect = onSelect } @@ -122,17 +123,17 @@ book = --Changing the text of the label |> Story.addStory (Story.boolStory "Selected First" - (Just 0,Nothing) + ( Just 0, Nothing ) False ) |> Story.addStory (Story.boolStory "Selected Second" - (Just 1,Nothing) + ( Just 1, Nothing ) True ) - |> Story.addStory + |> Story.addStory (Story.boolStory "Selected Third" - (Just 2,Nothing) + ( Just 2, Nothing ) True ) --Change the Icon @@ -161,6 +162,7 @@ book = |> Story.build + {- This next section is essentially just a normal Elm program. -} -------------------------------------------------------------------------------- -- Interactive Demonstration @@ -206,7 +208,7 @@ subscriptions _ = {-| You can remove the msgMapper. But by doing so, make sure to also change `msg` to `Msg` in the line below. -} view : Context -> Model -> Element Msg -view {palette} (Selected selected) = +view { palette } (Selected selected) = { selected = selected , options = [ 1, 2, 42 ] @@ -225,6 +227,7 @@ view {palette} (Selected selected) = } + -------------------------------------------------------------------------------- -- DO NOT MODIFY ANYTHING AFTER THIS LINE -------------------------------------------------------------------------------- @@ -246,4 +249,3 @@ page = , book = book , demo = demo } - diff --git a/explorer/src/Page/ProgressIndicator.elm b/explorer/src/Page/ProgressIndicator.elm index d2c4518..168ab92 100644 --- a/explorer/src/Page/ProgressIndicator.elm +++ b/explorer/src/Page/ProgressIndicator.elm @@ -2,23 +2,14 @@ module Page.ProgressIndicator exposing (page) {-| This is an example Page. If you want to add your own pages, simple copy and modify this one. -} -import Browser + import Element exposing (Element) -import Widget exposing (ProgressIndicatorStyle) -import Widget.Material as Material -import Element exposing (Element) -import Element.Background as Background -import Material.Icons as MaterialIcons import Material.Icons.Types exposing (Coloring(..)) import Page import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg) import UIExplorer.Tile as Tile exposing (Context, Tile, TileMsg) import Widget -import Widget.Customize as Customize -import Widget.Icon as Icon import Widget.Material as Material -import Widget.Material.Color as MaterialColor -import Widget.Material.Typography as Typography {-| The title of this page @@ -41,10 +32,9 @@ viewFunctions = let viewIndicator style progress indeterminate { palette } () = Widget.circularProgressIndicator (style palette) - (indeterminate (toFloat progress/ 100 )) + (indeterminate (toFloat progress / 100)) --Don't forget to change the title |> Page.viewTile "Widget.circularProgressIndicator" - in [ viewIndicator ] |> List.foldl Story.addTile @@ -62,13 +52,12 @@ book = |> Story.addStory (Story.optionListStory "Style" ( "ProgressIndicator", Material.progressIndicator ) - [ ] + [] ) --Changing the text of the label |> Story.addStory (Story.rangeStory "Progress" { unit = "%", min = 0, max = 100, default = 50 } - ) --Should an event be triggered when pressing the button? |> Story.addStory @@ -118,9 +107,9 @@ subscriptions _ = {-| You can remove the msgMapper. But by doing so, make sure to also change `msg` to `Msg` in the line below. -} view : Context -> Model -> Element Msg -view {palette} (MaybeProgress maybeProgress) = - Widget.circularProgressIndicator (Material.progressIndicator palette) - maybeProgress +view { palette } (MaybeProgress maybeProgress) = + Widget.circularProgressIndicator (Material.progressIndicator palette) + maybeProgress @@ -145,5 +134,3 @@ page = , book = book , demo = demo } - - diff --git a/explorer/src/UIExplorer.elm b/explorer/src/UIExplorer.elm index 7a48c83..c5212c0 100644 --- a/explorer/src/UIExplorer.elm +++ b/explorer/src/UIExplorer.elm @@ -34,7 +34,7 @@ import Browser import Browser.Dom import Browser.Events import Browser.Navigation -import Element exposing (Element) +import Element exposing (DeviceClass(..), Element) import Element.Background import Element.Font import Element.Input @@ -303,33 +303,37 @@ type PageSizeOption | Native -allPageSizeOptions : List PageSizeOption -allPageSizeOptions = - [ Iphone5 - , Iphone6 - , IpadVertical - , IpadHorizontal - , Native - ] + +{- } + allPageSizeOptions : List PageSizeOption + allPageSizeOptions = + [ Iphone5 + , Iphone6 + , IpadVertical + , IpadHorizontal + , Native + ] -pageSizeOptionToString : PageSizeOption -> String -pageSizeOptionToString pageSizeOption = - case pageSizeOption of - Iphone5 -> - "iPhone 5/SE" + pageSizeOptionToString : PageSizeOption -> String + pageSizeOptionToString pageSizeOption = + case pageSizeOption of + Iphone5 -> + "iPhone 5/SE" - Iphone6 -> - "iPhone 6/7/8" + Iphone6 -> + "iPhone 6/7/8" - IpadVertical -> - "iPad (vertical)" + IpadVertical -> + "iPad (vertical)" - IpadHorizontal -> - "iPad (horizontal)" + IpadHorizontal -> + "iPad (horizontal)" - Native -> - "Native width" + Native -> + "Native width" + - +-} pageSizeOptionWidth : PageSizeOption -> Maybe (Quantity Int Pixels) @@ -449,7 +453,7 @@ init config (PageBuilder pages) flagsJson url key = , pageSizeOption = Native , expandColorBlindOptions = False , colorBlindOption = Nothing - , darkThemeEnabled = True + , darkThemeEnabled = False } , Cmd.batch [ navigationCmd @@ -687,38 +691,60 @@ viewSuccess : -> Browser.Document (Msg pageMsg) viewSuccess config ((PageBuilder pages) as pages_) model = let - actualSidebarWidth = + {--actualSidebarWidth = if model.minimizeSidebar then sidebarMinimizedWidth else - sidebarWidth + sidebarWidth--} + palette = + if model.darkThemeEnabled then + Material.darkPalette + + else + Material.defaultPalette in { title = "UI Explorer" , body = [ Element.layoutWith { options = config.layoutOptions } (Element.width Element.fill - :: Element.inFront - (Element.el - [ Element.height <| Element.px (Pixels.inPixels model.windowSize.height) - , Element.scrollbarY + :: (Element.Background.color <| + if model.darkThemeEnabled then + black + + else + gray + ) + :: config.layoutAttributes + ) + (Element.column [ Element.width Element.fill, Element.height Element.fill ] + [ Widget.menuBar (Material.menuBar palette) + { title = + config.sidebarTitle + |> Element.el Typography.h6 + , deviceClass = Desktop + , openLeftSheet = Just PressedToggleSidebar + , openRightSheet = Nothing + , openTopSheet = Nothing + , primaryActions = [] + , search = Nothing + } + , Element.row + [ Element.width Element.fill + , Element.height Element.fill + , Element.behindContent (Element.html colorblindnessSvg) + , Element.behindContent (Element.html colorblindnessCss) + , Element.Font.color (textColor model.darkThemeEnabled) + ] + [ -- Element.el [ Element.width (Element.px (Pixels.inPixels actualSidebarWidth)) ] Element.none + Element.el + [ Element.height <| Element.fill --Element.px (Pixels.inPixels model.windowSize.height) , Element.Font.size 16 ] (viewSidebar pages_ config model) - ) - :: Element.behindContent (Element.html colorblindnessSvg) - :: Element.behindContent (Element.html colorblindnessCss) - :: Element.Font.color (textColor model.darkThemeEnabled) - :: config.layoutAttributes - ) - (Element.row - [ Element.width Element.fill - , Element.height Element.fill - ] - [ Element.el [ Element.width (Element.px (Pixels.inPixels actualSidebarWidth)) ] Element.none - , Element.el - (Element.alignTop - :: Element.width + , Element.el + ([ Element.alignTop + , Element.width (case pageSizeOptionWidth model.pageSizeOption of Just width -> Element.px (Pixels.inPixels width) @@ -726,40 +752,31 @@ viewSuccess config ((PageBuilder pages) as pages_) model = Nothing -> Element.fillPortion 999999999 ) - :: Element.height Element.fill - :: Element.Region.mainContent - :: (if model.darkThemeEnabled then - Element.Background.color <| Element.rgb255 30 30 30 + , Element.centerX + , Element.paddingXY 0 56 + , Element.height Element.fill + , Element.Region.mainContent + , if model.darkThemeEnabled then + Element.Background.color <| Element.rgb255 30 30 30 - else - Element.Background.color <| Element.rgb255 225 225 225 - ) - :: (case model.colorBlindOption of - Nothing -> - [] + else + Element.Background.color <| Element.rgb255 225 225 225 + ] + ++ (case model.colorBlindOption of + Nothing -> + [] - Just colorBlindOption -> - colorBlindOptionToCssClass colorBlindOption - |> Html.Attributes.class - |> Element.htmlAttribute - |> List.singleton - ) - ) - (pages.view model.page (contentSize model) model.darkThemeEnabled model.pageModel - |> Element.map PageMsg - ) - , Element.el - [ Element.Background.color <| - if model.darkThemeEnabled then - black - - else - gray - , Element.alpha 0.9 - , Element.width Element.fill - , Element.height Element.fill + Just colorBlindOption -> + colorBlindOptionToCssClass colorBlindOption + |> Html.Attributes.class + |> Element.htmlAttribute + |> List.singleton + ) + ) + (pages.view model.page (contentSize model) model.darkThemeEnabled model.pageModel + |> Element.map PageMsg + ) ] - Element.none ] ) ] @@ -783,13 +800,12 @@ viewSidebar : -> Element (Msg pageMsg) viewSidebar pages config model = let - bgColor = + {--bgColor = if model.darkThemeEnabled then darkerGray else - lightGray - + lightGray--} palette = if model.darkThemeEnabled then Material.darkPalette @@ -798,7 +814,8 @@ viewSidebar pages config model = Material.defaultPalette in if model.minimizeSidebar then - Element.el + Element.none + {--Element.el [ Element.height Element.fill ] (Element.Input.button [ Element.width (Element.px (Pixels.inPixels sidebarMinimizedWidth)) @@ -808,33 +825,29 @@ viewSidebar pages config model = { onPress = Just PressedToggleSidebar , label = Element.el [ Element.moveRight 3 ] (Element.text "❯") } - ) + )--} else - [ [ Widget.insetItem (Material.insetItem palette) - { text = "" - , onPress = Just PressedToggleSidebar - , icon = - \_ -> - config.sidebarTitle - |> Element.el Typography.h6 - , content = - \{ size } -> - Element.text "❮" - |> Element.el [ Element.Font.size size ] - } - , Widget.divider (Material.fullBleedDivider palette) - , Widget.fullBleedItem (Material.fullBleedItem palette) + [ [ Widget.headerItem (Material.fullBleedHeader palette) "Device Toolbar" + , Widget.insetItem (Material.insetItem palette) { text = "Dark Theme" , onPress = Just <| ChangeDarkTheme <| not <| model.darkThemeEnabled - , icon = + , content = \_ -> Widget.switch (Material.switch palette) { description = "Toggle Theme" , onPress = Just <| ChangeDarkTheme <| not <| model.darkThemeEnabled , active = model.darkThemeEnabled } + , icon = always Element.none } + ] + + --Having different screen sized is nice, but not very useful in the current implementation. + --, pageSizeOptionView model.darkThemeEnabled model.expandPageSizeOptions model.pageSizeOption + --, [ Widget.divider (Material.insetDivider palette) ] + , colorBlindOptionView model.darkThemeEnabled model.expandColorBlindOptions model.colorBlindOption + , [ Widget.headerItem (Material.fullBleedHeader palette) "Widgets" , Widget.textInput (Material.textInput palette) { chips = [] , text = model.searchText @@ -842,15 +855,9 @@ viewSidebar pages config model = , label = "Search pages" , onChange = TypingSearchText } - |> Element.el [ Element.centerX, Element.centerY ] + |> Element.el [ Element.paddingXY 8 0 ] |> Element.el [ Element.height <| Element.px 70, Element.width <| Element.fill ] |> Widget.asItem - , Widget.headerItem (Material.fullBleedHeader palette) "Device Toolbar" - ] - , pageSizeOptionView model.darkThemeEnabled model.expandPageSizeOptions model.pageSizeOption - , [ Widget.divider (Material.insetDivider palette) ] - , colorBlindOptionView model.darkThemeEnabled model.expandColorBlindOptions model.colorBlindOption - , [ Widget.headerItem (Material.fullBleedHeader palette) "Widgets" , Widget.asItem <| if showSearchResults model.searchText then Element.Lazy.lazy5 viewSearchResults model.darkThemeEnabled pages config model.page model.searchText @@ -863,6 +870,10 @@ viewSidebar pages config model = |> Widget.itemList (Material.sideSheet palette) + +--|> Element.el [ Element.scrollbarY ] + + colorblindnessCss : Html msg colorblindnessCss = Html.node "style" @@ -1052,6 +1063,8 @@ colorblindnessSvg = ] + +{-- pageSizeOptionView : Bool -> Bool -> PageSizeOption -> List (Item (Msg pageMsg)) pageSizeOptionView dark isExpanded selectedPageSize = optionGroupView dark @@ -1061,6 +1074,7 @@ pageSizeOptionView dark isExpanded selectedPageSize = pageSizeOptionToString PressedPageSizeOption ToggledPageSizeGroup +--} colorBlindOptionView : Bool -> Bool -> Maybe ColorBlindOption -> List (Item (Msg pageMsg)) @@ -1255,9 +1269,12 @@ lightBlue = Element.rgb255 176 208 225 + +{-- lightGray : Element.Color lightGray = Element.rgb255 228 234 241 +--} gray : Element.Color diff --git a/explorer/src/UIExplorer/Tile.elm b/explorer/src/UIExplorer/Tile.elm index c4b5ce3..b78bfb1 100644 --- a/explorer/src/UIExplorer/Tile.elm +++ b/explorer/src/UIExplorer/Tile.elm @@ -282,6 +282,7 @@ layoutView palette _ view = , view.body |> Element.el [ Element.width Element.fill ] |> Widget.asItem ] |> Widget.itemList (Material.cardColumn palette) + |> Element.el [ Element.height Element.shrink ] Nothing -> view.body @@ -319,7 +320,8 @@ layoutRowView palette row = ] <| List.map - (layoutView palette [ Element.height Element.fill ]) + (layoutView palette []) + --[ Element.height Element.fill ]) <| List.reverse right ] @@ -350,6 +352,7 @@ page (Builder config) = |> List.concatMap (layoutRowView palette) |> Element.column ([ Element.padding 16 + , Element.height Element.fill , Element.spacing 32 , Element.px 800 |> Element.width , Element.centerX