~reykjalin/kilo-gui

c64ab7c0f87e0daff47234f4af75c21026fe2c94 — Kristófer Reykjalín Þorláksson 4 years ago 6de5687 
Remove components to start with a clean slate
patch browse .tar.gz 
4 files changed, 4 insertions(+), 128 deletions(-)

D src/AnimatedText.re
M src/Kilo.re
D src/SimpleButton.re
D src/Theme.re

D src/AnimatedText.re => src/AnimatedText.re +0 -35
@@ 1,35 0,0 @@
open Revery;
open Revery.UI;

module Styles = {
  open Style;

  let text = (~yOffset) => [
    color(Color.hex(Theme.darkBlue)),
    transform([Transform.TranslateY(yOffset)]),
  ];
};

let%component make = (~delay: Time.t, ~text: string, ()) => {
  let%hook (yOffset, _state, _reset) =
    Hooks.animation(
      Animation.animate(Time.ms(500))
      |> Animation.delay(delay)
      |> Animation.ease(Easing.ease)
      |> Animation.tween(50., 0.),
    );

  let%hook (animatedOpacity, _state, _reset) =
    Hooks.animation(
      Animation.animate(Time.ms(750))
      |> Animation.delay(delay)
      |> Animation.ease(Easing.ease)
      |> Animation.tween(0., 1.),
    );

  <Opacity opacity=animatedOpacity>
    <Padding padding=6>
      <Text fontSize=16. style={Styles.text(~yOffset)} text />
    </Padding>
  </Opacity>;
};


M src/Kilo.re => src/Kilo.re +4 -30
@@ 2,33 2,7 @@ open Revery;
open Revery.UI;
open Revery.UI.Components;

module Styles = {
  open Style;

  let text = [marginTop(24), color(Color.hex(Theme.darkBlue))];
};

let%component main = () => {
  let%hook (count, setCount) = React.Hooks.state(0);

  let increment = () => setCount(count => count + 1);

  <Center>
    <Padding padding=24>
      <Row>
        <AnimatedText delay={Time.ms(0)} text="Welcome" />
        <AnimatedText delay={Time.ms(500)} text="to" />
        <AnimatedText delay={Time.ms(1000)} text="Revery" />
      </Row>
    </Padding>
    <SimpleButton text="Increment" onClick=increment />
    <Text
      fontSize=16.
      style=Styles.text
      text={"Times clicked: " ++ string_of_int(count)}
    />
  </Center>;
};
let main = () => React.empty;

let init = app => {
  Revery.App.initConsole();


@@ 39,10 13,10 @@ let init = app => {
  let win =
    App.createWindow(
      app,
      "Hello Revery!",
      "Kilo",
      ~createOptions=
        WindowCreateOptions.create(
          ~backgroundColor=Color.hex(Theme.lightBlue),
          ~backgroundColor=Colors.white,
          ~width=512,
          ~height=384,
          (),


@@ 53,4 27,4 @@ let init = app => {
  ();
};

App.start(init);
App.start(init);
\ No newline at end of file


D src/SimpleButton.re => src/SimpleButton.re +0 -61
@@ 1,61 0,0 @@
open Revery;
open Revery.UI;
open Revery.UI.Components;

module Constants = {
  let boxShadowActiveTransparency = 0.0;
  let boxShadowHoverTransparency = 0.3;
  let boxShadowNotHoveredTransparency = 0.15;
};

module Styles = {
  open Style;

  let button = boxShadowTransparency => [
    backgroundColor(Color.hex(Theme.darkBlue)),
    boxShadow(
      ~yOffset=6.,
      ~xOffset=0.,
      ~blurRadius=16.,
      ~color=Color.rgba(0., 0., 0., boxShadowTransparency),
      ~spreadRadius=12.,
    ),
    paddingHorizontal(24),
    paddingVertical(12),
    borderRadius(10.),
  ];

  let buttonText = [color(Colors.white)];
};

let%component make = (~text, ~onClick, ()) => {
  let%hook (boxShadowTransparency, setBoxShadowTransparency) =
    Hooks.state(Constants.boxShadowNotHoveredTransparency);

  let%hook transitionedBoxShadowTransparency =
    Hooks.transition(~duration=Time.ms(150), boxShadowTransparency);

  let updateShadowTransparency = (_event, ~newOpacity) => {
    setBoxShadowTransparency(_prevTransparency => newOpacity);
  };

  <View
    onMouseUp={updateShadowTransparency(
      ~newOpacity=Constants.boxShadowHoverTransparency,
    )}
    onMouseDown={updateShadowTransparency(
      ~newOpacity=Constants.boxShadowActiveTransparency,
    )}
    onMouseEnter={updateShadowTransparency(
      ~newOpacity=Constants.boxShadowHoverTransparency,
    )}
    onMouseLeave={updateShadowTransparency(
      ~newOpacity=Constants.boxShadowNotHoveredTransparency,
    )}>
    <Clickable onClick>
      <View style={Styles.button(transitionedBoxShadowTransparency)}>
        <Text fontSize=16. style=Styles.buttonText text />
      </View>
    </Clickable>
  </View>;
};


D src/Theme.re => src/Theme.re +0 -2
@@ 1,2 0,0 @@
let lightBlue = "#F6F9FF";
let darkBlue = "#2667FF";