Orasund/elm-ui-widgets
1
1
Fork 0
mirror of https://github.com/Orasund/elm-ui-widgets.git synced 2024-11-22 04:58:49 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #24 from Orasund/patch

Browse Source 
2.1.1 - Remove elm-heroicons from dependencies
This commit is contained in:
Orasund 2020-09-20 20:59:59 +02:00 committed by GitHub
commit 28203b7e74
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 340 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
elm.json
View File

@ -3,7 +3,7 @@
"name": "Orasund/elm-ui-widgets",
"summary": "Collection of reusable views for elm-ui.",
"license": "BSD-3-Clause",
"version": "2.1.0",
"version": "2.1.1",
"exposed-modules": [
"Widget",
"Widget.Style",
@ -23,7 +23,6 @@
"elm/svg": "1.0.1 <= v < 2.0.0",
"elm/time": "1.0.0 <= v < 2.0.0",
"elm-community/intdict": "3.0.0 <= v < 4.0.0",
"jasonliang512/elm-heroicons": "1.0.2 <= v < 2.0.0",
"mdgriffith/elm-ui": "1.1.6 <= v < 2.0.0",
"noahzgordon/elm-color-extra": "1.0.2 <= v < 2.0.0",
"turboMaCk/queue": "1.0.2 <= v < 2.0.0",

4
example/elm.json
View File

@ -16,7 +16,7 @@
"elm/time": "1.0.0",
"elm-community/intdict": "3.0.0",
"feathericons/elm-feather": "1.4.0",
"jasonliang512/elm-heroicons": "1.0.2",
"jasonliang-dev/elm-heroicons": "1.0.2",
"mdgriffith/elm-ui": "1.1.6",
"noahzgordon/elm-color-extra": "1.0.2",
"ryannhg/elm-spa": "4.1.0",
@ -37,4 +37,4 @@
"direct": {},
"indirect": {}
}
}
}

280
example/src/Data/Style/SemanticUI.elm Normal file
View File

@ -0,0 +1,280 @@
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, DialogStyle, ExpansionPanelStyle, LayoutStyle, ProgressIndicatorStyle, RowStyle, SortTableStyle, TabStyle, TextInputStyle)
import Widget.Style.Template as Template
sortTable : SortTableStyle msg
sortTable =
{ containerTable = [ Attributes.class "ui celled table" |> Element.htmlAttribute ]
, headerButton = button
, ascIcon =
Html.i [ Attributes.class "dropdown icon" ] []
|> Element.html
, descIcon =
Html.i [ Attributes.class "dropdown icon" ] []
|> Element.html
, defaultIcon = Element.none
}
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 = []
}
chipButton : ButtonStyle msg
chipButton =
{ container =
[ Attributes.class "ui label" |> 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 = []
}
column : ColumnStyle msg
column =
{ containerColumn = [ 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 =
[ Element.width <| Element.fill
, Attributes.class "content" |> Element.htmlAttribute
]
, ifFirst = []
, ifLast = []
, otherwise = []
}
expansionPanel : ExpansionPanelStyle msg
expansionPanel =
{ containerColumn = [ Attributes.class "ui accordion" |> Element.htmlAttribute ]
, panelRow = [ Attributes.class "title" |> Element.htmlAttribute ]
, labelRow = []
, content = [ Attributes.class "content active" |> Element.htmlAttribute ]
, expandIcon =
Html.i [ Attributes.class "dropdown icon" ] []
|> Element.html
, collapseIcon =
Html.i [ Attributes.class "dropdown icon" ] []
|> Element.html
}
dialog : DialogStyle msg
dialog =
{ containerColumn = [ Attributes.class "ui active modal" |> Element.htmlAttribute ]
, title = [ Attributes.class "header" |> Element.htmlAttribute ]
, buttonRow = [ Attributes.class "actions" |> Element.htmlAttribute ]
, acceptButton =
{ container =
[ Attributes.class "ui positive button" |> Element.htmlAttribute
]
, labelRow = [ Element.spacing 6 ]
, text = []
, ifDisabled =
[ Attributes.class "disabled" |> Element.htmlAttribute
]
, ifActive =
[ Attributes.class "active" |> Element.htmlAttribute
]
, otherwise = []
}
, dismissButton =
{ 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 = []
}
, text = [ Attributes.class "description" |> Element.htmlAttribute ]
}
tab : TabStyle msg
tab =
{ button =
{ container =
[ Attributes.class "item" |> Element.htmlAttribute
]
, labelRow = [ Element.spacing 6 ]
, text = []
, ifDisabled =
[ Attributes.class "disabled" |> Element.htmlAttribute
]
, ifActive =
[ Attributes.class "active" |> Element.htmlAttribute
]
, otherwise = []
}
, optionRow =
[ Attributes.class "ui top attached tabular menu" |> Element.htmlAttribute
]
, containerColumn = []
, content =
[ Attributes.class "ui bottom active attached tab segment" |> Element.htmlAttribute
]
}
progressIndicator : ProgressIndicatorStyle msg
progressIndicator =
{ containerFunction =
\maybeProgress ->
"progressbar is not supported in Semantic UI"
|> Element.text
|> List.singleton
|> Element.paragraph []
}
textInput : TextInputStyle msg
textInput =
{ chipButton = chipButton
, containerRow = [ Element.spacing 4 ]
, chipsRow =
[ Element.spacing 2
]
, input = []
}
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 = sortTable
, row = row
, buttonRow = buttonRow
, cardColumn = cardColumn
, column = column
, button = button
, primaryButton = primaryButton
, tab = tab
, textInput = textInput
, chipButton = chipButton
, expansionPanel = expansionPanel
, selectButton = selectButton
, dialog = dialog
, progressIndicator = progressIndicator
, layout = Template.layout "layout"
}

6
example/src/Data/Theme.elm
View File

@ -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

86
example/src/Main.elm
View File

@ -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