slightly better CSS
This commit is contained in:
parent
ccc2da1107
commit
5216e77e0a
3 changed files with 111 additions and 22 deletions
103
ui/assets/app.js
103
ui/assets/app.js
|
@ -10192,6 +10192,7 @@ var PS = {};
|
||||||
var prop = function (dictIsProp) {
|
var prop = function (dictIsProp) {
|
||||||
return Halogen_HTML_Core.prop(dictIsProp);
|
return Halogen_HTML_Core.prop(dictIsProp);
|
||||||
};
|
};
|
||||||
|
var title = prop(Halogen_HTML_Core.isPropString)("title");
|
||||||
var type_ = function (dictIsProp) {
|
var type_ = function (dictIsProp) {
|
||||||
return prop(dictIsProp)("type");
|
return prop(dictIsProp)("type");
|
||||||
};
|
};
|
||||||
|
@ -10200,6 +10201,7 @@ var PS = {};
|
||||||
var attr = Halogen_HTML_Core.attr(Data_Maybe.Nothing.value);
|
var attr = Halogen_HTML_Core.attr(Data_Maybe.Nothing.value);
|
||||||
exports["attr"] = attr;
|
exports["attr"] = attr;
|
||||||
exports["id_"] = id_;
|
exports["id_"] = id_;
|
||||||
|
exports["title"] = title;
|
||||||
exports["type_"] = type_;
|
exports["type_"] = type_;
|
||||||
exports["value"] = value;
|
exports["value"] = value;
|
||||||
})(PS);
|
})(PS);
|
||||||
|
@ -10265,11 +10267,13 @@ var PS = {};
|
||||||
};
|
};
|
||||||
var span = element("span");
|
var span = element("span");
|
||||||
var div = element("div");
|
var div = element("div");
|
||||||
|
var button = element("button");
|
||||||
var br = function (props) {
|
var br = function (props) {
|
||||||
return element("br")(props)([ ]);
|
return element("br")(props)([ ]);
|
||||||
};
|
};
|
||||||
var br_ = br([ ]);
|
var br_ = br([ ]);
|
||||||
exports["br_"] = br_;
|
exports["br_"] = br_;
|
||||||
|
exports["button"] = button;
|
||||||
exports["div"] = div;
|
exports["div"] = div;
|
||||||
exports["input"] = input;
|
exports["input"] = input;
|
||||||
exports["span"] = span;
|
exports["span"] = span;
|
||||||
|
@ -10293,6 +10297,14 @@ var PS = {};
|
||||||
};
|
};
|
||||||
exports["currentTarget"] = currentTarget;
|
exports["currentTarget"] = currentTarget;
|
||||||
})(PS);
|
})(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) {
|
(function($PS) {
|
||||||
// Generated by purs version 0.13.3
|
// Generated by purs version 0.13.3
|
||||||
"use strict";
|
"use strict";
|
||||||
|
@ -10310,8 +10322,11 @@ var PS = {};
|
||||||
var Foreign_Index = $PS["Foreign.Index"];
|
var Foreign_Index = $PS["Foreign.Index"];
|
||||||
var Halogen_HTML_Core = $PS["Halogen.HTML.Core"];
|
var Halogen_HTML_Core = $PS["Halogen.HTML.Core"];
|
||||||
var Halogen_Query_Input = $PS["Halogen.Query.Input"];
|
var Halogen_Query_Input = $PS["Halogen.Query.Input"];
|
||||||
|
var Unsafe_Coerce = $PS["Unsafe.Coerce"];
|
||||||
var Web_Event_Event = $PS["Web.Event.Event"];
|
var Web_Event_Event = $PS["Web.Event.Event"];
|
||||||
var Web_HTML_Event_EventTypes = $PS["Web.HTML.Event.EventTypes"];
|
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 handler = function (et) {
|
||||||
var $0 = Halogen_HTML_Core.handler(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));
|
var $1 = Data_Functor.map(Data_Functor.functorFn)(Data_Functor.map(Data_Maybe.functorMaybe)(Halogen_Query_Input.Action.create));
|
||||||
|
@ -10319,6 +10334,12 @@ var PS = {};
|
||||||
return $0($1($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) {
|
var addForeignPropHandler = function (key) {
|
||||||
return function (prop) {
|
return function (prop) {
|
||||||
return function (reader) {
|
return function (reader) {
|
||||||
|
@ -10334,6 +10355,7 @@ var PS = {};
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
var onValueChange = addForeignPropHandler(Web_HTML_Event_EventTypes.change)("value")(Foreign.readString);
|
var onValueChange = addForeignPropHandler(Web_HTML_Event_EventTypes.change)("value")(Foreign.readString);
|
||||||
|
exports["onClick"] = onClick;
|
||||||
exports["onValueChange"] = onValueChange;
|
exports["onValueChange"] = onValueChange;
|
||||||
})(PS);
|
})(PS);
|
||||||
(function($PS) {
|
(function($PS) {
|
||||||
|
@ -11019,6 +11041,21 @@ var PS = {};
|
||||||
};
|
};
|
||||||
return AccentChanged;
|
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 solbase3 = Color.lab(97.0)(0.0)(10.0);
|
||||||
var solbase03 = Color.lab(15.0)(-12.0)(-12.0);
|
var solbase03 = Color.lab(15.0)(-12.0)(-12.0);
|
||||||
var render = function (state) {
|
var render = function (state) {
|
||||||
|
@ -11076,7 +11113,11 @@ var PS = {};
|
||||||
return Data_Maybe.Just.create(new LightChanged(Data_Maybe.fromMaybe(solbase03)(Color.fromHexString(c))));
|
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) {
|
}), 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))));
|
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) {
|
var initialState = function (v) {
|
||||||
return {
|
return {
|
||||||
|
@ -11087,18 +11128,6 @@ var PS = {};
|
||||||
};
|
};
|
||||||
var handleAction = function (v) {
|
var handleAction = function (v) {
|
||||||
if (v instanceof DarkChanged) {
|
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) {
|
return Control_Monad_State_Class.modify_(Halogen_Query_HalogenM.monadStateHalogenM)(function (st) {
|
||||||
var $19 = {};
|
var $19 = {};
|
||||||
for (var $20 in st) {
|
for (var $20 in st) {
|
||||||
|
@ -11106,11 +11135,11 @@ var PS = {};
|
||||||
$19[$20] = st[$20];
|
$19[$20] = st[$20];
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
$19.light = v.value0;
|
$19.dark = v.value0;
|
||||||
return $19;
|
return $19;
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
if (v instanceof AccentChanged) {
|
if (v instanceof LightChanged) {
|
||||||
return Control_Monad_State_Class.modify_(Halogen_Query_HalogenM.monadStateHalogenM)(function (st) {
|
return Control_Monad_State_Class.modify_(Halogen_Query_HalogenM.monadStateHalogenM)(function (st) {
|
||||||
var $23 = {};
|
var $23 = {};
|
||||||
for (var $24 in st) {
|
for (var $24 in st) {
|
||||||
|
@ -11118,11 +11147,51 @@ var PS = {};
|
||||||
$23[$24] = st[$24];
|
$23[$24] = st[$24];
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
$23.accent = v.value0;
|
$23.light = v.value0;
|
||||||
return $23;
|
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({
|
var component = Halogen_Component.mkComponent({
|
||||||
initialState: initialState,
|
initialState: initialState,
|
||||||
|
|
|
@ -13,6 +13,8 @@
|
||||||
font-family: "pt mono",Menlo,monospace;
|
font-family: "pt mono",Menlo,monospace;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
button { border: solid; font-weight: bold; }
|
||||||
|
button:hover { cursor: pointer; }
|
||||||
#dark { color: rgba(255,255,255,0.5); }
|
#dark { color: rgba(255,255,255,0.5); }
|
||||||
#light { color: rgba(0,0,0,0.5); }
|
#light { color: rgba(0,0,0,0.5); }
|
||||||
#colors > div { width: 80px; margin: 10px; display: inline-block; border-radius: 3px; }
|
#colors > div { width: 80px; margin: 10px; display: inline-block; border-radius: 3px; }
|
||||||
|
|
|
@ -29,6 +29,8 @@ type State = { dark :: Color
|
||||||
data Action = DarkChanged Color
|
data Action = DarkChanged Color
|
||||||
| LightChanged Color
|
| LightChanged Color
|
||||||
| AccentChanged Color
|
| AccentChanged Color
|
||||||
|
| SetToSolarized
|
||||||
|
| SetToY
|
||||||
|
|
||||||
component :: forall q i o m. H.Component HH.HTML q i o m
|
component :: forall q i o m. H.Component HH.HTML q i o m
|
||||||
component =
|
component =
|
||||||
|
@ -73,6 +75,17 @@ render state =
|
||||||
, HP.value (toHexString state.accent)
|
, 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
|
, HH.div
|
||||||
[ HP.id_ "colors" ]
|
[ HP.id_ "colors" ]
|
||||||
(map mkDivColor palette)
|
(map mkDivColor palette)
|
||||||
|
@ -186,5 +199,10 @@ handleAction = case _ of
|
||||||
DarkChanged c -> H.modify_ \st -> st { dark = c }
|
DarkChanged c -> H.modify_ \st -> st { dark = c }
|
||||||
LightChanged c -> H.modify_ \st -> st { light = c }
|
LightChanged c -> H.modify_ \st -> st { light = c }
|
||||||
AccentChanged c -> H.modify_ \st -> st { accent = 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