Web.View.Types

Documentation

data Content

Constructors

Node Element

Text Text

Raw Text

Raw embedded HTML or SVG. See raw

data Element

A single HTML tag. Note that the class attribute is stored separately from the rest of the attributes to make adding styles easier

Constructors

Element

Fields

• name :: Name
• attributes :: Attributes
• children :: [Content]

data Attributes

Constructors

Attributes

Fields

• classes :: [Class]
• other :: Map Name AttValue

Instances

Monoid Attributes

Defined in Web.View.Types

Methods

mempty :: Attributes

mappend :: Attributes -> Attributes -> Attributes

mconcat :: [Attributes] -> Attributes

Semigroup Attributes

Defined in Web.View.Types

Methods

(<>) :: Attributes -> Attributes -> Attributes

sconcat :: NonEmpty Attributes -> Attributes

stimes :: Integral b => b -> Attributes -> Attributes

type Attribute = (Name, AttValue)

type Name = Text

type AttValue = Text

Attribute Modifiers

type Mod = Attributes -> Attributes

Element functions expect a Mod function as their first argument that adds attributes and classes.

userEmail :: User -> View c ()
userEmail user = input (fontSize 16 . active) (text user.email)
  where
    active = isActive user then bold else id

Atomic CSS

type CSS = Map Selector Class

All the atomic classes used in a View

data Class

Atomic classes include a selector and the corresponding styles

Constructors

Class

Fields

• selector :: Selector
• properties :: Styles

type Styles = Map Name StyleValue

The styles to apply for a given atomic Class

data Selector

The selector to use for the given atomic Class

Constructors

Selector

Fields

• parent :: Maybe Text
• pseudo :: Maybe Pseudo
• media :: Maybe Media
• className :: ClassName

Instances

IsString Selector

Defined in Web.View.Types

Methods

fromString :: String -> Selector

Eq Selector

Defined in Web.View.Types

Methods

(==) :: Selector -> Selector -> Bool

(/=) :: Selector -> Selector -> Bool

Ord Selector

Defined in Web.View.Types

Methods

compare :: Selector -> Selector -> Ordering

(<) :: Selector -> Selector -> Bool

(<=) :: Selector -> Selector -> Bool

(>) :: Selector -> Selector -> Bool

(>=) :: Selector -> Selector -> Bool

max :: Selector -> Selector -> Selector

min :: Selector -> Selector -> Selector

selector :: ClassName -> Selector

Create a Selector given only a ClassName

newtype ClassName

A class name

Constructors

ClassName

Fields

• text :: Text

Instances

IsString ClassName

Defined in Web.View.Types

Methods

fromString :: String -> ClassName

Eq ClassName

Defined in Web.View.Types

Methods

(==) :: ClassName -> ClassName -> Bool

(/=) :: ClassName -> ClassName -> Bool

Ord ClassName

Defined in Web.View.Types

Methods

compare :: ClassName -> ClassName -> Ordering

(<) :: ClassName -> ClassName -> Bool

(<=) :: ClassName -> ClassName -> Bool

(>) :: ClassName -> ClassName -> Bool

(>=) :: ClassName -> ClassName -> Bool

max :: ClassName -> ClassName -> ClassName

min :: ClassName -> ClassName -> ClassName

class ToClassName a where

Convert a type into a className segment to generate unique compound style names based on the value

Minimal complete definition

Nothing

Methods

toClassName :: a -> Text

default toClassName :: Show a => a -> Text

Instances

ToClassName Text

Defined in Web.View.Types

Methods

toClassName :: Text -> Text

ToClassName Align

Defined in Web.View.Types

Methods

toClassName :: Align -> Text

ToClassName Length

Defined in Web.View.Types

Methods

toClassName :: Length -> Text

ToClassName Ms

Defined in Web.View.Types

Methods

toClassName :: Ms -> Text

ToClassName PxRem

Defined in Web.View.Types

Methods

toClassName :: PxRem -> Text

ToClassName Float

Defined in Web.View.Types

Methods

toClassName :: Float -> Text

ToClassName Int

Defined in Web.View.Types

Methods

toClassName :: Int -> Text

data Pseudo

Psuedos allow for specifying styles that only apply in certain conditions. See hover etc

el (color Primary . hover (color White)) "hello"

Constructors

Hover

Active

Even

Odd

Instances

Show Pseudo

Defined in Web.View.Types

Methods

showsPrec :: Int -> Pseudo -> ShowS

show :: Pseudo -> String

showList :: [Pseudo] -> ShowS

Eq Pseudo

Defined in Web.View.Types

Methods

(==) :: Pseudo -> Pseudo -> Bool

(/=) :: Pseudo -> Pseudo -> Bool

Ord Pseudo

Defined in Web.View.Types

Methods

compare :: Pseudo -> Pseudo -> Ordering

(<) :: Pseudo -> Pseudo -> Bool

(<=) :: Pseudo -> Pseudo -> Bool

(>) :: Pseudo -> Pseudo -> Bool

(>=) :: Pseudo -> Pseudo -> Bool

max :: Pseudo -> Pseudo -> Pseudo

min :: Pseudo -> Pseudo -> Pseudo

newtype StyleValue

The value of a css style property

Constructors

StyleValue String

Instances

IsString StyleValue

Defined in Web.View.Types

Methods

fromString :: String -> StyleValue

Show StyleValue

Defined in Web.View.Types

Methods

showsPrec :: Int -> StyleValue -> ShowS

show :: StyleValue -> String

showList :: [StyleValue] -> ShowS

class ToStyleValue a where

Use a type as a css style property value

Minimal complete definition

Nothing

Methods

toStyleValue :: a -> StyleValue

default toStyleValue :: Show a => a -> StyleValue

Instances

ToStyleValue Text

Defined in Web.View.Types

Methods

toStyleValue :: Text -> StyleValue

ToStyleValue Align

Defined in Web.View.Types

Methods

toStyleValue :: Align -> StyleValue

ToStyleValue HexColor

Defined in Web.View.Types

Methods

toStyleValue :: HexColor -> StyleValue

ToStyleValue Length

Defined in Web.View.Types

Methods

toStyleValue :: Length -> StyleValue

ToStyleValue Ms

Defined in Web.View.Types

Methods

toStyleValue :: Ms -> StyleValue

ToStyleValue PxRem

Defined in Web.View.Types

Methods

toStyleValue :: PxRem -> StyleValue

ToStyleValue String

Defined in Web.View.Types

Methods

toStyleValue :: String -> StyleValue

ToStyleValue Float

Defined in Web.View.Types

Methods

toStyleValue :: Float -> StyleValue

ToStyleValue Int

Defined in Web.View.Types

Methods

toStyleValue :: Int -> StyleValue

data Length

Constructors

PxRem PxRem

Px, converted to Rem. Allows for the user to change the document font size and have the app scale accordingly. But allows the programmer to code in pixels to match a design

Pct Float

Instances

Num Length

Defined in Web.View.Types

Methods

(+) :: Length -> Length -> Length

(-) :: Length -> Length -> Length

(*) :: Length -> Length -> Length

negate :: Length -> Length

abs :: Length -> Length

signum :: Length -> Length

fromInteger :: Integer -> Length

Show Length

Defined in Web.View.Types

Methods

showsPrec :: Int -> Length -> ShowS

show :: Length -> String

showList :: [Length] -> ShowS

ToClassName Length

Defined in Web.View.Types

Methods

toClassName :: Length -> Text

ToStyleValue Length

Defined in Web.View.Types

Methods

toStyleValue :: Length -> StyleValue

newtype PxRem

Constructors

PxRem' Int

Instances

Enum PxRem

Defined in Web.View.Types

Methods

succ :: PxRem -> PxRem

pred :: PxRem -> PxRem

toEnum :: Int -> PxRem

fromEnum :: PxRem -> Int

enumFrom :: PxRem -> [PxRem]

enumFromThen :: PxRem -> PxRem -> [PxRem]

enumFromTo :: PxRem -> PxRem -> [PxRem]

enumFromThenTo :: PxRem -> PxRem -> PxRem -> [PxRem]

Num PxRem

Defined in Web.View.Types

Methods

(+) :: PxRem -> PxRem -> PxRem

(-) :: PxRem -> PxRem -> PxRem

(*) :: PxRem -> PxRem -> PxRem

negate :: PxRem -> PxRem

abs :: PxRem -> PxRem

signum :: PxRem -> PxRem

fromInteger :: Integer -> PxRem

Integral PxRem

Defined in Web.View.Types

Methods

quot :: PxRem -> PxRem -> PxRem

rem :: PxRem -> PxRem -> PxRem

div :: PxRem -> PxRem -> PxRem

mod :: PxRem -> PxRem -> PxRem

quotRem :: PxRem -> PxRem -> (PxRem, PxRem)

divMod :: PxRem -> PxRem -> (PxRem, PxRem)

toInteger :: PxRem -> Integer

Real PxRem

Defined in Web.View.Types

Methods

toRational :: PxRem -> Rational

Show PxRem

Defined in Web.View.Types

Methods

showsPrec :: Int -> PxRem -> ShowS

show :: PxRem -> String

showList :: [PxRem] -> ShowS

Eq PxRem

Defined in Web.View.Types

Methods

(==) :: PxRem -> PxRem -> Bool

(/=) :: PxRem -> PxRem -> Bool

Ord PxRem

Defined in Web.View.Types

Methods

compare :: PxRem -> PxRem -> Ordering

(<) :: PxRem -> PxRem -> Bool

(<=) :: PxRem -> PxRem -> Bool

(>) :: PxRem -> PxRem -> Bool

(>=) :: PxRem -> PxRem -> Bool

max :: PxRem -> PxRem -> PxRem

min :: PxRem -> PxRem -> PxRem

ToClassName PxRem

Defined in Web.View.Types

Methods

toClassName :: PxRem -> Text

ToStyleValue PxRem

Defined in Web.View.Types

Methods

toStyleValue :: PxRem -> StyleValue

newtype Ms

Milliseconds, used for transitions

Constructors

Ms Int

Instances

Num Ms

Defined in Web.View.Types

Methods

(+) :: Ms -> Ms -> Ms

(-) :: Ms -> Ms -> Ms

(*) :: Ms -> Ms -> Ms

negate :: Ms -> Ms

abs :: Ms -> Ms

signum :: Ms -> Ms

fromInteger :: Integer -> Ms

Show Ms

Defined in Web.View.Types

Methods

showsPrec :: Int -> Ms -> ShowS

show :: Ms -> String

showList :: [Ms] -> ShowS

ToClassName Ms

Defined in Web.View.Types

Methods

toClassName :: Ms -> Text

ToStyleValue Ms

Defined in Web.View.Types

Methods

toStyleValue :: Ms -> StyleValue

data Media

Media allows for responsive designs that change based on characteristics of the window. See Layout Example

Constructors

MinWidth Int

MaxWidth Int

Instances

Eq Media

Defined in Web.View.Types

Methods

(==) :: Media -> Media -> Bool

(/=) :: Media -> Media -> Bool

Ord Media

Defined in Web.View.Types

Methods

compare :: Media -> Media -> Ordering

(<) :: Media -> Media -> Bool

(<=) :: Media -> Media -> Bool

(>) :: Media -> Media -> Bool

(>=) :: Media -> Media -> Bool

max :: Media -> Media -> Media

min :: Media -> Media -> Media

data Sides a

Options for styles that support specifying various sides. This has a "fake" Num instance to support literals

border 5
border (X 2)
border (TRBL 0 5 0 0)

Constructors

All a

TRBL a a a a

X a

Y a

XY a a

Instances

Num a => Num (Sides a)

Defined in Web.View.Types

Methods

(+) :: Sides a -> Sides a -> Sides a

(-) :: Sides a -> Sides a -> Sides a

(*) :: Sides a -> Sides a -> Sides a

negate :: Sides a -> Sides a

abs :: Sides a -> Sides a

signum :: Sides a -> Sides a

fromInteger :: Integer -> Sides a

newtype FlatAttributes

Element's attributes do not include class, which is separated. FlatAttributes generate the class attribute and include it

Constructors

FlatAttributes

Fields

• attributes :: Map Name AttValue

Instances

Generic FlatAttributes

Defined in Web.View.Types

Associated Types

type Rep FlatAttributes :: Type -> Type

Methods

from :: FlatAttributes -> Rep FlatAttributes x

to :: Rep FlatAttributes x -> FlatAttributes

type Rep FlatAttributes

Defined in Web.View.Types

type Rep FlatAttributes = D1 ('MetaData "FlatAttributes" "Web.View.Types" "web-view-0.4.0-inplace" 'True) (C1 ('MetaCons "FlatAttributes" 'PrefixI 'True) (S1 ('MetaSel ('Just "attributes") 'NoSourceUnpackedness 'NoSourceStrictness 'DecidedLazy) (Rec0 (Map Name AttValue))))

Colors

class ToColor a where

ToColor allows you to create a type containing your application's colors:

data AppColor
  = White
  | Primary
  | Dark

instance ToColor AppColor where
  colorValue White = "#FFF"
  colorValue Dark = "#333"
  colorValue Primary = "#00F"

hello :: View c ()
hello = el (bg Primary . color White) "Hello"

Minimal complete definition

colorValue

Methods

colorValue :: a -> HexColor

colorName :: a -> Text

default colorName :: Show a => a -> Text

Instances

ToColor HexColor

Defined in Web.View.Types

Methods

colorValue :: HexColor -> HexColor

colorName :: HexColor -> Text

newtype HexColor

Hexidecimal Color. Can be specified with or without the leading #. Recommended to use an AppColor type instead of manually using hex colors. See ToColor

Constructors

HexColor Text

Instances

IsString HexColor

Defined in Web.View.Types

Methods

fromString :: String -> HexColor

ToColor HexColor

Defined in Web.View.Types

Methods

colorValue :: HexColor -> HexColor

colorName :: HexColor -> Text

ToStyleValue HexColor

Defined in Web.View.Types

Methods

toStyleValue :: HexColor -> StyleValue

data Align

Constructors

Center

Instances

Show Align

Defined in Web.View.Types

Methods

showsPrec :: Int -> Align -> ShowS

show :: Align -> String

showList :: [Align] -> ShowS

ToClassName Align

Defined in Web.View.Types

Methods

toClassName :: Align -> Text

ToStyleValue Align

Defined in Web.View.Types

Methods

toStyleValue :: Align -> StyleValue