Skip to content

Commit

Permalink
Merge pull request #83 from jiro4989/feature/#16-ui
Browse files Browse the repository at this point in the history 
CSSフレームワークをMaterializeCSSからBulmaに変更 #16
  • Loading branch information
@jiro4989
jiro4989 committed Jan 18, 2020
2 parents ccde4fa + ba08ed9 commit a8cf301
Show file tree
Hide file tree
Showing 5 changed files with 104 additions and 90 deletions.
12 changes: 6 additions & 6 deletions README.adoc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,12 +106,12 @@ http://localhost

[options="header"]
|=================
| ブランチ名 | 説明
| master | 本番用
| develop | たまに使うが基本放置
| feature/#xx | 新機能、UI改善
| hotfix/#xx | バグ修正
| chore/#xx | CIやローカル開発環境の整備など、アプリに影響しない雑多なもの
| ブランチ名 | 説明
| master | 本番用
| develop | たまに使うが基本放置
| feature/#xx-desc | 新機能、UI改善
| hotfix/#xx-desc | バグ修正
| chore/#xx-desc | CIやローカル開発環境の整備など、アプリに影響しない雑多なもの
|=================

feature, hotfix, choreのブランチ名のプレフィックスは、PR作成時のラベル自動付与にも使用している。
Expand Down
Binary file modified docs/top.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 2 additions & 1 deletion websh_front/README.adoc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@

== フレームワーク

* karax (SPAフレームワーク)
* https://github.com/pragmagic/karax[karax] (SPAフレームワーク)
* https://bulma.io/[bulma] (CSSフレームワーク)

== フロントエンド構成

Expand Down
16 changes: 3 additions & 13 deletions websh_front/public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,10 @@
<html>
<head>
<title>websh</title>
<!-- <link rel="stylesheet" href="style.css"> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.8.0/css/bulma.min.css">

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<style>
.hide {
opacity: 0;
transition: all 300ms 0s ease;
}
.show {
opacity: 1;
transition: all 300ms 0s ease;
}
</style>
</head>

<body id="body" class="grey darken-4">
Expand Down
163 changes: 93 additions & 70 deletions websh_front/src/index.nim
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,6 @@ type
filesize: cint

const
baseColor = "grey darken-4"
textColor = "green-text darken-3"
textInputColor = "grey-text lighten-5"
statusOk = cint(0)
statusTimeout = cint(1)
statusSystemError = cint(100)
Expand Down Expand Up @@ -66,6 +63,15 @@ proc sendShellButtonOnClick(ev: Event, n: VNode) = # シェルの実行中表示
data = body.toJson,
cont = respCb)

proc inputTextareaOnkeydown(ev: Event, n: VNode) =
let kbEvt = cast[KeyboardEvent](ev)
# Ctrl + Enterで実行
if kbEvt.ctrlKey and kbEvt.keyCode == 13:
sendShellButtonOnClick(ev, n)

proc inputTextareaOnkeyup(ev: Event, n: VNode) =
inputShell = $n.value

proc countWord(s: string): int =
## 文字数をカウントする。
## アルファベットは1文字、マルチバイト文字は2文字として数える。
Expand All @@ -79,76 +85,93 @@ proc countWord(s: string): int =

proc createDom(): VNode =
result = buildHtml(tdiv):
tdiv(class = &"row {baseColor} {textColor}"):
nav:
tdiv(class = &"nav-wrapper {baseColor}"):
a(class = &"brand-logo {textColor}"): text "websh"
tdiv(class = "col s6"):
if isProgress:
tdiv(class = "col s12 m12"):
text "Running ..."
if outputStatus != statusOk:
tdiv(class = "col s12 m12"):
text outputSystemMessage
h3: text "Input"
tdiv(class = "input-field s12 m6"):
let count = countWord($inputShell)
tdiv(class = "s12 m6"):
text &"{$count} chars"
let remain = 280 - count
let remainPercent = int(count / 280 * 100)
let color =
if 100 <= remainPercent: "red darken-3"
elif 70 <= remainPercent: "yellow darken-4"
else: ""
tdiv(class = &"s12 m6 {color}"):
text &"Remaining: {$remain} chars ({$remainPercent}%)."
tdiv(class = "input-field s12 m6"):
textarea(id = "inputShell", class = &"materialize-textarea {textInputColor}", setFocus = true, style = style(StyleAttr.minHeight, cstring"400px")):
proc onkeydown(ev: Event, n: VNode) =
let kbEvt = cast[KeyboardEvent](ev)
# Ctrl + Enterで実行
if kbEvt.ctrlKey and kbEvt.keyCode == 13:
sendShellButtonOnClick(ev, n)
proc onkeyup(ev: Event, n: VNode) =
inputShell = $n.value
label(`for` = "inputShell"):
text "ex: echo 'Hello shell'"
button(onclick = sendShellButtonOnClick):
text "Run (Ctrl + Enter)"
a(href = &"""https://twitter.com/intent/tweet?button_hashtag=シェル芸&text={encodeUrl($inputShell, false)}&ref_src=twsrc%5Etfw""",
class = "twitter-share-button",
`data-show-count` = "false"):
text "Tweet"
tdiv(class = "col s6"):
h3: text "Output"
tdiv:
h4: text "Stdout"
tdiv(class = "s12 m6"):
text &"{countWord($outputStdout)} chars, "
text &"""{$($outputStdout).split("\n").len} lines"""
tdiv(class = "input-field col s12"):
textarea(id = "outputStdout", class = &"materialize-textarea {textInputColor}", style = style(StyleAttr.minHeight, cstring"200px")):
text outputStdout
tdiv:
h4: text "Stderr"
tdiv(class = "s12 m6"):
text &"{countWord($outputStderr)} chars, "
text &"""{$($outputStderr).split("\n").len} lines"""
tdiv(class = "input-field col s12"):
textarea(id = "outputStderr", class = &"materialize-textarea {textInputColor}", style = style(StyleAttr.minHeight, cstring"200px")):
text outputStderr

# ヘッダー
section(class = "hero is-dark"):
tdiv(class = "hero-body"):
tdiv(class = "container"):
tdiv(class = "content has-text-centered"):
h1(class = "title"): text "websh"

# システムメッセージの表示
nav(class = "level"):
tdiv(class = "level-item has-text-centered"):
tdiv:
h4: text "Images"
for img in outputImages:
p(class = "heading"): text "system message"
p(class = "title"):
if isProgress:
text "Running ..."
elif outputStatus != statusOk:
text outputSystemMessage
else:
text "none"

# 入力、出力スペース
tdiv(class = "tile is-ancestor"):
tdiv(class = "tile is-parent is-primary"):
article(class = "tile is-child notification"):
p(class = "title"): text "input"
p(class = "subtitle"):
tdiv:
# imgでbase64を表示するときに必要なメタ情報を追加
img(src = "data:image/png;base64," & img.image)
let count = countWord($inputShell)
tdiv:
text &"{$count} chars"
let remain = 280 - count
let remainPercent = int(count / 280 * 100)
let color =
if 100 <= remainPercent: "has-background-danger"
elif 70 <= remainPercent: "has-background-warning"
else: ""
tdiv(class = color):
text &"Remaining: {$remain} chars ({$remainPercent}%)."
tdiv(class = "content"):
tdiv:
text &"{img.filesize} byte"
footer(class = &"page-footer {baseColor}"):
tdiv(class = "footer-copyright"):
tdiv(class = "container"):
textarea(class = "textarea is-primary",
placeholder = "ex: echo 'Hello shell'",
rows = "15",
setFocus = true,
onkeydown = inputTextareaOnkeydown,
onkeyup = inputTextareaOnkeyup,
)
tdiv(class = "buttons"):
button(class="button is-primary", onclick = sendShellButtonOnClick):
text "Run (Ctrl + Enter)"
a(href = &"""https://twitter.com/intent/tweet?button_hashtag=シェル芸&text={encodeUrl($inputShell, false)}&ref_src=twsrc%5Etfw""",
class = "button twitter-share-button is-link",
`data-show-count` = "false"):
text "Tweet"
tdiv(class = "tile is-parent is-vertical"):
article(class = "tile is-child notification"):
p(class = "title"): text "stdout"
p(class = "subtitle"):
tdiv:
text &"{countWord($outputStdout)} chars, "
text &"""{$($outputStdout).split("\n").len} lines"""
tdiv:
textarea(class = "textarea is-success", rows = "5"):
text outputStdout
article(class = "tile is-child notification"):
p(class = "title"): text "stderr"
p(class = "subtitle"):
tdiv:
text &"{countWord($outputStderr)} chars, "
text &"""{$($outputStderr).split("\n").len} lines"""
tdiv:
textarea(class = "textarea is-warning", rows = "3"):
text outputStderr
article(class = "tile is-child notification"):
p(class = "title"): text "images"
tdiv(class = "content"):
for img in outputImages:
tdiv:
# imgでbase64を表示するときに必要なメタ情報を追加
img(src = "data:image/png;base64," & img.image)
tdiv:
text &"{img.filesize} byte"

footer(class = &"footer"):
tdiv(class = "container"):
tdiv(class = "content has-text-centered"):
text "© 2019, jiro4989 ("
a(href = "https://twitter.com/jiro_saburomaru"): text "@jiro_saburomaru"
text "), Apache License, "
Expand Down

0 comments on commit a8cf301

Please sign in to comment.