diff --git a/elm.json b/elm.json index 332038d..7c11473 100644 --- a/elm.json +++ b/elm.json @@ -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", diff --git a/example/elm.json b/example/elm.json index 0cdd594..56d9458 100644 --- a/example/elm.json +++ b/example/elm.json @@ -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": {} } -} +} \ No newline at end of file diff --git a/example/src/Data/Style/SemanticUI.elm b/example/src/Data/Style/SemanticUI.elm new file mode 100644 index 0000000..25a7fc0 --- /dev/null +++ b/example/src/Data/Style/SemanticUI.elm @@ -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" + } diff --git a/example/src/Data/Theme.elm b/example/src/Data/Theme.elm index dfaf9b0..9ae3873 100644 --- a/example/src/Data/Theme.elm +++ b/example/src/Data/Theme.elm @@ -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 diff --git a/example/src/Main.elm b/example/src/Main.elm index 097a303..4dc3ac8 100644 --- a/example/src/Main.elm +++ b/example/src/Main.elm @@ -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