This repository has been archived by the owner on Nov 16, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 51
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2454 from bandprotocol/top-part-datasource-index
Scan: Implemented Datasource index page and created new CTooltip component
- Loading branch information
Showing
9 changed files
with
225 additions
and
112 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,113 +1,95 @@ | ||
| module Styles = { | ||
| open Css; | ||
|
|
||
| let vFlex = style([display(`flex), flexDirection(`row), alignItems(`center)]); | ||
|
|
||
| let logo = style([width(`px(50)), marginRight(`px(10))]); | ||
|
|
||
| let seperatedLine = | ||
| let infoContainer = | ||
| style([ | ||
| width(`px(13)), | ||
| height(`px(1)), | ||
| marginLeft(`px(10)), | ||
| marginRight(`px(10)), | ||
| backgroundColor(Colors.gray7), | ||
| backgroundColor(Colors.white), | ||
| boxShadow(Shadow.box(~x=`zero, ~y=`px(2), ~blur=`px(4), Css.rgba(0, 0, 0, 0.08))), | ||
| padding(`px(24)), | ||
| Media.mobile([padding(`px(16))]), | ||
| ]); | ||
| let infoHeader = | ||
| style([borderBottom(`px(1), `solid, Colors.gray9), paddingBottom(`px(16))]); | ||
| let infoIcon = style([width(`px(12)), height(`px(12)), display(`block)]); | ||
| }; | ||
|
|
||
| [@react.component] | ||
| let make = (~dataSourceID, ~hashtag: Route.data_source_tab_t) => | ||
| { | ||
| let%Sub dataSource = DataSourceSub.get(dataSourceID); | ||
|
|
||
| <> | ||
| <div className=Styles.vFlex> | ||
| <img src=Images.dataSourceLogo className=Styles.logo /> | ||
| <Text | ||
| value="DATA SOURCE" | ||
| weight=Text.Medium | ||
| size=Text.Md | ||
| spacing={Text.Em(0.06)} | ||
| height={Text.Px(15)} | ||
| nowrap=true | ||
| color=Colors.gray7 | ||
| block=true | ||
| /> | ||
| </div> | ||
| // <div className=Styles.seperatedLine /> | ||
| // | ||
| // | ||
| // <TimeAgos | ||
| // time={dataSource.timestamp} | ||
| // prefix="Last updated " | ||
| // size=Text.Md | ||
| // weight=Text.Thin | ||
| // spacing={Text.Em(0.06)} | ||
| // height={Text.Px(18)} | ||
| // upper=true | ||
| // /> | ||
| <> | ||
| <VSpacing size=Spacing.md /> | ||
| <VSpacing size=Spacing.sm /> | ||
| <div className=Styles.vFlex> | ||
| <TypeID.DataSource id={dataSource.id} position=TypeID.Title /> | ||
| <HSpacing size=Spacing.md /> | ||
| <Text | ||
| value={dataSource.name} | ||
| size=Text.Xxl | ||
| height={Text.Px(22)} | ||
| weight=Text.Bold | ||
| nowrap=true | ||
| /> | ||
| </div> | ||
| <VSpacing size=Spacing.xl /> | ||
| <Row> | ||
| <Col size=1.> | ||
| <InfoHL header="OWNER" info={InfoHL.Address(dataSource.owner, 380)} /> | ||
| </Col> | ||
| </Row> | ||
| // <Col size=0.8> | ||
| // <InfoHL | ||
| // info={InfoHL.Fee(dataSource.fee->Coin.getBandAmountFromCoins)} | ||
| // header="REQUEST FEE" | ||
| // /> | ||
| // </Col> | ||
| <VSpacing size=Spacing.sm /> | ||
| <Row> | ||
| <Col size=1.> | ||
| <InfoHL header="DESCRIPTION" info={InfoHL.Description(dataSource.description)} /> | ||
| </Col> | ||
| </Row> | ||
| <VSpacing size=Spacing.xl /> | ||
| <Tab | ||
| tabs=[| | ||
| { | ||
| name: "EXECUTION", | ||
| route: dataSourceID |> ID.DataSource.getRouteWithTab(_, Route.DataSourceExecute), | ||
| }, | ||
| { | ||
| name: "CODE", | ||
| route: dataSourceID |> ID.DataSource.getRouteWithTab(_, Route.DataSourceCode), | ||
| }, | ||
| { | ||
| name: "REQUESTS", | ||
| route: dataSourceID |> ID.DataSource.getRouteWithTab(_, Route.DataSourceRequests), | ||
| }, | ||
| // { | ||
| // name: "REVISIONS", | ||
| // route: dataSourceID |> ID.DataSource.getRouteWithTab(_, Route.DataSourceRevisions), | ||
| // }, | ||
| |] | ||
| currentRoute={dataSourceID |> ID.DataSource.getRouteWithTab(_, hashtag)}> | ||
| {switch (hashtag) { | ||
| | DataSourceExecute => <DataSourceExecute executable={dataSource.executable} /> | ||
| | DataSourceCode => <DataSourceCode executable={dataSource.executable} /> | ||
| | DataSourceRequests => <DataSourceRequestTable dataSourceID /> | ||
| | DataSourceRevisions => <DataSourceRevisionTable id=dataSourceID /> | ||
| let make = (~dataSourceID, ~hashtag: Route.data_source_tab_t) => { | ||
| let dataSourceSub = DataSourceSub.get(dataSourceID); | ||
| <> | ||
| <Row.Grid marginBottom=40> | ||
| <Col.Grid> | ||
| <Heading value="Data Source" size=Heading.H4 marginBottom=40 /> | ||
| {switch (dataSourceSub) { | ||
| | Data({id, name}) => | ||
| <div className={CssHelper.flexBox()}> | ||
| <TypeID.DataSource id position=TypeID.Title /> | ||
| <HSpacing size=Spacing.sm /> | ||
| <Heading size=Heading.H3 value=name /> | ||
| </div> | ||
| | _ => <LoadingCensorBar width=270 height=15 /> | ||
| }} | ||
| </Col.Grid> | ||
| </Row.Grid> | ||
| <Row.Grid marginBottom=24> | ||
| <Col.Grid> | ||
| <div className=Styles.infoContainer> | ||
| <Heading value="Information" size=Heading.H4 style=Styles.infoHeader marginBottom=24 /> | ||
| <div className={CssHelper.flexBox()}> | ||
| <Heading value="Owner" size=Heading.H5 /> | ||
| <HSpacing size=Spacing.xs /> | ||
| <CTooltip tooltipText="Lorem ipsum, or lipsum as it is sometimes known."> | ||
| <img className=Styles.infoIcon src=Images.infoIcon /> | ||
| </CTooltip> | ||
| </div> | ||
| <VSpacing size=Spacing.sm /> | ||
| {switch (dataSourceSub) { | ||
| | Data({owner}) => <AddressRender address=owner position=AddressRender.Subtitle /> | ||
| | _ => <LoadingCensorBar width=284 height=15 /> | ||
| }} | ||
| <VSpacing size=Spacing.lg /> | ||
| <Heading value="Description" size=Heading.H5 marginBottom=16 /> | ||
| {switch (dataSourceSub) { | ||
| | Data({description}) => | ||
| <p> | ||
| <Text | ||
| value=description | ||
| weight=Text.Regular | ||
| size=Text.Lg | ||
| color=Colors.gray7 | ||
| block=true | ||
| /> | ||
| </p> | ||
| | _ => <LoadingCensorBar width=284 height=15 /> | ||
| }} | ||
| </Tab> | ||
| </> | ||
| </> | ||
| |> Sub.resolve; | ||
| } | ||
| |> Sub.default(_, React.null); | ||
| </div> | ||
| </Col.Grid> | ||
| </Row.Grid> | ||
| // <Tab | ||
| // tabs=[| | ||
| // { | ||
| // name: "Requests", | ||
| // route: dataSourceID |> ID.DataSource.getRouteWithTab(_, Route.DataSourceRequests), | ||
| // }, | ||
| // { | ||
| // name: "Code", | ||
| // route: dataSourceID |> ID.DataSource.getRouteWithTab(_, Route.DataSourceCode), | ||
| // }, | ||
| // { | ||
| // name: "Test Execution", | ||
| // route: dataSourceID |> ID.DataSource.getRouteWithTab(_, Route.DataSourceExecute), | ||
| // }, | ||
| // // { | ||
| // // name: "REVISIONS", | ||
| // // route: dataSourceID |> ID.DataSource.getRouteWithTab(_, Route.DataSourceRevisions), | ||
| // // }, | ||
| // |] | ||
| // currentRoute={dataSourceID |> ID.DataSource.getRouteWithTab(_, hashtag)}> | ||
| // {switch (hashtag) { | ||
| // | DataSourceExecute => <DataSourceExecute executable /> | ||
| // | DataSourceCode => <DataSourceCode executable /> | ||
| // | DataSourceRequests => <DataSourceRequestTable dataSourceID /> | ||
| // | DataSourceRevisions => <DataSourceRevisionTable id=dataSourceID /> | ||
| // }} | ||
| // </Tab> | ||
| </>; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| type placement = | ||
| | Left | ||
| | Right | ||
| | Top | ||
| | Bottom; | ||
|
|
||
| module Styles = { | ||
| open Css; | ||
| let tooltipContainer = | ||
| style([ | ||
| cursor(`pointer), | ||
| position(`relative), | ||
| display(`block), | ||
| hover([selector("> div:nth-child(1)", [opacity(1.), pointerEvents(`unset)])]), | ||
| ]); | ||
| let tooltipItem = width_ => | ||
| style([ | ||
| position(`absolute), | ||
| display(`block), | ||
| backgroundColor(Colors.gray7), | ||
| borderRadius(`px(4)), | ||
| width(`px(width_)), | ||
| color(Colors.white), | ||
| fontSize(`px(14)), | ||
| padding(`px(16)), | ||
| opacity(0.), | ||
| pointerEvents(`none), | ||
| transition(~duration=200, "all"), | ||
| before([ | ||
| contentRule(`text("")), | ||
| display(`block), | ||
| position(`absolute), | ||
| border(`px(5), `solid, Colors.transparent), | ||
| ]), | ||
| ]); | ||
|
|
||
| let placement = | ||
| fun | ||
| | Left => | ||
| style([ | ||
| top(`percent(50.)), | ||
| right(`percent(100.)), | ||
| transform(`translateY(`percent(-50.))), | ||
| before([ | ||
| top(`percent(50.)), | ||
| transform(`translateY(`percent(-50.))), | ||
| right(`px(-10)), | ||
| borderLeftColor(Colors.gray7), | ||
| ]), | ||
| ]) | ||
| | Right => | ||
| style([ | ||
| top(`percent(50.)), | ||
| left(`percent(100.)), | ||
| transform(`translateY(`percent(-50.))), | ||
| before([ | ||
| top(`percent(50.)), | ||
| transform(`translateY(`percent(-50.))), | ||
| left(`px(-10)), | ||
| borderRightColor(Colors.gray7), | ||
| ]), | ||
| ]) | ||
| | Top => | ||
| style([ | ||
| bottom(`percent(100.)), | ||
| left(`percent(50.)), | ||
| transform(`translateX(`percent(-50.))), | ||
| before([ | ||
| transform(`translateX(`percent(-50.))), | ||
| left(`percent(50.)), | ||
| bottom(`px(-10)), | ||
| borderTopColor(Colors.gray7), | ||
| ]), | ||
| ]) | ||
| | Bottom => | ||
| style([ | ||
| top(`percent(100.)), | ||
| left(`percent(50.)), | ||
| transform(`translateX(`percent(-50.))), | ||
| before([ | ||
| transform(`translateX(`percent(-50.))), | ||
| left(`percent(50.)), | ||
| top(`px(-10)), | ||
| borderBottomColor(Colors.gray7), | ||
| ]), | ||
| ]); | ||
| }; | ||
|
|
||
| [@react.component] | ||
| let make = (~width=150, ~tooltipText="", ~tooltipPlacement=Bottom, ~children) => { | ||
| <div className=Styles.tooltipContainer> | ||
| <div className={Css.merge([Styles.tooltipItem(width), Styles.placement(tooltipPlacement)])}> | ||
| {tooltipText |> React.string} | ||
| </div> | ||
| children | ||
| </div>; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| open Css; | ||
|
|
||
| let flexBox = (~align=`center, ~justify=`flexStart, ~wrap=`wrap, ~direction=`row, ()) => | ||
| style([ | ||
| display(`flex), | ||
| alignItems(align), | ||
| justifyContent(justify), | ||
| flexDirection(direction), | ||
| flexWrap(wrap), | ||
| ]); |
Oops, something went wrong.