github/elm-mdl
1
0
Fork 0
mirror of https://github.com/correl/elm-mdl.git synced 2024-11-23 19:19:52 +00:00
Code Issues Projects Releases Packages Wiki Activity

Update.

Browse source
This commit is contained in:
Søren Debois 2016-04-12 23:39:49 +02:00
parent 8d0a066659
commit 91aafce5b9
1 changed files with 44 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
elm.js
View file

@ -12602,9 +12602,22 @@ Elm.Material.Elevation.make = function (_elm) {
var transition = function (duration) { var transition = function (duration) {
return A2($Material$Style.css,"transition",A2($Basics._op["++"],"box-shadow ",A2($Basics._op["++"],$Basics.toString(duration),"ms ease-in-out 0s"))); return A2($Material$Style.css,"transition",A2($Basics._op["++"],"box-shadow ",A2($Basics._op["++"],$Basics.toString(duration),"ms ease-in-out 0s")));
}; };
var validElevations = _U.list([2,3,4,6,8,16,24]);
var shadow = function (z) { return $Material$Style.cs(A2($Basics._op["++"],"mdl-shadow--",A2($Basics._op["++"],$Basics.toString(z),"dp")));}; var shadow = function (z) { return $Material$Style.cs(A2($Basics._op["++"],"mdl-shadow--",A2($Basics._op["++"],$Basics.toString(z),"dp")));};
return _elm.Material.Elevation.values = {_op: _op,shadow: shadow,validElevations: validElevations,transition: transition}; var e2 = shadow(2);
var e3 = shadow(3);
var e4 = shadow(4);
var e6 = shadow(6);
var e8 = shadow(8);
var e16 = shadow(16);
var e24 = shadow(24);
var elevations = _U.list([{ctor: "_Tuple2",_0: e2,_1: 2}
,{ctor: "_Tuple2",_0: e3,_1: 3}
,{ctor: "_Tuple2",_0: e4,_1: 4}
,{ctor: "_Tuple2",_0: e6,_1: 6}
,{ctor: "_Tuple2",_0: e8,_1: 8}
,{ctor: "_Tuple2",_0: e16,_1: 16}
,{ctor: "_Tuple2",_0: e24,_1: 24}]);
return _elm.Material.Elevation.values = {_op: _op,e2: e2,e3: e3,e4: e4,e6: e6,e8: e8,e16: e16,e24: e24,elevations: elevations,transition: transition};
}; };
Elm.Demo = Elm.Demo || {}; Elm.Demo = Elm.Demo || {};
Elm.Demo.Elevation = Elm.Demo.Elevation || {}; Elm.Demo.Elevation = Elm.Demo.Elevation || {};
@ -12632,7 +12645,8 @@ Elm.Demo.Elevation.make = function (_elm) {
var intro = A2($Demo$Page.fromMDL, var intro = A2($Demo$Page.fromMDL,
"https://github.com/google/material-design-lite/blob/master/src/shadow/README.md", "https://github.com/google/material-design-lite/blob/master/src/shadow/README.md",
"\n > The Material Design Lite (MDL) shadow is not a component in the same sense as\n> an MDL card, menu, or textbox; it is a visual effect that can be assigned to a\n> user interface element. The effect simulates a three-dimensional positioning of\n> the element, as though it is slightly raised above the surface it rests upon —\n> a positive z-axis value, in user interface terms. The shadow starts at the\n> edges of the element and gradually fades outward, providing a realistic 3-D\n> effect.\n> \n> Shadows are a convenient and intuitive means of distinguishing an element from\n> its surroundings. A shadow can draw the user\'s eye to an object and emphasize\n> the object\'s importance, uniqueness, or immediacy.\n> \n> Shadows are a well-established feature in user interfaces, and provide users\n> with a visual clue to an object\'s intended use or value. Their design and use\n> is an important factor in the overall user experience.)\n\nThe [Material Design Specification](https://www.google.com/design/spec/what-is-material/elevation-shadows.html#elevation-shadows-elevation-android-)\npre-defines appropriate elevation for most UI elements; you need to manually\nassign shadows only to your own elements. \n\nYou are encouraged to visit the\n[Material Design specification](https://www.google.com/design/spec/what-is-material/elevation-shadows.html)\nfor details about appropriate use of shadows. \n"); "\n > The Material Design Lite (MDL) shadow is not a component in the same sense as\n> an MDL card, menu, or textbox; it is a visual effect that can be assigned to a\n> user interface element. The effect simulates a three-dimensional positioning of\n> the element, as though it is slightly raised above the surface it rests upon —\n> a positive z-axis value, in user interface terms. The shadow starts at the\n> edges of the element and gradually fades outward, providing a realistic 3-D\n> effect.\n> \n> Shadows are a convenient and intuitive means of distinguishing an element from\n> its surroundings. A shadow can draw the user\'s eye to an object and emphasize\n> the object\'s importance, uniqueness, or immediacy.\n> \n> Shadows are a well-established feature in user interfaces, and provide users\n> with a visual clue to an object\'s intended use or value. Their design and use\n> is an important factor in the overall user experience.)\n\nThe [Material Design Specification](https://www.google.com/design/spec/what-is-material/elevation-shadows.html#elevation-shadows-elevation-android-)\npre-defines appropriate elevation for most UI elements; you need to manually\nassign shadows only to your own elements. \n\nYou are encouraged to visit the\n[Material Design specification](https://www.google.com/design/spec/what-is-material/elevation-shadows.html)\nfor details about appropriate use of shadows. \n");
var elevate = function (k) { var elevate = function (_p0) {
var _p1 = _p0;
return A2($Material$Style.div, return A2($Material$Style.div,
_U.list([A2($Material$Style.css,"height","96px") _U.list([A2($Material$Style.css,"height","96px")
,A2($Material$Style.css,"width","128px") ,A2($Material$Style.css,"width","128px")
@ -12641,8 +12655,10 @@ Elm.Demo.Elevation.make = function (_elm) {
,A2($Material$Style.css,"flex-flow","row wrap") ,A2($Material$Style.css,"flex-flow","row wrap")
,A2($Material$Style.css,"justify-content","center") ,A2($Material$Style.css,"justify-content","center")
,A2($Material$Style.css,"align-items","center") ,A2($Material$Style.css,"align-items","center")
,$Material$Elevation.shadow(k)]), ,_p1._0]),
_U.list([A2($Material$Style.div,_U.list([$Material$Style.cs(".mdl-typography--title-color-contrast")]),_U.list([$Html.text($Basics.toString(k))]))])); _U.list([A2($Material$Style.div,
_U.list([$Material$Style.cs(".mdl-typography--title-color-contrast"),A2($Material$Style.css,"box-radius","2pt")]),
_U.list([$Html.text($Basics.toString(_p1._1))]))]));
}; };
var view = A5($Demo$Page.body1, var view = A5($Demo$Page.body1,
"Elevation", "Elevation",
@ -12651,7 +12667,7 @@ Elm.Demo.Elevation.make = function (_elm) {
references, references,
A2(F2(function (x,y) { return A2($List._op["::"],x,y);}), A2(F2(function (x,y) { return A2($List._op["::"],x,y);}),
A2($Html.p,_U.list([]),_U.list([$Html.text("Below are boxes drawn at various elevations.")])), A2($Html.p,_U.list([]),_U.list([$Html.text("Below are boxes drawn at various elevations.")])),
A2($List.map,elevate,A2($List._op["::"],0,$Material$Elevation.validElevations)))); A2($List.map,elevate,A2($List._op["::"],{ctor: "_Tuple2",_0: $Material$Style.cs(""),_1: 0},$Material$Elevation.elevations))));
return _elm.Demo.Elevation.values = {_op: _op,elevate: elevate,view: view,intro: intro,srcUrl: srcUrl,references: references}; return _elm.Demo.Elevation.values = {_op: _op,elevate: elevate,view: view,intro: intro,srcUrl: srcUrl,references: references};
}; };
Elm.Demo = Elm.Demo || {}; Elm.Demo = Elm.Demo || {};
@ -12902,6 +12918,7 @@ Elm.Material.Textfield.make = function (_elm) {
$List = Elm.List.make(_elm), $List = Elm.List.make(_elm),
$Material$Component = Elm.Material.Component.make(_elm), $Material$Component = Elm.Material.Component.make(_elm),
$Material$Helpers = Elm.Material.Helpers.make(_elm), $Material$Helpers = Elm.Material.Helpers.make(_elm),
$Material$Style = Elm.Material.Style.make(_elm),
$Maybe = Elm.Maybe.make(_elm), $Maybe = Elm.Maybe.make(_elm),
$Result = Elm.Result.make(_elm), $Result = Elm.Result.make(_elm),
$Signal = Elm.Signal.make(_elm); $Signal = Elm.Signal.make(_elm);
@ -12926,20 +12943,27 @@ Elm.Material.Textfield.make = function (_elm) {
var Focus = {ctor: "Focus"}; var Focus = {ctor: "Focus"};
var Blur = {ctor: "Blur"}; var Blur = {ctor: "Blur"};
var Input = function (a) { return {ctor: "Input",_0: a};}; var Input = function (a) { return {ctor: "Input",_0: a};};
var view = F2(function (addr,model) { var view = F3(function (addr,model,styles) {
var labelText = A2($Maybe.map,function (_) { return _.text;},model.label); var labelText = A2($Maybe.map,function (_) { return _.text;},model.label);
var hasError = A2($Maybe.withDefault,false,A2($Maybe.map,$Basics.always(true),model.error)); var hasError = A2($Maybe.withDefault,false,A2($Maybe.map,$Basics.always(true),model.error));
var hasFloat = A2($Maybe.withDefault,false,A2($Maybe.map,function (_) { return _.$float;},model.label)); var hasFloat = A2($Maybe.withDefault,false,A2($Maybe.map,function (_) { return _.$float;},model.label));
return A3($Material$Helpers.filter, return A3($Material$Helpers.filter,
$Html.div, $Material$Style.div,
_U.list([$Html$Attributes.classList(_U.list([{ctor: "_Tuple2",_0: "mdl-textfield",_1: true} A2($List._op["::"],
,{ctor: "_Tuple2",_0: "mdl-js-textfield",_1: true} $Material$Style.cs("mdl-textfield"),
,{ctor: "_Tuple2",_0: "is-upgraded",_1: true} A2($List._op["::"],
,{ctor: "_Tuple2",_0: "mdl-textfield--floating-label",_1: hasFloat} $Material$Style.cs("mdl-js-textfield"),
,{ctor: "_Tuple2",_0: "is-invalid",_1: hasError} A2($List._op["::"],
,{ctor: "_Tuple2",_0: "is-dirty",_1: !_U.eq(model.value,"")} $Material$Style.cs("is-upgraded"),
,{ctor: "_Tuple2",_0: "is-focused",_1: model.isFocused && $Basics.not(model.isDisabled)} A2($List._op["::"],
,{ctor: "_Tuple2",_0: "is-disabled",_1: model.isDisabled}]))]), A2($Material$Style.cs$,"mdl-textfield--floating-label",hasFloat),
A2($List._op["::"],
A2($Material$Style.cs$,"is-invalid",hasError),
A2($List._op["::"],
A2($Material$Style.cs$,"is-dirty",!_U.eq(model.value,"")),
A2($List._op["::"],
A2($Material$Style.cs$,"is-focused",model.isFocused && $Basics.not(model.isDisabled)),
A2($List._op["::"],A2($Material$Style.cs$,"is-disabled",model.isDisabled),styles)))))))),
_U.list([$Maybe.Just(A2($Html.input, _U.list([$Maybe.Just(A2($Html.input,
_U.list([$Html$Attributes.$class("mdl-textfield__input") _U.list([$Html$Attributes.$class("mdl-textfield__input")
,$Html$Attributes.style(_U.list([{ctor: "_Tuple2",_0: "outline",_1: "none"}])) ,$Html$Attributes.style(_U.list([{ctor: "_Tuple2",_0: "outline",_1: "none"}]))
@ -13178,7 +13202,9 @@ Elm.Demo.Snackbar.make = function (_elm) {
,$Html$Attributes.key($Basics.toString(_p11))]), ,$Html$Attributes.key($Basics.toString(_p11))]),
_U.list([A4($Material$Style.styled, _U.list([A4($Material$Style.styled,
$Html.div, $Html.div,
_U.list([$Material$Color.background(color),$Material$Color.text($Material$Color.primaryContrast),$Material$Elevation.shadow(selected ? 8 : 2)]), _U.list([$Material$Color.background(color)
,$Material$Color.text($Material$Color.primaryContrast)
,selected ? $Material$Elevation.e8 : $Material$Elevation.e2]),
_U.list([$Html$Attributes.style(_U.list([{ctor: "_Tuple2",_0: "display",_1: "inline-flex"} _U.list([$Html$Attributes.style(_U.list([{ctor: "_Tuple2",_0: "display",_1: "inline-flex"}
,{ctor: "_Tuple2",_0: "align-items",_1: "center"} ,{ctor: "_Tuple2",_0: "align-items",_1: "center"}
,{ctor: "_Tuple2",_0: "justify-content",_1: "center"} ,{ctor: "_Tuple2",_0: "justify-content",_1: "center"}
@ -13350,7 +13376,7 @@ Elm.Demo.Textfields.make = function (_elm) {
function (c) { function (c) {
return A2($Material$Grid.cell, return A2($Material$Grid.cell,
_U.list([A2($Material$Grid.size,$Material$Grid.All,4),A2($Material$Grid.offset,$Material$Grid.Desktop,1)]), _U.list([A2($Material$Grid.size,$Material$Grid.All,4),A2($Material$Grid.offset,$Material$Grid.Desktop,1)]),
_U.list([A2(c.view,addr,model.mdl)])); _U.list([A3(c.view,addr,model.mdl,_U.list([]))]));
}, },
_U.list([field0,field1,field2,field3,field4]))))))); _U.list([field0,field1,field2,field3,field4])))))));
}); });