slightly better CSS
This commit is contained in:
parent
ccc2da1107
commit
5216e77e0a
3 changed files with 111 additions and 22 deletions
111
ui/assets/app.js
111
ui/assets/app.js
|
@ -10191,7 +10191,8 @@ var PS = {};
|
|||
var Halogen_HTML_Core = $PS["Halogen.HTML.Core"];
|
||||
var prop = function (dictIsProp) {
|
||||
return Halogen_HTML_Core.prop(dictIsProp);
|
||||
};
|
||||
};
|
||||
var title = prop(Halogen_HTML_Core.isPropString)("title");
|
||||
var type_ = function (dictIsProp) {
|
||||
return prop(dictIsProp)("type");
|
||||
};
|
||||
|
@ -10200,6 +10201,7 @@ var PS = {};
|
|||
var attr = Halogen_HTML_Core.attr(Data_Maybe.Nothing.value);
|
||||
exports["attr"] = attr;
|
||||
exports["id_"] = id_;
|
||||
exports["title"] = title;
|
||||
exports["type_"] = type_;
|
||||
exports["value"] = value;
|
||||
})(PS);
|
||||
|
@ -10264,12 +10266,14 @@ var PS = {};
|
|||
return element("input")(props)([ ]);
|
||||
};
|
||||
var span = element("span");
|
||||
var div = element("div");
|
||||
var div = element("div");
|
||||
var button = element("button");
|
||||
var br = function (props) {
|
||||
return element("br")(props)([ ]);
|
||||
};
|
||||
var br_ = br([ ]);
|
||||
exports["br_"] = br_;
|
||||
exports["button"] = button;
|
||||
exports["div"] = div;
|
||||
exports["input"] = input;
|
||||
exports["span"] = span;
|
||||
|
@ -10293,6 +10297,14 @@ var PS = {};
|
|||
};
|
||||
exports["currentTarget"] = currentTarget;
|
||||
})(PS);
|
||||
(function($PS) {
|
||||
// Generated by purs version 0.13.3
|
||||
"use strict";
|
||||
$PS["Web.UIEvent.MouseEvent.EventTypes"] = $PS["Web.UIEvent.MouseEvent.EventTypes"] || {};
|
||||
var exports = $PS["Web.UIEvent.MouseEvent.EventTypes"];
|
||||
var click = "click";
|
||||
exports["click"] = click;
|
||||
})(PS);
|
||||
(function($PS) {
|
||||
// Generated by purs version 0.13.3
|
||||
"use strict";
|
||||
|
@ -10310,15 +10322,24 @@ var PS = {};
|
|||
var Foreign_Index = $PS["Foreign.Index"];
|
||||
var Halogen_HTML_Core = $PS["Halogen.HTML.Core"];
|
||||
var Halogen_Query_Input = $PS["Halogen.Query.Input"];
|
||||
var Unsafe_Coerce = $PS["Unsafe.Coerce"];
|
||||
var Web_Event_Event = $PS["Web.Event.Event"];
|
||||
var Web_HTML_Event_EventTypes = $PS["Web.HTML.Event.EventTypes"];
|
||||
var Web_UIEvent_MouseEvent_EventTypes = $PS["Web.UIEvent.MouseEvent.EventTypes"];
|
||||
var mouseHandler = Unsafe_Coerce.unsafeCoerce;
|
||||
var handler = function (et) {
|
||||
var $0 = Halogen_HTML_Core.handler(et);
|
||||
var $1 = Data_Functor.map(Data_Functor.functorFn)(Data_Functor.map(Data_Maybe.functorMaybe)(Halogen_Query_Input.Action.create));
|
||||
return function ($2) {
|
||||
return $0($1($2));
|
||||
};
|
||||
};
|
||||
};
|
||||
var onClick = (function () {
|
||||
var $3 = handler(Web_UIEvent_MouseEvent_EventTypes.click);
|
||||
return function ($4) {
|
||||
return $3(mouseHandler($4));
|
||||
};
|
||||
})();
|
||||
var addForeignPropHandler = function (key) {
|
||||
return function (prop) {
|
||||
return function (reader) {
|
||||
|
@ -10334,6 +10355,7 @@ var PS = {};
|
|||
};
|
||||
};
|
||||
var onValueChange = addForeignPropHandler(Web_HTML_Event_EventTypes.change)("value")(Foreign.readString);
|
||||
exports["onClick"] = onClick;
|
||||
exports["onValueChange"] = onValueChange;
|
||||
})(PS);
|
||||
(function($PS) {
|
||||
|
@ -11018,7 +11040,22 @@ var PS = {};
|
|||
return new AccentChanged(value0);
|
||||
};
|
||||
return AccentChanged;
|
||||
})();
|
||||
})();
|
||||
var SetToSolarized = (function () {
|
||||
function SetToSolarized() {
|
||||
|
||||
};
|
||||
SetToSolarized.value = new SetToSolarized();
|
||||
return SetToSolarized;
|
||||
})();
|
||||
var SetToY = (function () {
|
||||
function SetToY() {
|
||||
|
||||
};
|
||||
SetToY.value = new SetToY();
|
||||
return SetToY;
|
||||
})();
|
||||
var solyellow = Color.lab(60.0)(10.0)(65.0);
|
||||
var solbase3 = Color.lab(97.0)(0.0)(10.0);
|
||||
var solbase03 = Color.lab(15.0)(-12.0)(-12.0);
|
||||
var render = function (state) {
|
||||
|
@ -11076,7 +11113,11 @@ var PS = {};
|
|||
return Data_Maybe.Just.create(new LightChanged(Data_Maybe.fromMaybe(solbase03)(Color.fromHexString(c))));
|
||||
}), Halogen_HTML_Properties.value(Color.toHexString(state.light)) ]), Halogen_HTML_Core.text(" Contrast:"), Halogen_HTML_Elements.input([ Halogen_HTML_Properties.type_(Halogen_HTML_Core.isPropInputType)(DOM_HTML_Indexed_InputType.InputColor.value), Halogen_HTML_Events.onValueChange(function (c) {
|
||||
return Data_Maybe.Just.create(new AccentChanged(Data_Maybe.fromMaybe(solbase03)(Color.fromHexString(c))));
|
||||
}), Halogen_HTML_Properties.value(Color.toHexString(state.accent)) ]) ]), Halogen_HTML_Elements.div([ Halogen_HTML_Properties.id_("colors") ])(Data_Functor.map(Data_Functor.functorArray)(mkDivColor)(palette)), Halogen_HTML_Elements.div([ Halogen_HTML_Properties.id_("code") ])([ mkDarkCodeExample ]), Halogen_HTML_Elements.div([ Halogen_HTML_Properties.id_("code") ])([ mkLightCodeExample ]), Halogen_HTML_Elements.div([ Halogen_HTML_Properties.id_("css") ])(Data_Semigroup.append(Data_Semigroup.semigroupArray)([ Halogen_HTML_Elements.div([ Halogen_HTML_CSS.style(CSS_Font.color(cssCol("b0"))) ])([ Halogen_HTML_Core.text(":root {") ]) ])(Data_Semigroup.append(Data_Semigroup.semigroupArray)(Data_Functor.map(Data_Functor.functorArray)(mkCssColor)(palette))([ Halogen_HTML_Elements.div([ Halogen_HTML_CSS.style(CSS_Font.color(cssCol("b0"))) ])([ Halogen_HTML_Core.text("}") ]) ]))) ]);
|
||||
}), Halogen_HTML_Properties.value(Color.toHexString(state.accent)) ]) ]), Halogen_HTML_Elements.div([ ])([ Halogen_HTML_Elements.button([ Halogen_HTML_Events.onClick(function (v) {
|
||||
return new Data_Maybe.Just(SetToSolarized.value);
|
||||
}), Halogen_HTML_Properties.title("Set solarized") ])([ Halogen_HTML_Core.text("Set solarized") ]), Halogen_HTML_Elements.button([ Halogen_HTML_Events.onClick(function (v) {
|
||||
return new Data_Maybe.Just(SetToY.value);
|
||||
}), Halogen_HTML_Properties.title("Set grayer") ])([ Halogen_HTML_Core.text("Set Y") ]) ]), Halogen_HTML_Elements.div([ Halogen_HTML_Properties.id_("colors") ])(Data_Functor.map(Data_Functor.functorArray)(mkDivColor)(palette)), Halogen_HTML_Elements.div([ Halogen_HTML_Properties.id_("code") ])([ mkDarkCodeExample ]), Halogen_HTML_Elements.div([ Halogen_HTML_Properties.id_("code") ])([ mkLightCodeExample ]), Halogen_HTML_Elements.div([ Halogen_HTML_Properties.id_("css") ])(Data_Semigroup.append(Data_Semigroup.semigroupArray)([ Halogen_HTML_Elements.div([ Halogen_HTML_CSS.style(CSS_Font.color(cssCol("b0"))) ])([ Halogen_HTML_Core.text(":root {") ]) ])(Data_Semigroup.append(Data_Semigroup.semigroupArray)(Data_Functor.map(Data_Functor.functorArray)(mkCssColor)(palette))([ Halogen_HTML_Elements.div([ Halogen_HTML_CSS.style(CSS_Font.color(cssCol("b0"))) ])([ Halogen_HTML_Core.text("}") ]) ]))) ]);
|
||||
};
|
||||
var initialState = function (v) {
|
||||
return {
|
||||
|
@ -11087,18 +11128,6 @@ var PS = {};
|
|||
};
|
||||
var handleAction = function (v) {
|
||||
if (v instanceof DarkChanged) {
|
||||
return Control_Monad_State_Class.modify_(Halogen_Query_HalogenM.monadStateHalogenM)(function (st) {
|
||||
var $15 = {};
|
||||
for (var $16 in st) {
|
||||
if ({}.hasOwnProperty.call(st, $16)) {
|
||||
$15[$16] = st[$16];
|
||||
};
|
||||
};
|
||||
$15.dark = v.value0;
|
||||
return $15;
|
||||
});
|
||||
};
|
||||
if (v instanceof LightChanged) {
|
||||
return Control_Monad_State_Class.modify_(Halogen_Query_HalogenM.monadStateHalogenM)(function (st) {
|
||||
var $19 = {};
|
||||
for (var $20 in st) {
|
||||
|
@ -11106,11 +11135,11 @@ var PS = {};
|
|||
$19[$20] = st[$20];
|
||||
};
|
||||
};
|
||||
$19.light = v.value0;
|
||||
$19.dark = v.value0;
|
||||
return $19;
|
||||
});
|
||||
};
|
||||
if (v instanceof AccentChanged) {
|
||||
if (v instanceof LightChanged) {
|
||||
return Control_Monad_State_Class.modify_(Halogen_Query_HalogenM.monadStateHalogenM)(function (st) {
|
||||
var $23 = {};
|
||||
for (var $24 in st) {
|
||||
|
@ -11118,11 +11147,51 @@ var PS = {};
|
|||
$23[$24] = st[$24];
|
||||
};
|
||||
};
|
||||
$23.accent = v.value0;
|
||||
$23.light = v.value0;
|
||||
return $23;
|
||||
});
|
||||
};
|
||||
throw new Error("Failed pattern match at Solaryzed (line 185, column 16 - line 188, column 56): " + [ v.constructor.name ]);
|
||||
if (v instanceof AccentChanged) {
|
||||
return Control_Monad_State_Class.modify_(Halogen_Query_HalogenM.monadStateHalogenM)(function (st) {
|
||||
var $27 = {};
|
||||
for (var $28 in st) {
|
||||
if ({}.hasOwnProperty.call(st, $28)) {
|
||||
$27[$28] = st[$28];
|
||||
};
|
||||
};
|
||||
$27.accent = v.value0;
|
||||
return $27;
|
||||
});
|
||||
};
|
||||
if (v instanceof SetToSolarized) {
|
||||
return Control_Monad_State_Class.modify_(Halogen_Query_HalogenM.monadStateHalogenM)(function (st) {
|
||||
var $31 = {};
|
||||
for (var $32 in st) {
|
||||
if ({}.hasOwnProperty.call(st, $32)) {
|
||||
$31[$32] = st[$32];
|
||||
};
|
||||
};
|
||||
$31.dark = solbase03;
|
||||
$31.light = solbase3;
|
||||
$31.accent = solyellow;
|
||||
return $31;
|
||||
});
|
||||
};
|
||||
if (v instanceof SetToY) {
|
||||
return Control_Monad_State_Class.modify_(Halogen_Query_HalogenM.monadStateHalogenM)(function (st) {
|
||||
var $34 = {};
|
||||
for (var $35 in st) {
|
||||
if ({}.hasOwnProperty.call(st, $35)) {
|
||||
$34[$35] = st[$35];
|
||||
};
|
||||
};
|
||||
$34.dark = Data_Maybe.fromMaybe(solbase03)(Color.fromHexString("#202631"));
|
||||
$34.light = Data_Maybe.fromMaybe(solbase3)(Color.fromHexString("#f4f7ff"));
|
||||
$34.accent = Data_Maybe.fromMaybe(solyellow)(Color.fromHexString("#a98d50"));
|
||||
return $34;
|
||||
});
|
||||
};
|
||||
throw new Error("Failed pattern match at Solaryzed (line 198, column 16 - line 207, column 91): " + [ v.constructor.name ]);
|
||||
};
|
||||
var component = Halogen_Component.mkComponent({
|
||||
initialState: initialState,
|
||||
|
|
|
@ -13,6 +13,8 @@
|
|||
font-family: "pt mono",Menlo,monospace;
|
||||
display: block;
|
||||
}
|
||||
button { border: solid; font-weight: bold; }
|
||||
button:hover { cursor: pointer; }
|
||||
#dark { color: rgba(255,255,255,0.5); }
|
||||
#light { color: rgba(0,0,0,0.5); }
|
||||
#colors > div { width: 80px; margin: 10px; display: inline-block; border-radius: 3px; }
|
||||
|
|
|
@ -29,6 +29,8 @@ type State = { dark :: Color
|
|||
data Action = DarkChanged Color
|
||||
| LightChanged Color
|
||||
| AccentChanged Color
|
||||
| SetToSolarized
|
||||
| SetToY
|
||||
|
||||
component :: forall q i o m. H.Component HH.HTML q i o m
|
||||
component =
|
||||
|
@ -73,6 +75,17 @@ render state =
|
|||
, HP.value (toHexString state.accent)
|
||||
]
|
||||
]
|
||||
, HH.div []
|
||||
[ HH.button
|
||||
[ HE.onClick \_ -> Just SetToSolarized
|
||||
, HP.title "Set solarized"]
|
||||
[ HH.text "Set solarized" ]
|
||||
, HH.button
|
||||
[ HE.onClick \_ -> Just SetToY
|
||||
, HP.title "Set grayer"
|
||||
]
|
||||
[ HH.text "Set Y"]
|
||||
]
|
||||
, HH.div
|
||||
[ HP.id_ "colors" ]
|
||||
(map mkDivColor palette)
|
||||
|
@ -186,5 +199,10 @@ handleAction = case _ of
|
|||
DarkChanged c -> H.modify_ \st -> st { dark = c }
|
||||
LightChanged c -> H.modify_ \st -> st { light = c }
|
||||
AccentChanged c -> H.modify_ \st -> st { accent = c }
|
||||
|
||||
SetToSolarized -> H.modify_ \st -> st { dark = solbase03
|
||||
, light = solbase3
|
||||
, accent = solyellow }
|
||||
SetToY -> H.modify_ \st -> st { dark = fromMaybe solbase03 (fromHexString "#202631")
|
||||
, light = fromMaybe solbase3 (fromHexString "#f4f7ff")
|
||||
, accent = fromMaybe solyellow (fromHexString "#a98d50") }
|
||||
|
||||
|
|
Loading…
Reference in a new issue