mirror of
https://github.com/Orasund/elm-ui-widgets.git
synced 2024-11-22 04:58:49 +03:00
Startet working on Semantic UI
This commit is contained in:
Lucas Payr
parent
6866b50165
commit
2796837243
138
example/src/Data/Style/SemanticUI.elm
Normal file
138
example/src/Data/Style/SemanticUI.elm
Normal file
@ -0,0 +1,138 @@
|
||||
module Data.Style.SemanticUI exposing (style)
|
||||
|
||||
import Data.Style exposing (Style)
|
||||
import Element exposing (Attribute, Element)
|
||||
import Element.Background as Background
|
||||
import Element.Border as Border
|
||||
import Element.Font as Font
|
||||
import Html
|
||||
import Html.Attributes as Attributes
|
||||
import Widget.Style exposing (ButtonStyle, ColumnStyle, LayoutStyle, RowStyle)
|
||||
import Widget.Style.Template as Template
|
||||
|
||||
|
||||
button : ButtonStyle msg
|
||||
button =
|
||||
{ container =
|
||||
[ Attributes.class "ui basic button" |> Element.htmlAttribute
|
||||
]
|
||||
, labelRow = [ Element.spacing 6 ]
|
||||
, text = []
|
||||
, ifDisabled =
|
||||
[ Attributes.class "disabled" |> Element.htmlAttribute
|
||||
]
|
||||
, ifActive =
|
||||
[ Attributes.class "active" |> Element.htmlAttribute
|
||||
]
|
||||
, otherwise = []
|
||||
}
|
||||
|
||||
|
||||
selectButton : ButtonStyle msg
|
||||
selectButton =
|
||||
{ container =
|
||||
[ Attributes.class "ui button" |> Element.htmlAttribute
|
||||
]
|
||||
, labelRow = [ Element.spacing 6 ]
|
||||
, text = []
|
||||
, ifDisabled =
|
||||
[ Attributes.class "disabled" |> Element.htmlAttribute
|
||||
]
|
||||
, ifActive =
|
||||
[ Attributes.class "active" |> Element.htmlAttribute
|
||||
]
|
||||
, otherwise = []
|
||||
}
|
||||
|
||||
|
||||
primaryButton : ButtonStyle msg
|
||||
primaryButton =
|
||||
{ container =
|
||||
[ Attributes.class "ui primary button" |> Element.htmlAttribute
|
||||
]
|
||||
, labelRow = [ Element.spacing 6 ]
|
||||
, text = []
|
||||
, ifDisabled =
|
||||
[ Attributes.class "disabled" |> Element.htmlAttribute
|
||||
]
|
||||
, ifActive =
|
||||
[ Attributes.class "active" |> Element.htmlAttribute
|
||||
]
|
||||
, otherwise = []
|
||||
}
|
||||
|
||||
|
||||
row : RowStyle msg
|
||||
row =
|
||||
{ containerRow = [ Element.spacing 4 ]
|
||||
, element = []
|
||||
, ifFirst = []
|
||||
, ifLast = []
|
||||
, otherwise = []
|
||||
}
|
||||
|
||||
|
||||
buttonRow : RowStyle msg
|
||||
buttonRow =
|
||||
{ containerRow =
|
||||
[ Attributes.class "ui buttons" |> Element.htmlAttribute
|
||||
]
|
||||
, element = []
|
||||
, ifFirst = []
|
||||
, ifLast = []
|
||||
, otherwise = []
|
||||
}
|
||||
|
||||
|
||||
cardColumn : ColumnStyle msg
|
||||
cardColumn =
|
||||
{ containerColumn =
|
||||
[ Attributes.class "ui card" |> Element.htmlAttribute
|
||||
]
|
||||
, element =
|
||||
[ Attributes.class "content" |> Element.htmlAttribute
|
||||
]
|
||||
, ifFirst = []
|
||||
, ifLast = [ Attributes.class "extra" |> Element.htmlAttribute ]
|
||||
, otherwise = [ Attributes.class "extra" |> Element.htmlAttribute ]
|
||||
}
|
||||
|
||||
|
||||
layout : LayoutStyle msg
|
||||
layout =
|
||||
{ container = []
|
||||
, snackbar = Template.snackbar <| ":snackbar"
|
||||
, layout = Element.layout
|
||||
, header = []
|
||||
, sheet = []
|
||||
, sheetButton = Template.button <| ":sheetButton"
|
||||
, menuButton = Template.button <| ":menuButton"
|
||||
, menuTabButton = Template.button <| ":menuTabButton"
|
||||
, menuIcon = Template.icon <| "menuIcon"
|
||||
, moreVerticalIcon = Template.icon <| "moreVerticalIcon"
|
||||
, spacing = 4
|
||||
, title = []
|
||||
, searchIcon = Template.icon <| "searchIcon"
|
||||
, search = []
|
||||
, searchFill = []
|
||||
}
|
||||
|
||||
|
||||
style : Style msg
|
||||
style =
|
||||
{ sortTable = Template.sortTable <| "sortTable"
|
||||
, row = row
|
||||
, buttonRow = buttonRow
|
||||
, cardColumn = cardColumn
|
||||
, column = Template.column <| "column"
|
||||
, button = button
|
||||
, primaryButton = primaryButton
|
||||
, tab = Template.tab <| "tab"
|
||||
, textInput = Template.textInput <| "textInput"
|
||||
, chipButton = Template.button <| "chipButton"
|
||||
, expansionPanel = Template.expansionPanel "expansionPanel"
|
||||
, selectButton = selectButton
|
||||
, dialog = Template.dialog "dialog"
|
||||
, progressIndicator = Template.progressIndicator "progressIndicator"
|
||||
, layout = Template.layout "layout"
|
||||
}
|
||||
@ -5,10 +5,11 @@ import Data.Style.ElmUiFramework
|
||||
import Data.Style.Material
|
||||
import Data.Style.Template
|
||||
import Widget.Style.Material
|
||||
|
||||
import Data.Style.SemanticUI
|
||||
|
||||
type Theme
|
||||
= ElmUiFramework
|
||||
| SemanticUI
|
||||
| Template
|
||||
| Material
|
||||
| DarkMaterial
|
||||
@ -19,6 +20,9 @@ toStyle theme =
|
||||
case theme of
|
||||
ElmUiFramework ->
|
||||
Data.Style.ElmUiFramework.style
|
||||
|
||||
SemanticUI ->
|
||||
Data.Style.SemanticUI.style
|
||||
|
||||
Template ->
|
||||
Data.Style.Template.style
|
||||
|
||||
@ -9,7 +9,8 @@ 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 (Element,DeviceClass(..))
|
||||
import Element exposing (DeviceClass(..), Element)
|
||||
import FeatherIcons
|
||||
import Framework
|
||||
import Framework.Grid as Grid
|
||||
import Framework.Heading as Heading
|
||||
@ -24,7 +25,7 @@ import Time
|
||||
import Widget
|
||||
import Widget.Layout as Layout exposing (Layout, Part)
|
||||
import Widget.ScrollingNav as ScrollingNav
|
||||
import FeatherIcons
|
||||
|
||||
|
||||
type alias LoadedModel =
|
||||
{ stateless : Stateless.Model
|
||||
@ -344,6 +345,15 @@ view model =
|
||||
, text = "Dark Material Theme"
|
||||
, icon = Icons.penTool |> Element.html |> Element.el []
|
||||
}
|
||||
, { onPress =
|
||||
if m.theme /= SemanticUI then
|
||||
Just <| SetTheme <| SemanticUI
|
||||
|
||||
else
|
||||
Nothing
|
||||
, text = "Semantic UI Theme"
|
||||
, icon = Icons.penTool |> Element.html |> Element.el []
|
||||
}
|
||||
, { onPress =
|
||||
if m.theme /= ElmUiFramework then
|
||||
Just <| SetTheme <| ElmUiFramework
|
||||
@ -442,39 +452,41 @@ viewLoaded m =
|
||||
, elem
|
||||
]
|
||||
|> Element.column Grid.simple
|
||||
)
|
||||
:: ( if more |> List.isEmpty then
|
||||
[]
|
||||
else
|
||||
[Widget.expansionPanel style.expansionPanel
|
||||
|
||||
{ onToggle =
|
||||
always
|
||||
(name
|
||||
|> Example.fromString
|
||||
|> Maybe.map ToggledExample
|
||||
|> Maybe.withDefault Idle
|
||||
)
|
||||
, icon = Element.none
|
||||
, text =
|
||||
"States"
|
||||
, content = Element.column
|
||||
(Grid.simple
|
||||
++ [ Element.width <| Element.fill ]
|
||||
)
|
||||
more
|
||||
, isExpanded =
|
||||
name
|
||||
|> Example.fromString
|
||||
|> Maybe.map
|
||||
(\example ->
|
||||
m.expanded
|
||||
|> AnySet.member example
|
||||
)|> Maybe.withDefault False
|
||||
|
||||
)
|
||||
:: (if more |> List.isEmpty then
|
||||
[]
|
||||
|
||||
}]
|
||||
))
|
||||
else
|
||||
[ Widget.expansionPanel style.expansionPanel
|
||||
{ onToggle =
|
||||
always
|
||||
(name
|
||||
|> Example.fromString
|
||||
|> Maybe.map ToggledExample
|
||||
|> Maybe.withDefault Idle
|
||||
)
|
||||
, icon = Element.none
|
||||
, text =
|
||||
"States"
|
||||
, content =
|
||||
Element.column
|
||||
(Grid.simple
|
||||
++ [ Element.width <| Element.fill ]
|
||||
)
|
||||
more
|
||||
, isExpanded =
|
||||
name
|
||||
|> Example.fromString
|
||||
|> Maybe.map
|
||||
(\example ->
|
||||
m.expanded
|
||||
|> AnySet.member example
|
||||
)
|
||||
|> Maybe.withDefault False
|
||||
}
|
||||
]
|
||||
)
|
||||
)
|
||||
|> Widget.column style.cardColumn
|
||||
)
|
||||
|> Element.wrappedRow
|
||||
@ -487,6 +499,12 @@ viewLoaded m =
|
||||
)
|
||||
)
|
||||
|> 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 Grid.compact
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user