Pure tachyons setup

This commit is contained in:
dmitry 2020-11-23 13:22:35 +03:00
parent ebb9339fa2
commit 9d4b938f03
25 changed files with 20773 additions and 1147 deletions

3
.gitignore vendored Normal file
View File

@ -0,0 +1,3 @@
elm-stuff
.idea
node_modules

View File

@ -7,7 +7,6 @@
"dependencies": {
"direct": {
"Chadtech/unique-list": "2.1.4",
"avh4/elm-color": "1.0.0",
"ccapndave/elm-flat-map": "1.2.0",
"elm/browser": "1.0.2",
"elm/bytes": "1.0.8",
@ -23,9 +22,7 @@
"elm-community/graph": "6.0.0",
"elm-community/intdict": "3.0.0",
"ivadzy/bbase64": "1.1.1",
"mdgriffith/elm-ui": "1.1.8",
"mpizenberg/elm-pointer-events": "4.0.2",
"noahzgordon/elm-color-extra": "1.0.2",
"rtfeldman/elm-iso8601-date-strings": "1.1.3"
},
"indirect": {
@ -33,8 +30,7 @@
"elm/parser": "1.1.0",
"elm/regex": "1.0.0",
"elm/virtual-dom": "1.0.2",
"elm-explorations/test": "1.2.2",
"fredcy/elm-parseint": "2.0.1"
"elm-explorations/test": "1.2.2"
}
},
"test-dependencies": {

View File

@ -10,7 +10,7 @@
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<title>Fluence Admin</title>
<title>Fluence Network Dashboard</title>
</head>
<body>
<script src="bundle.js"></script>

20740
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -18,24 +18,27 @@
},
"homepage": "https://github.com/fluencelabs/fluence-admin#readme",
"dependencies": {
"fluence": "0.7.79"
"fluence": "0.7.79",
"tachyons": "^4.12.0"
},
"devDependencies": {
"@babel/core": "^7.10.4",
"clean-webpack-plugin": "3.0.0",
"copy-webpack-plugin": "^4.6.0",
"create-elm-app": "4.2.24",
"css-loader": "^3.5.3",
"elm-hot-webpack-loader": "1.1.7",
"elm-webpack-loader": "6.0.1",
"html-webpack-plugin": "^4.4.1",
"http-server": "^0.12.3",
"ts-loader": "^8.0.3",
"elm-webpack-loader": "6.0.1",
"elm-hot-webpack-loader": "1.1.7",
"replace-in-file": "^6.0.0",
"source-map-loader": "1.1.2",
"style-loader": "^0.23.1",
"ts-loader": "^8.0.3",
"typescript": "^4.0.2",
"webpack": "^4.44.2",
"webpack-cli": "3.3.11",
"webpack-dev-server": "3.11.0",
"create-elm-app": "4.2.24",
"replace-in-file": "^6.0.0",
"@babel/core": "^7.10.4",
"webpack-serve": "2.0.3"
}
}

View File

@ -2,7 +2,6 @@ module Config exposing (..)
type alias Config =
{ peerId: String
, windowSize : { width : Int, height : Int }
}

View File

@ -1,160 +0,0 @@
module Ions.Background exposing (..)
import Element.Background exposing (color)
import Ions.Color as TC
black =
color TC.black
nearBlack =
color TC.nearBlack
darkGray =
color TC.darkGray
midGray =
color TC.midGray
gray =
color TC.gray
silver =
color TC.silver
lightSilver =
color TC.lightSilver
moonGray =
color TC.moonGray
lightGray =
color TC.lightGray
nearWhite =
color TC.nearWhite
white =
color TC.white
transparent =
color TC.transparent
blackAlpha k =
color <| TC.blackAlpha k
whiteAlpha k =
color <| TC.whiteAlpha k
darkRed =
color TC.darkRed
red =
color TC.red
lightRed =
color TC.lightRed
orange =
color TC.orange
gold =
color TC.gold
yellow =
color TC.yellow
lightYellow =
color TC.lightYellow
purple =
color TC.purple
lightPurple =
color TC.lightPurple
darkPink =
color TC.darkPink
hotPink =
color TC.hotPink
pink =
color TC.pink
lightPink =
color TC.lightPink
darkGreen =
color TC.darkGreen
green =
color TC.green
lightGreen =
color TC.lightGreen
navy =
color TC.navy
darkBlue =
color TC.darkBlue
blue =
color TC.blue
lightBlue =
color TC.lightBlue
lightestBlue =
color TC.lightestBlue
washedBlue =
color TC.washedBlue
washedGreen =
color TC.washedGreen
washedYellow =
color TC.washedYellow
washedRed =
color TC.washedRed

View File

@ -1,300 +0,0 @@
module Ions.Border exposing (..)
import Element
import Element.Border exposing (color, dotted, roundEach, rounded, widthEach, widthXY)
import Ions.Color as TC
import Ions.Size as S
type Side
= Left
| Right
| Top
| Bottom
| Sides
| TopBottom
| AllSides
type Corner
= Lefts
| Rights
| Tops
| Bottoms
| LeftTop
| RightTop
| LeftBottom
| RightBottom
| Diagonal
| CoDiagonal
| AllCorners
width : Int -> Side -> Element.Attribute msg
width w s =
case s of
Left ->
widthEach { bottom = 0, left = w, top = 0, right = 0 }
Right ->
widthEach { bottom = 0, left = 0, top = 0, right = w }
Top ->
widthEach { bottom = 0, left = 0, top = w, right = 0 }
Bottom ->
widthEach { bottom = w, left = 0, top = 0, right = 0 }
Sides ->
widthXY w 0
TopBottom ->
widthXY 0 w
AllSides ->
Element.Border.width w
radius : Int -> Corner -> Element.Attribute msg
radius w c =
case c of
Lefts ->
roundEach { topLeft = w, topRight = 0, bottomLeft = w, bottomRight = 0 }
Rights ->
roundEach { topLeft = 0, topRight = w, bottomLeft = 0, bottomRight = w }
Tops ->
roundEach { topLeft = w, topRight = w, bottomLeft = 0, bottomRight = 0 }
Bottoms ->
roundEach { topLeft = 0, topRight = 0, bottomLeft = w, bottomRight = w }
LeftTop ->
roundEach { topLeft = w, topRight = 0, bottomLeft = 0, bottomRight = 0 }
RightTop ->
roundEach { topLeft = 0, topRight = w, bottomLeft = 0, bottomRight = 0 }
LeftBottom ->
roundEach { topLeft = 0, topRight = 0, bottomLeft = w, bottomRight = 0 }
RightBottom ->
roundEach { topLeft = 0, topRight = 0, bottomLeft = w, bottomRight = w }
Diagonal ->
roundEach { topLeft = w, topRight = 0, bottomLeft = 0, bottomRight = w }
CoDiagonal ->
roundEach { topLeft = 0, topRight = w, bottomLeft = w, bottomRight = 0 }
AllCorners ->
rounded w
width0 =
width 0
width005 =
width <| S.baseRem 0.05
width1 =
width <| S.baseRem 0.125
width2 =
width <| S.baseRem 0.25
width3 =
width <| S.baseRem 0.5
width4 =
width <| S.baseRem 1
width5 =
width <| S.baseRem 2
radius0 =
rounded 0
radius1 =
rounded <| S.baseRem 0.125
radius2 =
rounded <| S.baseRem 0.25
radius3 =
rounded <| S.baseRem 0.5
radius4 =
rounded <| S.base
pill =
rounded 9999
black =
color TC.black
nearBlack =
color TC.nearBlack
darkGray =
color TC.darkGray
midGray =
color TC.midGray
gray =
color TC.gray
silver =
color TC.silver
lightSilver =
color TC.lightSilver
moonGray =
color TC.moonGray
lightGray =
color TC.lightGray
nearWhite =
color TC.nearWhite
white =
color TC.white
transparent =
color TC.transparent
blackAlpha k =
color <| TC.blackAlpha k
whiteAlpha k =
color <| TC.whiteAlpha k
darkRed =
color TC.darkRed
red =
color TC.red
lightRed =
color TC.lightRed
orange =
color TC.orange
gold =
color TC.gold
yellow =
color TC.yellow
lightYellow =
color TC.lightYellow
purple =
color TC.purple
lightPurple =
color TC.lightPurple
darkPink =
color TC.darkPink
hotPink =
color TC.hotPink
pink =
color TC.pink
lightPink =
color TC.lightPink
darkGreen =
color TC.darkGreen
green =
color TC.green
lightGreen =
color TC.lightGreen
navy =
color TC.navy
darkBlue =
color TC.darkBlue
blue =
color TC.blue
lightBlue =
color TC.lightBlue
lightestBlue =
color TC.lightestBlue
washedBlue =
color TC.washedBlue
washedGreen =
color TC.washedGreen
washedYellow =
color TC.washedYellow
washedRed =
color TC.washedRed

View File

@ -1,165 +0,0 @@
module Ions.Color exposing (..)
import Element exposing (rgba255)
import Html.Attributes exposing (style)
import Ions.Color.Extra exposing (hexToColor)
easeIn =
Element.htmlAttribute <| style "transition" "color .15s ease-in"
black =
hexToColor "#000"
nearBlack =
hexToColor "#111"
darkGray =
hexToColor "#333"
midGray =
hexToColor "#555"
gray =
hexToColor "#777"
silver =
hexToColor "#999"
lightSilver =
hexToColor "#aaa"
moonGray =
hexToColor "#ccc"
lightGray =
hexToColor "#eee"
nearWhite =
hexToColor "#f4f4f4"
white =
hexToColor "#fff"
transparent =
rgba255 0 0 0 0
blackAlpha k =
rgba255 0 0 0 (k / 1000)
whiteAlpha k =
rgba255 255 255 255 (k / 1000)
darkRed =
hexToColor "#e7040f"
red =
hexToColor "#ff4136"
lightRed =
hexToColor "#ff725c"
orange =
hexToColor "#ff6300"
gold =
hexToColor "#ffb700"
yellow =
hexToColor "#ffde37"
lightYellow =
hexToColor "#fbf1a9"
purple =
hexToColor "#5e2ca5"
lightPurple =
hexToColor "#a463f2"
darkPink =
hexToColor "#d5008f"
hotPink =
hexToColor "#ff41b4"
pink =
hexToColor "#ff80cc"
lightPink =
hexToColor "#ffa3d7"
darkGreen =
hexToColor "#137752"
green =
hexToColor "#19a974"
lightGreen =
hexToColor "#9eebcf"
navy =
hexToColor "#001b44"
darkBlue =
hexToColor "#00449e"
blue =
hexToColor "#357edd"
lightBlue =
hexToColor "#96ccff"
lightestBlue =
hexToColor "#cdecff"
washedBlue =
hexToColor "#f6fffe"
washedGreen =
hexToColor "#e8fdf5"
washedYellow =
hexToColor "#fffceb"
washedRed =
hexToColor "#ffdfdf"

View File

@ -1,25 +0,0 @@
module Ions.Color.Extra exposing (colorToHex, hexToColor)
import Color
import Color.Convert
import Element
toColor : Element.Color -> Color.Color
toColor =
Element.toRgb >> (\c -> Color.rgba c.red c.green c.blue c.alpha)
fromColor : Color.Color -> Element.Color
fromColor =
Color.toRgba >> (\c -> Element.rgba c.red c.green c.blue c.alpha)
colorToHex : Element.Color -> String
colorToHex =
toColor >> Color.Convert.colorToHex
hexToColor : String -> Element.Color
hexToColor =
Color.Convert.hexToColor >> Result.withDefault (Color.rgb 0 0 0) >> fromColor

View File

@ -1,201 +0,0 @@
module Ions.Font exposing (..)
import Element.Font exposing (color, size)
import Ions.Color as TC
import Ions.Size as S
sansSerif =
Element.Font.family <| List.map Element.Font.typeface [ "-apple-system", "BlinkMacSystemFont", "avenir next", "avenir", "helvetica neue", "helvetica", "ubuntu", "roboto", "noto", "segoe ui", "arial", "sans-serif" ]
code =
Element.Font.family <| List.map Element.Font.typeface [ "Consolas", "monaco", "monospace" ]
baseSize =
size S.base
size1 =
size <| S.baseRem 3
size2 =
size <| S.baseRem 2.25
size3 =
size <| S.baseRem 1.5
size4 =
size <| S.baseRem 1.25
size5 =
size <| S.baseRem 1
size6 =
size <| S.baseRem 0.875
size7 =
size <| S.baseRem 0.75
black =
color TC.black
nearBlack =
color TC.nearBlack
darkGray =
color TC.darkGray
midGray =
color TC.midGray
gray =
color TC.gray
silver =
color TC.silver
lightSilver =
color TC.lightSilver
moonGray =
color TC.moonGray
lightGray =
color TC.lightGray
nearWhite =
color TC.nearWhite
white =
color TC.white
transparent =
color TC.transparent
blackAlpha k =
color <| TC.blackAlpha k
whiteAlpha k =
color <| TC.whiteAlpha k
darkRed =
color TC.darkRed
red =
color TC.red
lightRed =
color TC.lightRed
orange =
color TC.orange
gold =
color TC.gold
yellow =
color TC.yellow
lightYellow =
color TC.lightYellow
purple =
color TC.purple
lightPurple =
color TC.lightPurple
darkPink =
color TC.darkPink
hotPink =
color TC.hotPink
pink =
color TC.pink
lightPink =
color TC.lightPink
darkGreen =
color TC.darkGreen
green =
color TC.green
lightGreen =
color TC.lightGreen
navy =
color TC.navy
darkBlue =
color TC.darkBlue
blue =
color TC.blue
lightBlue =
color TC.lightBlue
lightestBlue =
color TC.lightestBlue
washedBlue =
color TC.washedBlue
washedGreen =
color TC.washedGreen
washedYellow =
color TC.washedYellow
washedRed =
color TC.washedRed

View File

@ -1,36 +0,0 @@
module Ions.Size exposing (..)
import Element exposing (Attribute, fill, maximum, width)
base =
16
proportion =
0.95
proportionPx : Int -> Int
proportionPx n =
round <| base * (proportion ^ toFloat n)
baseRem : Float -> Int
baseRem k =
round <| k * base
measure : Attribute msg
measure =
width <| maximum (30 * base) <| fill
measureWide : Attribute msg
measureWide =
width <| maximum (34 * base) <| fill
measureNarrow : Attribute msg
measureNarrow =
width <| maximum (20 * base) <| fill

View File

@ -17,29 +17,18 @@ limitations under the License.
-}
import Config exposing (Config)
import Element
import Msg exposing (Msg(..))
import Screen.Model as Screen
type alias Model =
{ peerId : String
, screen : Screen.Model
}
emptyModel : Config -> ( Model, Cmd Msg )
emptyModel config =
let
device =
Element.classifyDevice config.windowSize
emptyScreen =
{ device = device, screenSize = config.windowSize }
in
( { peerId = config.peerId
, screen = emptyScreen
}
, Cmd.none
)

View File

@ -1,5 +1,3 @@
module Msg exposing (..)
import Screen.Msg
type Msg = NoOp
| ScreenMsg Screen.Msg.Msg

View File

@ -16,95 +16,14 @@ limitations under the License.
-}
import Element exposing (Element, el, inFront, padding, paddingXY, text)
import Element.Font as Font
import Element.Region as Region
import Html exposing (Html)
import Ions.Background as BG
import Ions.Border as B
import Ions.Color as C
import Ions.Font as F
import Ions.Size as S
import Screen.Model exposing (isNarrow)
accentFontColor =
F.darkRed
letterSpacing =
Font.letterSpacing 1.7
accentButton =
[ F.white, BG.darkRed ]
blockBackground =
BG.nearWhite
blockTitle inside =
el [ fillWidth, accentFontColor, letterSpacing, Font.bold, Element.paddingXY 0 <| S.baseRem 1 ] <| inside
link : String -> String -> Element msg
link url label =
Element.link
linkStyle
{ url = url, label = Element.text label }
newTabLink : String -> String -> Element msg
newTabLink url label =
Element.newTabLink
linkStyle
{ url = url, label = Element.text label }
linkStyle =
[ accentFontColor, C.easeIn, Font.underline ]
h1 txt =
el
[ Region.heading 1
, F.size2
, Font.semiBold
, Element.paddingXY 0 (S.baseRem 0.67)
, F.code
, accentFontColor
]
<|
Element.text txt
fillWidth =
Element.width Element.fill
limitLayoutWidth =
Element.width (Element.fill |> Element.maximum (S.baseRem 48))
layoutBlock screen =
[ Element.centerX
, limitLayoutWidth
, Element.paddingXY
(S.baseRem
(if isNarrow screen then
2
else
4
)
)
(S.baseRem 1)
]
pSpacing =
Element.spacing <| S.baseRem 0.5
import Html.Attributes exposing (classList)
classes: String -> Html.Attribute msg
classes cls =
classList <|
List.map (\s -> (s, True)) <|
String.split " " cls
shortHashRaw size hash =
String.concat
@ -112,33 +31,3 @@ shortHashRaw size hash =
, "..."
, String.right (size - 1) hash
]
shortHashEl size hash =
let
sh =
shortHashRaw size hash
in
Element.el
[ B.nearBlack
, F.code
]
<|
Element.text sh
shortHash hash =
shortHashEl 6 hash
mediumHash hash =
shortHashEl 12 hash
showHash hash =
Element.el
[ B.nearBlack
, F.code
]
<|
Element.text hash

View File

@ -1,19 +0,0 @@
module Screen.Model exposing (..)
import Element exposing (Device)
type alias Model =
{ device : Device
, screenSize : { width : Int, height : Int }
}
isMedium : Model -> Bool
isMedium screen =
screen.screenSize.width < 860
isNarrow : Model -> Bool
isNarrow screen =
screen.screenSize.width < 500

View File

@ -1,8 +0,0 @@
module Screen.Msg exposing (..)
import Element exposing (Device)
type Msg
= NoOp
| WindowResized Device Int Int

View File

@ -1,11 +0,0 @@
module Screen.Subscriptions exposing (..)
import Browser.Events exposing (onResize)
import Element
import Screen.Msg exposing (Msg(..))
subscriptions =
onResize <|
\width height ->
WindowResized (Element.classifyDevice { width = width, height = height }) width height

View File

@ -1,14 +0,0 @@
module Screen.Update exposing (..)
import Screen.Model exposing (Model)
import Screen.Msg exposing (Msg(..))
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
WindowResized dc width height ->
( { model | device = dc, screenSize = { width = width, height = height } }, Cmd.none )
NoOp ->
( model, Cmd.none )

View File

@ -18,11 +18,10 @@ limitations under the License.
import Model exposing (Model)
import Msg exposing (Msg(..))
import Screen.Subscriptions
subscriptions : Model -> Sub Msg
subscriptions model =
Sub.batch
[ Screen.Subscriptions.subscriptions |> Sub.map ScreenMsg
[
]

View File

@ -26,7 +26,5 @@ update msg model =
NoOp ->
( model, Cmd.none )
ScreenMsg m ->
( model, Cmd.none )

View File

@ -1,4 +1,4 @@
module Utils exposing (..)
module TaskExtras exposing (..)
{-| Copyright 2020 Fluence Labs Limited

View File

@ -17,17 +17,11 @@ limitations under the License.
-}
import Browser exposing (Document)
import Element exposing (Element, centerX, column, el, height, inFront, padding, paragraph, row, spacing, text)
import Element.Font as Font
import Html exposing (Html)
import Ions.Background as BG
import Ions.Font as F
import Ions.Size as S
import Html exposing (Html, div, header, text)
import Html.Attributes exposing (class, classList)
import Model exposing (Model)
import Msg exposing (..)
import Palette exposing (fillWidth, layoutBlock, limitLayoutWidth, pSpacing)
import Screen.Model as Screen
import Palette exposing (classes)
view : Model -> Document Msg
view model =
@ -35,47 +29,21 @@ view model =
title : Model -> String
title m =
"Admin"
title _ =
"Fluence Network Dashboard"
body : Model -> Html Msg
body model =
layout model.screen <|
layout <|
List.concat
[
]
layout : List (Html Msg) -> Html Msg
layout elms =
div [classes "mw9 center"]
[div [classes "fl w-100 pa2"] ([
header [classes "w-100 bt bb b--black-10"] [text "Fluence Network Dashboard"]
] ++elms)]
header : Screen.Model -> List (Element Msg)
header screenI =
[ column (layoutBlock screenI ++ [ spacing (S.baseRem 1.125) ])
[ row
[ fillWidth ]
[ paragraph [ Font.italic, F.gray, pSpacing ] <|
[ text "Fluence Admin" ]
]
, el [ height <| Element.px <| S.baseRem 0.5 ] Element.none
]
]
layout : Screen.Model -> List (Element Msg) -> Html Msg
layout screen elms =
Element.layout
[ F.size6
, F.sansSerif
, Element.padding (S.baseRem 1)
, Element.centerX
, BG.lightGray
, inFront <| column [ fillWidth, centerX, BG.white, limitLayoutWidth ] (header screen)
]
<|
Element.column
[ Element.centerX
, fillWidth
, limitLayoutWidth
, BG.white
, padding 20
]
elms

View File

@ -14,6 +14,7 @@
* limitations under the License.
*/
import 'tachyons/css/tachyons.min.css';
import {Elm} from './Main.elm';
import * as serviceWorker from './serviceWorker';
import {peerIdToSeed, seedToPeerId} from "fluence/dist/seed";
@ -24,11 +25,7 @@ import {Service} from "fluence/dist/service";
function genFlags(peerId: string): any {
return {
peerId: peerId,
windowSize: {
width: window.innerWidth,
height: window.innerHeight,
}
peerId: peerId
}
}

View File

@ -37,7 +37,11 @@ module.exports = {
{
test: /\.(png)$/,
loader: 'file-loader',
}
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
]
},
mode: "development",