Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Peng/203 improve buttons #426

Merged
merged 4 commits into from
Feb 1, 2018
Merged

Peng/203 improve buttons #426

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e0a2085
init
nylira Feb 1, 2018
a58daf1
update buttons
nylira Feb 1, 2018
270df78
update changelog
nylira Feb 1, 2018
344c04d
fix tests, convert btn__primary to color attribute
nylira Feb 1, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,3 +31,13 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.

### Removed
* Removed unused `sass-loader` node dependency. @nylira

## [0.4.0] - 2018-02-01
### Added
* Added button styles for Success, Warning, and Danger states. @nylira
* Added support for image icons. @faboweb

### Changed
* Improved primary button style. @nylira
* Fixed the cut-off text bug in buttons. @nylira
* Improves the `hover-bg` app variable color. @nylira
4 changes: 2 additions & 2 deletions app/src/renderer/components/common/NiListItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ transition(name="proposal")
router-link.ni-li.ni-li-link(v-else-if="btn && to" :to="to"): .ni-li-container
+ni-li-thumb
+ni-li-dl
btn(:value="btn" icon="chevron_right" icon-pos="right").btn__primary
btn(:value="btn" icon="chevron_right" icon-pos="right" color="primary")

// dt/dd text
.ni-li(v-else-if='dt'): .ni-li-container
Expand Down Expand Up @@ -91,7 +91,7 @@ export default {

&.ni-li-link
&:hover
background: app-bg-hover
background hover-bg

.ni-li-label
cursor pointer
Expand Down
2 changes: 1 addition & 1 deletion app/src/renderer/components/staking/LiDelegate.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ export default {
&:nth-of-type(2n-1)
background app-fg
&.li-delegate-active
background alpha(hover, 17.5%)
background hover-bg
.li-delegate__value i
color link

Expand Down
4 changes: 2 additions & 2 deletions app/src/renderer/components/staking/PageBond.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,8 +109,8 @@ page.page-bond(title="Bond Atoms")
v-if='!$v.fields.bondConfirm.required')

div(slot='footer')
btn#btn-reset(type="button" @click.native="resetFields" value="Reset")
btn#btn-bond.btn__primary(value="Submit")
btn#btn-reset(type="button" @click.native="resetFields" value="Reset" color="danger")
btn#btn-bond(value="Submit" color="primary")
</template>

<script>
Expand Down
4 changes: 2 additions & 2 deletions app/src/renderer/components/staking/PageDelegates.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,10 @@ page#page-delegates(title='Delegates')
.fixed-button-bar
template(v-if="userCanDelegate")
.label #[strong {{ shoppingCart.length }}] delegates selected
btn.btn__primary(type="link" to="/staking/bond" :disabled="shoppingCart.length < 1" icon="chevron_right" icon-pos="right" value="Next")
btn(type="link" to="/staking/bond" :disabled="shoppingCart.length < 1" icon="chevron_right" icon-pos="right" value="Next" color="primary")
template(v-else)
.label You do not have any ATOMs to delegate.
btn.btn__primary(disabled icon="chevron_right" icon-pos="right" value="Next")
btn(disabled icon="chevron_right" icon-pos="right" value="Next" color="primary")
</template>

<script>
Expand Down
4 changes: 2 additions & 2 deletions app/src/renderer/components/wallet/PageSend.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,8 @@ page(title='Send')

div(slot='footer')
div
btn.btn__primary(v-if='sending' value='Sending...' disabled)
btn.btn__primary(v-else @click='onSubmit' value="Send Tokens")
btn(v-if='sending' value='Sending...' disabled color="primary")
btn(v-else @click='onSubmit' value="Send Tokens" color="primary")
</template>

<script>
Expand Down
9 changes: 0 additions & 9 deletions app/src/renderer/styles/app.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,6 @@ a
.desktop-only
display none

.btn__primary
.ni-btn-container
background alpha(link, 50%)
border-color alpha(dim, 50%)
&:hover
border-color dim
.ni-btn-value
color bright

#app
df()
color txt
Expand Down
7 changes: 3 additions & 4 deletions app/src/renderer/styles/variables.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ app-fg = hsl(app-hue, 33%, 16%)

app-bg = hsl(app-hue, 36%, 13%)
app-bg-alpha = alpha(app-bg, 95%)
app-bg-hover = hsl(app-hue, 33%, 20%)

// text
bright = #fff
Expand All @@ -28,9 +27,9 @@ bc = hsl(app-hue, 22%, 23%)
bc-dim = app-fg

// anchor
link = hsl(app-hue, 88%, 70%)
hover = hsl(app-hue, 88%, 60%)
hover-bg = hsl(app-hue, 30%, 19%)
link = hsl(app-hue, 88%, 67%)
hover = hsl(app-hue, 88%, 73%)
hover-bg = hsl(app-hue, 43%, 10%)

// input
input-bg = transparent
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@
"xmlhttprequest": "^1.8.0"
},
"dependencies": {
"@nylira/vue-button": "^4.1.5",
"@nylira/vue-button": "^4.3.2",
"@nylira/vue-field": "^1.1.17",
"@nylira/vue-form-msg": "^1.0.3",
"@nylira/vue-input": "^3.2.0",
Expand Down
4 changes: 3 additions & 1 deletion test/unit/specs/components/common/__snapshots__/NISessionAccountDelete.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,9 @@ exports[`NiSessionAccountDelete has the expected html structure 1`] = `
</div>
</div>
<div class=\\"ni-session-footer\\">
<button class=\\"ni-btn\\"><span class=\\"ni-btn-container ni-btn-size-lg\\"><i aria-hidden=\\"true\\" class=\\"ni-btn-icon material-icons\\">exit_to_app</i><span class=\\"ni-btn-value\\">Sign Out and Remove Account</span></span></button>
<button class=\\"ni-btn\\"><span class=\\"ni-btn__container ni-btn--size-lg\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">exit_to_app</i>
<!---->
<span class=\\"ni-btn__value\\">Sign Out and Remove Account</span></span></button>
</div>
</main>
<!---->
Expand Down
4 changes: 3 additions & 1 deletion test/unit/specs/components/common/__snapshots__/NISessionSignIn.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -291,7 +291,9 @@ exports[`NiSessionSignIn has the expected html structure 1`] = `
</div>
</div>
<div class=\\"ni-session-footer\\">
<button class=\\"ni-btn\\"><span class=\\"ni-btn-container ni-btn-icon-right ni-btn-size-lg\\"><i aria-hidden=\\"true\\" class=\\"ni-btn-icon material-icons\\">arrow_forward</i><span class=\\"ni-btn-value\\">Next</span></span></button>
<button class=\\"ni-btn\\"><span class=\\"ni-btn__container ni-btn__icon-right ni-btn--size-lg\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">arrow_forward</i>
<!---->
<span class=\\"ni-btn__value\\">Next</span></span></button>
</div>
</main>
<!---->
Expand Down
4 changes: 3 additions & 1 deletion test/unit/specs/components/common/__snapshots__/NISessionSignUp.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,9 @@ exports[`NISessionSignUp has the expected html structure 1`] = `
</div>
</div>
<div class=\\"ni-session-footer\\">
<button class=\\"ni-btn\\"><span class=\\"ni-btn-container ni-btn-icon-right ni-btn-size-lg\\"><i aria-hidden=\\"true\\" class=\\"ni-btn-icon material-icons\\">arrow_forward</i><span class=\\"ni-btn-value\\">Next</span></span></button>
<button class=\\"ni-btn\\"><span class=\\"ni-btn__container ni-btn__icon-right ni-btn--size-lg\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">arrow_forward</i>
<!---->
<span class=\\"ni-btn__value\\">Next</span></span></button>
</div>
</main>
<!---->
Expand Down
2 changes: 1 addition & 1 deletion test/unit/specs/components/common/__snapshots__/NiBtnCopy.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`NiBtnCopy has the expected html structure 1`] = `"<button class=\\"ni-btn btn-copy\\"><span class=\\"ni-btn-container\\"><i aria-hidden=\\"true\\" class=\\"ni-btn-icon material-icons\\">content_copy</i><span class=\\"ni-btn-value\\">Copy</span></span></button>"`;
exports[`NiBtnCopy has the expected html structure 1`] = `"<button class=\\"ni-btn btn-copy\\"><span class=\\"ni-btn__container\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">content_copy</i><!----><span class=\\"ni-btn__value\\">Copy</span></span></button>"`;
7 changes: 4 additions & 3 deletions test/unit/specs/components/common/__snapshots__/NiLiCopy.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,17 @@ exports[`NiLiCopy has the expected html structure 1`] = `
class="ni-btn btn-copy"
>
<span
class="ni-btn-container"
class="ni-btn__container"
>
<i
aria-hidden="true"
class="ni-btn-icon material-icons"
class="ni-btn__icon material-icons"
>
content_copy
</i>
<!---->
<span
class="ni-btn-value"
class="ni-btn__value"
>
Copy
</span>
Expand Down
5 changes: 3 additions & 2 deletions test/unit/specs/components/common/__snapshots__/NiModalSearch.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,15 +28,16 @@ exports[`NiModalSearch has the expected html structure 1`] = `
class="ni-btn"
>
<span
class="ni-btn-container"
class="ni-btn__container"
>
<i
aria-hidden="true"
class="ni-btn-icon material-icons"
class="ni-btn__icon material-icons"
>
close
</i>
<!---->
<!---->
</span>
</button>
</div>
Expand Down
4 changes: 3 additions & 1 deletion test/unit/specs/components/common/__snapshots__/NiSessionImport.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,9 @@ exports[`NiSessionImport has the expected html structure 1`] = `
</div>
</div>
<div class=\\"ni-session-footer\\">
<button class=\\"ni-btn\\"><span class=\\"ni-btn-container ni-btn-icon-right ni-btn-size-lg\\"><i aria-hidden=\\"true\\" class=\\"ni-btn-icon material-icons\\">arrow_forward</i><span class=\\"ni-btn-value\\">Next</span></span></button>
<button class=\\"ni-btn\\"><span class=\\"ni-btn__container ni-btn__icon-right ni-btn--size-lg\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">arrow_forward</i>
<!---->
<span class=\\"ni-btn__value\\">Next</span></span></button>
</div>
</main>
<!---->
Expand Down
5 changes: 3 additions & 2 deletions test/unit/specs/components/common/__snapshots__/ToggleBtn.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,12 @@ exports[`TogggleBtn has the expected html structure 1`] = `
class="ni-btn"
>
<span
class="ni-btn-container"
class="ni-btn__container"
>
<!---->
<!---->
<span
class="ni-btn-value"
class="ni-btn__value"
>
HALLO
</span>
Expand Down
12 changes: 7 additions & 5 deletions test/unit/specs/components/staking/__snapshots__/PageBond.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -415,26 +415,28 @@ exports[`PageBond has the expected html structure 1`] = `
type="button"
>
<span
class="ni-btn-container"
class="ni-btn__container ni-btn--danger"
>
<!---->
<!---->
<span
class="ni-btn-value"
class="ni-btn__value"
>
Reset
</span>
</span>
</button>
<button
class="ni-btn btn__primary"
class="ni-btn"
id="btn-bond"
>
<span
class="ni-btn-container"
class="ni-btn__container ni-btn--primary"
>
<!---->
<!---->
<span
class="ni-btn-value"
class="ni-btn__value"
>
Submit
</span>
Expand Down
15 changes: 8 additions & 7 deletions test/unit/specs/components/staking/__snapshots__/PageDelegates.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ exports[`PageDelegates has the expected html structure 1`] = `
<div class=\\"label\\">
<strong>0</strong> delegates selected
</div>
<a href=\\"#/staking/bond\\" class=\\"ni-btn btn__primary\\" disabled=\\"disabled\\"><span class=\\"ni-btn-container ni-btn-icon-right\\"><i aria-hidden=\\"true\\" class=\\"ni-btn-icon material-icons\\">chevron_right</i><span class=\\"ni-btn-value\\">Next</span></span></a>
<a href=\\"#/staking/bond\\" class=\\"ni-btn\\" disabled=\\"disabled\\"><span class=\\"ni-btn__container ni-btn__icon-right ni-btn--primary\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">chevron_right</i><span class=\\"ni-btn__value\\">Next</span></span></a>
</div>
</main>
</div>"
Expand Down Expand Up @@ -233,15 +233,16 @@ exports[`PageDelegates should filter the delegates 1`] = `
class="ni-btn"
>
<span
class="ni-btn-container"
class="ni-btn__container"
>
<i
aria-hidden="true"
class="ni-btn-icon material-icons"
class="ni-btn__icon material-icons"
>
close
</i>
<!---->
<!---->
</span>
</button>
</div>
Expand Down Expand Up @@ -373,21 +374,21 @@ exports[`PageDelegates should filter the delegates 1`] = `
delegates selected
</div>
<a
class="ni-btn btn__primary"
class="ni-btn"
disabled="disabled"
href="#/staking/bond"
>
<span
class="ni-btn-container ni-btn-icon-right"
class="ni-btn__container ni-btn__icon-right ni-btn--primary"
>
<i
aria-hidden="true"
class="ni-btn-icon material-icons"
class="ni-btn__icon material-icons"
>
chevron_right
</i>
<span
class="ni-btn-value"
class="ni-btn__value"
>
Next
</span>
Expand Down
Loading