diff --git a/examples/Boxshadow.re b/examples/Boxshadow.re index 93f41389a..8a5ddd8d0 100644 --- a/examples/Boxshadow.re +++ b/examples/Boxshadow.re @@ -10,52 +10,40 @@ let parentStyles = flexDirection(`Column), ]; -let firstBoxStyle = +let firstShadow = Style.[ backgroundColor(Colors.blue), position(`Relative), width(100), height(100), + boxShadow( + ~yOffset=-10., + ~xOffset=0., + ~blurRadius=15., + ~color=Colors.black, + ~spreadRadius=10., + ), + marginVertical(30), ]; -let secondBoxStyle = +let secondShadow = Style.[ backgroundColor(Colors.red), position(`Relative), width(100), height(100), + boxShadow( + ~yOffset=10., + ~xOffset=-30., + ~blurRadius=20., + ~color=Colors.green, + ~spreadRadius=0., + ), + marginVertical(30), ]; -let firstShadow = - Style.BoxShadow.make( - ~yOffset=-10., - ~xOffset=0., - ~blurRadius=15., - ~color=Colors.black, - ~spreadRadius=10., - (), - ); - -let secondShadow = - Style.BoxShadow.make( - ~yOffset=10., - ~xOffset=-30., - ~blurRadius=20., - ~color=Colors.green, - ~spreadRadius=0., - (), - ); - let render = () => - - - - - - - - - - + + ; diff --git a/package.json b/package.json index 642b2997b..b6059b358 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "build:js": "esy b dune build examples/Examples.bc.js", "build:js:release": "esy b dune build examples/Examples.bc.js", "test": "esy b dune runtest", - "format": "esy b bash .ci/format.sh #{os}", + "format": "esy #{os == 'windows' ? 'b' : ''} bash .ci/format.sh #{os}", "run": "esy x Examples" }, "homepage": "https://github.com/bryphe/revery#readme", diff --git a/src/Native/cocoa/ReveryAppDelegate.c b/src/Native/cocoa/ReveryAppDelegate.c index ad03f692e..4ed2ad126 100644 --- a/src/Native/cocoa/ReveryAppDelegate.c +++ b/src/Native/cocoa/ReveryAppDelegate.c @@ -27,7 +27,7 @@ } +(id)newWithSDLDelegate:(SDLAppDelegate *)sdlDelegate { - return [[ReveryAppDelegate alloc] initWithSDLDelegate:sdlDelegate]; + return [[ReveryAppDelegate alloc] initWithSDLDelegate:sdlDelegate]; } diff --git a/src/Native/cocoa/ReveryAppDelegate.h b/src/Native/cocoa/ReveryAppDelegate.h index a9968c6da..ed52ab50f 100644 --- a/src/Native/cocoa/ReveryAppDelegate.h +++ b/src/Native/cocoa/ReveryAppDelegate.h @@ -14,9 +14,9 @@ (longs which represent OCaml callbacks) */ @property(nonatomic, strong) NSMutableDictionary *notificationActions; - @property(nonatomic, strong) SDLAppDelegate *sdlDelegate; +@property(nonatomic, strong) SDLAppDelegate *sdlDelegate; - -(id)initWithSDLDelegate:(SDLAppDelegate *)sdlDelegate; - +(id)newWithSDLDelegate:(SDLAppDelegate *)sdlDelegate; +-(id)initWithSDLDelegate:(SDLAppDelegate *)sdlDelegate; ++(id)newWithSDLDelegate:(SDLAppDelegate *)sdlDelegate; @end #endif \ No newline at end of file diff --git a/src/UI/Selector.re b/src/UI/Selector.re index 45a9cf8a7..acff89201 100644 --- a/src/UI/Selector.re +++ b/src/UI/Selector.re @@ -45,6 +45,8 @@ type selector('a) = | BorderHorizontal: selector(Border.t) | BorderVertical: selector(Border.t) | Transform: selector(list(Transform.t)) + | Opacity: selector(float) + | BoxShadow: selector(BoxShadow.properties) | Cursor: selector(option(MouseCursors.t)); /** @@ -124,6 +126,9 @@ let rec select: | ([`BorderVertical(bv), ...rest], BorderVertical) => select(rest, selector, bv) | ([`Transform(tr), ...rest], Transform) => select(rest, selector, tr) + | ([`Opacity(op), ...rest], Opacity) => select(rest, selector, op) + | ([`BoxShadow(bxsh), ...rest], BoxShadow) => + select(rest, selector, bxsh) | ([`Cursor(cur), ...rest], Cursor) => select(rest, selector, cur) | ([_, ...rest], _) => select(rest, selector, default) }; diff --git a/src/UI/Style.re b/src/UI/Style.re index 4fa3b4c7c..2ffac11d1 100644 --- a/src/UI/Style.re +++ b/src/UI/Style.re @@ -61,7 +61,6 @@ module PointerEvents = { type t = { backgroundColor: Color.t, - boxShadow: BoxShadow.t, color: Color.t, width: int, height: int, @@ -113,6 +112,7 @@ type t = { borderRadius: float, transform: list(Transform.t), opacity: float, + boxShadow: BoxShadow.properties, cursor: option(MouseCursors.t), }; @@ -120,7 +120,6 @@ let make = ( ~textOverflow=TextOverflow.Overflow, ~backgroundColor: Color.t=Colors.transparentBlack, - ~boxShadow=BoxShadow.default, ~color: Color.t=Colors.white, ~width=Encoding.cssUndefined, ~height=Encoding.cssUndefined, @@ -171,13 +170,19 @@ let make = ~transform=[], ~opacity=1.0, ~pointerEvents=PointerEvents.Default, + ~boxShadow=BoxShadow.{ + xOffset: 0.0, + yOffset: 0.0, + blurRadius: 0.0, + spreadRadius: 0.0, + color: Colors.black, + }, ~cursor=?, _unit: unit, ) => { let ret: t = { textOverflow, backgroundColor, - boxShadow, color, width, height, @@ -228,6 +233,7 @@ let make = borderVertical, borderRadius, opacity, + boxShadow, cursor, }; @@ -347,6 +353,8 @@ type coreStyleProps = [ | `BorderVertical(Border.t) | `BorderRadius(float) | `Transform(list(Transform.t)) + | `Opacity(float) + | `BoxShadow(BoxShadow.properties) | `Cursor(option(MouseCursors.t)) | `PointerEvents(PointerEvents.t) ]; @@ -506,6 +514,8 @@ let alignSelf = a => `AlignSelf(alignment(a)); let cursor = c => `Cursor(Some(c)); let transform = t => `Transform(t); +let boxShadow = (~xOffset, ~yOffset, ~spreadRadius, ~blurRadius, ~color) => + `BoxShadow(BoxShadow.{xOffset, yOffset, spreadRadius, blurRadius, color}); let overflow = o => switch (o) { @@ -593,6 +603,8 @@ let applyStyle = (style, styleRule) => | `BorderVertical(borderVertical) => {...style, borderVertical} | `BorderHorizontal(borderHorizontal) => {...style, borderHorizontal} | `BorderRadius(borderRadius) => {...style, borderRadius} + | `Opacity(opacity) => {...style, opacity} + | `BoxShadow(boxShadow) => {...style, boxShadow} | `Transform(transform) => {...style, transform} | `FontFamily(fontFamily) => {...style, fontFamily} | `FontSize(fontSize) => {...style, fontSize} @@ -666,6 +678,8 @@ let merge = (~source, ~target) => | (`BorderRadius(_), `BorderRadius(_)) => targetStyle | (`Transform(_), `Transform(_)) => targetStyle | (`PointerEvents(_), `PointerEvents(_)) => targetStyle + | (`Opacity(_), `Opacity(_)) => targetStyle + | (`BoxShadow(_), `BoxShadow(_)) => targetStyle | (newRule, _) => newRule } ) diff --git a/src/UI_Primitives/BoxShadow.re b/src/UI_Primitives/BoxShadow.re index b7cab8f58..6ccb217ab 100644 --- a/src/UI_Primitives/BoxShadow.re +++ b/src/UI_Primitives/BoxShadow.re @@ -1,8 +1,8 @@ open Revery_UI; open React; -open Style; -let%nativeComponent make = (~boxShadow=BoxShadow.make(), ~children, (), hooks) => ( +let%nativeComponent make = + (~boxShadow=Style.BoxShadow.make(), ~children, (), hooks) => ( { make: () => { let styles = Style.make(~boxShadow, ());