oxen-io
/
oxen-electron-gui-wallet
mirror of https://github.com/oxen-io/oxen-electron-gui-wallet.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

dark theme styling

This commit is contained in:
mosu forge 2018-10-25 16:17:33 -07:00 committed by mosu-forge
parent 908d1b8d24
commit 25cc4de092
26 changed files with 558 additions and 397 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
quasar.conf.js
View File

@ -60,6 +60,7 @@ module.exports = function (ctx) {
"QInput",
"QRadio",
"QBtn",
"QBtnToggle",
"QIcon",
"QTabs",
"QTab",

21
src/App.vue
View File

@ -5,8 +5,27 @@
</template>
<script>
import { mapState } from "vuex"
export default {
name: "App"
name: "App",
computed: mapState({
theme: state => state.gateway.app.config.appearance.theme,
}),
watch: {
theme: function () {
if(this.theme == "dark")
document.body.classList.add("dark")
else
document.body.classList.remove("dark")
}
},
mounted () {
if(this.theme == "dark")
document.body.classList.add("dark")
else
document.body.classList.remove("dark")
}
}
</script>

29
src/components/address_book_details.vue
View File

@ -11,15 +11,13 @@
Edit address book entry
</q-toolbar-title>
<q-btn v-if="mode=='edit'" flat no-ripple @click="cancelEdit()" label="Cancel" />
<q-btn class="q-ml-sm" color="primary" @click="save()" label="Save" />
</q-toolbar>
<div>
<q-list no-border>
<q-list no-border :dark="theme=='dark'">
<q-item>
<q-item-side class="self-start">
@ -30,6 +28,7 @@
<q-input v-model="newEntry.address" float-label="Address"
@blur="$v.newEntry.address.$touch"
:error="$v.newEntry.address.$error"
:dark="theme=='dark'"
/>
</q-field>
</q-item-main>
@ -38,16 +37,16 @@
<q-item>
<q-item-main>
<q-field>
<q-input v-model="newEntry.name" float-label="Name" />
<q-input v-model="newEntry.name" float-label="Name" :dark="theme=='dark'" />
</q-field>
</q-item-main>
<q-item-side class="self-start q-pa-sm">
<q-checkbox
v-model="newEntry.starred"
checked-icon="star"
unchecked-icon="star_border"
class="star-entry"
/>
v-model="newEntry.starred"
checked-icon="star"
unchecked-icon="star_border"
class="star-entry"
/>
</q-item-side>
</q-item>
@ -57,6 +56,7 @@
<q-input v-model="newEntry.payment_id" float-label="Payment ID (optional)"
@blur="$v.newEntry.payment_id.$touch"
:error="$v.newEntry.payment_id.$error"
:dark="theme=='dark'"
/>
</q-field>
</q-item-main>
@ -65,7 +65,7 @@
<q-item>
<q-item-main>
<q-field>
<q-input v-model="newEntry.description" type="textarea" float-label="Notes (optional)" />
<q-input v-model="newEntry.description" type="textarea" float-label="Notes (optional)" :dark="theme=='dark'" />
</q-field>
</q-item-main>
</q-item>
@ -91,9 +91,9 @@
Address book details
</q-toolbar-title>
<q-btn class="q-mr-sm"
flat no-ripple
:disable="!is_ready"
@click="edit()" label="Edit" />
flat no-ripple
:disable="!is_ready"
@click="edit()" label="Edit" />
<q-btn color="primary" @click="copyAddress" label="Copy address" />
</q-toolbar>
<div class="layout-padding">
@ -113,7 +113,7 @@
<div class="non-selectable">
<q-icon name="history" size="24px" />
<span class="vertical-middle q-ml-xs">Recent outgoing transactions to this address</span>
<span class="vertical-middle q-ml-xs">Recent transactions with this address</span>
</div>
<TxList type="in" :limit="5" :to-outgoing-address="entry.address" />
@ -155,6 +155,7 @@ export default {
}
},
computed: mapState({
theme: state => state.gateway.app.config.appearance.theme,
is_ready (state) {
return this.$store.getters["gateway/isReady"]
}

47
src/components/footer.vue
View File

@ -1,6 +1,6 @@
<template>
<q-layout-footer>
<div class="status-line monospace">
<q-layout-footer class="status-footer">
<div class="status-line">
<template v-if="config.daemon.type !== 'remote'">
<div>Daemon: {{ daemon.info.height_without_bootstrap }} / {{ target_height }} ({{ daemon_local_pct }}%)</div>
@ -79,47 +79,4 @@ export default {
</script>
<style lang="scss">
.status-line {
margin-bottom: 3px;
div {
display: inline-block;
padding: 0 8px;
}
div:last-child {
float:right;
}
}
.status-bars {
div {
height: 3px;
position: absolute;
bottom: 0;
left: 0;
transition: width 0.5s ease-out;
}
div:first-child {
background-color: goldenrod;
}
div:last-child {
background-color: green;
}
}
.q-layout-footer {
border-top: 1px solid #ccc;
padding-top: 2px;
background: white;
box-shadow: none;
font-size: 10px;
}
</style>

4
src/components/identicon.vue
View File

@ -195,8 +195,4 @@ export default {
</script>
<style>
.identicon {
box-shadow: inset rgba(255, 255, 255, 0.6) 0 2px 2px, inset rgba(0, 0, 0, 0.3) 0 -2px 6px;
border-radius: 2px;
}
</style>

22
src/components/mainmenu.vue
View File

@ -49,18 +49,18 @@
</div>
<q-btn
color="primary"
@click="showAbout(false)"
label="Close"
/>
color="primary"
@click="showAbout(false)"
label="Close"
/>
</div>
</q-modal>
</div>
</template>
<script>
import { mapState } from "vuex"
import SettingsModal from "components/settings"
export default {
name: "MainMenu",
props: {
@ -70,8 +70,9 @@ export default {
default: false
}
},
computed: {
},
computed: mapState({
theme: state => state.gateway.app.config.appearance.theme,
}),
methods: {
openExternal (url) {
this.$gateway.send("core", "open_url", {url})
@ -94,7 +95,8 @@ export default {
},
cancel: {
flat: true,
label: "CANCEL"
label: "CANCEL",
color: this.theme=="dark"?"white":"dark"
}
}).then(() => {
this.$router.replace({ path: "/wallet-select" })
@ -105,7 +107,7 @@ export default {
this.$store.dispatch("gateway/resetWalletData")
}, 250);
}).catch(() => {
});
})
},
exit () {
this.$gateway.confirmClose("Are you sure you want to exit?")
@ -126,7 +128,7 @@ export default {
a {
color: #027be3;
color: #497dc6;
text-decoration: none;
&:hover,

2
src/components/settings.vue
View File

@ -7,7 +7,7 @@
Settings
</q-toolbar-title>
<div class="row col justify-center">
<div class="row col justify-center q-pr-xl">
<q-btn-toggle
v-model="page"
toggle-color="primary"

34
src/components/settings_general.vue
View File

@ -19,10 +19,11 @@
<q-field v-if="config.daemon.type != 'remote'">
<div class="row gutter-sm">
<div class="col-8">
<q-input v-model="config.daemon.rpc_bind_ip" float-label="Local Daemon IP" disable />
<q-input v-model="config.daemon.rpc_bind_ip" float-label="Local Daemon IP"
:dark="theme=='dark'" disable />
</div>
<div class="col-4">
<q-input v-model="config.daemon.rpc_bind_port" float-label="Local Daemon Port (RPC)" type="number" :decimals="0" :step="1" min="1024" max="65535" />
<q-input v-model="config.daemon.rpc_bind_port" float-label="Local Daemon Port (RPC)" type="number" :decimals="0" :step="1" min="1024" max="65535" :dark="theme=='dark'" />
</div>
</div>
</q-field>
@ -30,10 +31,10 @@
<q-field v-if="config.daemon.type != 'local'">
<div class="row gutter-sm">
<div class="col-8">
<q-input v-model="config.daemon.remote_host" float-label="Remote Node Host" />
<q-input v-model="config.daemon.remote_host" float-label="Remote Node Host" :dark="theme=='dark'" />
</div>
<div class="col-4">
<q-input v-model="config.daemon.remote_port" float-label="Remote Node Port" type="number" :decimals="0" :step="1" min="1024" max="65535" />
<q-input v-model="config.daemon.remote_port" float-label="Remote Node Port" type="number" :decimals="0" :step="1" min="1024" max="65535" :dark="theme=='dark'" />
</div>
</div>
@ -42,11 +43,11 @@
<q-field>
<div class="row gutter-sm">
<div class="col-8">
<q-input v-model="config.app.data_dir" stack-label="Data Storage Path" disable />
<q-input v-model="config.app.data_dir" stack-label="Data Storage Path" disable :dark="theme=='dark'" />
<input type="file" webkitdirectory directory id="dataPath" v-on:change="setDataPath" ref="fileInput" hidden />
</div>
<div class="col-4">
<q-btn v-on:click="selectPath">Select Location</q-btn>
<q-btn v-on:click="selectPath" :text-color="theme=='dark'?'white':'dark'">Select Location</q-btn>
</div>
</div>
</q-field>
@ -56,11 +57,11 @@
<q-field>
<div class="row gutter-sm">
<div class="col-3">
<q-input v-model="config.daemon.log_level" :disable="config.daemon.type == 'remote'"
<q-input v-model="config.daemon.log_level" :disable="config.daemon.type == 'remote'" :dark="theme=='dark'"
float-label="Daemon Log Level" type="number" :decimals="0" :step="1" min="0" max="4" />
</div>
<div class="col-3">
<q-input v-model="config.wallet.log_level"
<q-input v-model="config.wallet.log_level" :dark="theme=='dark'"
float-label="Wallet Log Level" type="number" :decimals="0" :step="1" min="0" max="4" />
</div>
<div class="col-3">
@ -71,19 +72,19 @@
<q-field>
<div class="row gutter-sm">
<div class="col-3">
<q-input v-model="config.daemon.in_peers" :disable="config.daemon.type == 'remote'"
<q-input v-model="config.daemon.in_peers" :disable="config.daemon.type == 'remote'" :dark="theme=='dark'"
float-label="Max Incoming Peers" type="number" :decimals="0" :step="1" min="-1" max="65535" />
</div>
<div class="col-3">
<q-input v-model="config.daemon.out_peers" :disable="config.daemon.type == 'remote'"
<q-input v-model="config.daemon.out_peers" :disable="config.daemon.type == 'remote'" :dark="theme=='dark'"
float-label="Max Outgoing Peers" type="number" :decimals="0" :step="1" min="-1" max="65535" />
</div>
<div class="col-3">
<q-input v-model="config.daemon.limit_rate_up" :disable="config.daemon.type == 'remote'"
<q-input v-model="config.daemon.limit_rate_up" :disable="config.daemon.type == 'remote'" :dark="theme=='dark'"
float-label="Limit Upload Rate" type="number" suffix="Kb/s" :decimals="0" :step="1" min="-1" max="65535" />
</div>
<div class="col-3">
<q-input v-model="config.daemon.limit_rate_down" :disable="config.daemon.type == 'remote'"
<q-input v-model="config.daemon.limit_rate_down" :disable="config.daemon.type == 'remote'" :dark="theme=='dark'"
float-label="Limit Download Rate" type="number" suffix="Kb/s" :decimals="0" :step="1" min="-1" max="65535" />
</div>
</div>
@ -91,19 +92,19 @@
<q-field>
<div class="row gutter-sm">
<div class="col-3">
<q-input v-model="config.daemon.p2p_bind_port" :disable="config.daemon.type == 'remote'"
<q-input v-model="config.daemon.p2p_bind_port" :disable="config.daemon.type == 'remote'" :dark="theme=='dark'"
float-label="Daemon P2P Port" type="number" :decimals="0" :step="1" min="1024" max="65535" />
</div>
<div class="col-3">
<q-input v-model="config.daemon.zmq_rpc_bind_port" :disable="config.daemon.type == 'remote'"
<q-input v-model="config.daemon.zmq_rpc_bind_port" :disable="config.daemon.type == 'remote'" :dark="theme=='dark'"
float-label="Daemon ZMQ Port" type="number" :decimals="0" :step="1" min="1024" max="65535" />
</div>
<div class="col-3">
<q-input v-model="config.app.ws_bind_port"
<q-input v-model="config.app.ws_bind_port" :dark="theme=='dark'"
float-label="Internal Wallet Port" type="number" :decimals="0" :step="1" min="1024" max="65535" />
</div>
<div class="col-3">
<q-input v-model="config.wallet.rpc_bind_port" :disable="config.daemon.type == 'remote'"
<q-input v-model="config.wallet.rpc_bind_port" :disable="config.daemon.type == 'remote'" :dark="theme=='dark'"
float-label="Wallet RPC Port" type="number" :decimals="0" :step="1" min="1024" max="65535" />
</div>
</div>
@ -118,6 +119,7 @@ import { mapState } from "vuex"
export default {
name: "SettingsGeneral",
computed: mapState({
theme: state => state.gateway.app.config.appearance.theme,
config: state => state.gateway.app.pending_config,
}),
methods: {

23
src/components/tx_details.vue
View File

@ -3,12 +3,12 @@
<q-modal-layout>
<q-toolbar slot="header" color="dark" inverted>
<q-btn
flat
round
dense
@click="isVisible = false"
icon="reply"
/>
flat
round
dense
@click="isVisible = false"
icon="reply"
/>
<q-toolbar-title>
Transaction details
</q-toolbar-title>
@ -126,14 +126,16 @@
<q-field class="q-mt-md">
<q-input
v-model="txNotes" float-label="Transaction notes"
type="textarea" rows="2" />
v-model="txNotes" float-label="Transaction notes"
:dark="theme=='dark'"
type="textarea" rows="2" />
</q-field>
<q-field class="q-mt-sm">
<q-btn
:disable="!is_ready"
@click="saveTxNotes" label="Save tx notes" />
:disable="!is_ready"
:text-color="theme=='dark'?'white':'dark'"
@click="saveTxNotes" label="Save tx notes" />
</q-field>
</div>
@ -153,6 +155,7 @@ import FormatRyo from "components/format_ryo"
export default {
name: "TxDetails",
computed: mapState({
theme: state => state.gateway.app.config.appearance.theme,
in_tx_address_used (state) {
let i
let used_addresses = state.gateway.wallet.address_list.primary.concat(state.gateway.wallet.address_list.used)

52
src/components/tx_list.vue
View File

@ -2,13 +2,12 @@
<div>
<template v-if="tx_list.length === 0">
<p class="q-pa-md q-mb-none">No transactions found</p>
</template>
<template v-else>
<q-infinite-scroll :handler="loadMore" ref="scroller">
<q-list link no-border class="tx-list">
<q-list link no-border :dark="theme=='dark'" class="tx-list">
<q-item v-for="(tx, index) in tx_list" :key="tx.txid"
@click.native="details(tx)" :class="'tx-'+tx.type">
<q-item-side>
@ -75,6 +74,7 @@ export default {
},
},
computed: mapState({
theme: state => state.gateway.app.config.appearance.theme,
current_height: state => state.gateway.daemon.info.height,
tx_list_all: state => state.gateway.wallet.transactions.tx_list,
tx_list (state) {
@ -153,50 +153,4 @@ export default {
</script>
<style lang="scss">
.tx-list {
.q-item.tx-in,
.q-item.tx-pool {
.q-icon {
color: #333;
}
.q-item-label {
color: green;
}
&>div:last-child {
text-align:right;
&>div:first-child {
span {
color: green;
&:before {
content: "+";
color: green;
}
}
}
}
}
.q-item.tx-out,
.q-item.tx-pending {
.q-icon {
color: #333;
}
.q-item-label {
color: purple;
}
&>div:last-child {
text-align:right;
&>div:first-child {
span {
color: purple;
&:before {
content: "-";
color: purple;
}
}
}
}
}
}
</style>

296
src/css/app.styl
View File

@ -12,6 +12,31 @@
background: #63c9f3;
}
:root {
--q-color-primary: #497dc6;
}
* {
scrollbar-track-color: #fff;
scrollbar-arrow-color: #fff;
&::-webkit-scrollbar-corner { background-color: #fff;}
&::-webkit-scrollbar-track-piece { background-color: #fff;}
scrollbar-face-color: #646464;
scrollbar-base-color: #646464;
scrollbar-3dlight-color: #646464;
scrollbar-highlight-color: #646464;
scrollbar-shadow-color: #646464;
scrollbar-dark-shadow-color: #646464;
&::-webkit-scrollbar { width: 8px; height: 8px;}
&::-webkit-scrollbar-button { background-color: #646464; height:0; width: 0; }
&::-webkit-scrollbar-track { background-color: #646464;}
&::-webkit-scrollbar-thumb { height: 50px; background-color: #646464; border-radius: 3px;}
&::-webkit-resizer { background-color: #646464;}
}
h1,h2,h3,h4,h5,h6,
img,
.q-list-header,
@ -64,6 +89,10 @@ footer,
text-align: left;
}
.q-layout-page {
min-height: 0 !important;
}
.q-layout-header {
background: white;
box-shadow: none;
@ -171,3 +200,270 @@ footer,
.q-loading + .modal {
z-index: 9999 !important;
}
.identicon {
box-shadow: inset rgba(255, 255, 255, 0.6) 0 2px 2px, inset rgba(0, 0, 0, 0.3) 0 -2px 6px;
border-radius: 2px;
}
.q-layout-footer.status-footer {
border-top: 1px solid #ccc;
padding-top: 2px;
background: #fff;
box-shadow: none;
font-size: 12px;
.status-line {
margin-bottom: 5px;
div {
display: inline-block;
padding: 0 8px;
}
div:last-child {
float:right;
}
}
.status-bars {
div {
height: 3px;
position: absolute;
bottom: 0;
left: 0;
transition: width 0.5s ease-out;
}
div:first-child {
background-color: goldenrod;
}
div:last-child {
background-color: green;
}
}
}
.tx-list {
.q-item.tx-in,
.q-item.tx-pool {
.q-icon {
color: #333;
}
.q-item-label {
color: green;
}
&>div:last-child {
text-align:right;
&>div:first-child {
span {
color: green;
&:before {
content: "+";
color: green;
}
}
}
}
}
.q-item.tx-out,
.q-item.tx-pending {
.q-icon {
color: #333;
}
.q-item-label {
color: purple;
}
&>div:last-child {
text-align:right;
&>div:first-child {
span {
color: purple;
&:before {
content: "-";
color: purple;
}
}
}
}
}
}
body.dark {
&, * {
scrollbar-track-color: #111;
scrollbar-arrow-color: #111;
&::-webkit-scrollbar-corner { background-color: #111;}
&::-webkit-scrollbar-track-piece { background-color: #111;}
}
.q-item-sublabel {
color: #cecece;
}
.infoBoxIcon {
color: #cecece;
}
.infoBoxContent {
.text {
color: #cecece;
}
.value {
color: #cecece;
}
}
.identicon {
box-shadow: inset rgba(0, 0, 0, 0.1) 0 2px 2px, inset rgba(0, 0, 0, 0.3) 0 -2px 6px;
border-radius: 2px;
}
.q-layout {
background: #111;
color:#cecece;
.q-layout-header {
background: #111;
box-shadow: none;
border-bottom: 1px solid #333;
}
}
.q-layout-footer.status-footer {
background: #111;
color: #cecece;
border-top: 1px solid #333;
}
.q-list-dark .q-item,
.q-item-dark .q-item,
.q-list-header {
color: #cecece;
}
.q-stepper-tab.step-waiting,
.q-stepper-step-content{
color: #cecece;
}
.q-popover {
background: #222;
color:#cecece;
.q-list-separator > .q-item-division + .q-item-division, .q-item-division + .q-item-separator {
border-top: 1px solid #333;
}
}
.modal.minimized {
.q-input {
.q-input-target {
color: #cecece;
}
&.q-if:hover:before {
color: #cecece;
}
}
}
.modal {
.modal-content,
.modal-body {
background: #111;
color:#cecece;
}
.q-layout-header {
background: #111;
box-shadow: none;
border-bottom: 1px solid #333;
.q-toolbar {
&>* {
color: #cecece;
}
}
}
}
.tx-list {
.q-item.tx-in,
.q-item.tx-pool {
.q-icon {
color: #cecece;
}
.q-item-label {
color: lightgreen;
}
&>div:last-child {
text-align:right;
&>div:first-child {
span {
color: lightgreen;
&:before {
content: "+";
color: lightgreen;
}
}
}
}
}
.q-item.tx-out,
.q-item.tx-pending {
.q-icon {
color: #cecece;
}
.q-item-label {
color: mediumpurple;
}
&>div:last-child {
text-align:right;
&>div:first-child {
span {
color: mediumpurple;
&:before {
content: "-";
color: mediumpurple;
}
}
}
}
}
}
.q-layout-footer.status-footer {
.status-bars {
div:first-child {
background-color: goldenrod;
}
div:last-child {
background-color: #497dc6;
}
}
}
}

11
src/gateway/gateway.js
View File

@ -12,6 +12,14 @@ export class Gateway {
this.token = null
this.scee = new SCEE()
this.app.store.commit("gateway/set_app_data", {
config: {
appearance: {
theme: "dark"
}
}
});
this.closeDialog = false
this.app.store.commit("gateway/set_app_data", {
@ -55,7 +63,8 @@ export class Gateway {
},
cancel: {
flat: true,
label: "CANCEL"
label: "CANCEL",
color: this.app.store.state.gateway.app.config.appearance.theme=="dark"?"white":"dark"
}
}).then(() => {
this.closeDialog = false

118
src/layouts/default.vue
View File

@ -1,118 +0,0 @@
<template>
<q-layout view="hHh Lpr lFf">
<q-layout-header>
<q-btn-dropdown icon="menu" label="" size="md" flat>
<!-- dropdown content -->
<q-list link>
<q-item>
<q-item-main>
<q-item-tile label>Switch Wallet</q-item-tile>
</q-item-main>
</q-item>
<q-item>
<q-item-main>
<q-item-tile label>Settings</q-item-tile>
</q-item-main>
</q-item>
<q-item>
<q-item-main>
<q-item-tile label>Exit Ryo GUI Wallet</q-item-tile>
</q-item-main>
</q-item>
</q-list>
</q-btn-dropdown>
<q-tabs class="col" align="justify" color="dark" inverted>
<q-tab slot="title"><span><q-icon name="attach_money" /> Wallet</span></q-tab>
<q-tab slot="title"><span><q-icon name="call_received" /> Receive</span></q-tab>
<q-tab slot="title"><span><q-icon name="call_made" /> Send</span></q-tab>
<q-tab slot="title"><span><q-icon name="person" /> Address Book</span></q-tab>
<q-tab slot="title"><span><q-icon name="history" /> TX History</span></q-tab>
</q-tabs>
</q-layout-header>
<q-page-container>
<router-view />
</q-page-container>
<q-layout-footer>
<div class="row">
<div>
Daemon: {{ status }}
</div>
<div>
Height: {{ height }}
</div>
</div>
<q-progress :percentage="progress" stripe animate />
</q-layout-footer>
</q-layout>
</template>
<script>
import {
openURL
} from "quasar"
import {
mapState
} from "vuex"
export default {
name: "LayoutDefault",
data() {
return {
selectedTab: "tab-1",
progress: 40
}
},
computed: {
...mapState({
status: state => state.gateway.info.status,
height: state => state.gateway.info.height
})
},
methods: {
openURL
}
}
</script>
<style>
.q-layout-header {
box-shadow: none;
border-bottom: 1px solid #ddd;
}
.q-layout-header .q-btn-dropdown {
height: 48px;
width: 50px;
position: absolute;
z-index: 1;
border-radius: 0;
}
.q-layout-header .q-btn-dropdown .q-btn-dropdown-arrow {
display: none;
}
.q-layout-header .q-tabs {
padding-left: 50px;
}
.q-layout-header .q-tabs-head {
padding: 0;
}
.q-layout-header .q-tabs .q-tab {
text-transform: none;
}
.q-layout-header .q-tabs .q-icon {
font-size: 22px;
}
</style>

16
src/layouts/wallet/main.vue
View File

@ -3,7 +3,7 @@
<q-layout-header class="shift-title">
<main-menu />
<q-tabs class="col" align="justify" color="dark" inverted>
<q-tabs class="col" align="justify" :color="theme == 'dark' ? 'light' : 'dark'" inverted>
<q-route-tab to="/wallet" default slot="title">
<span><q-icon name="attach_money" /> Wallet</span>
@ -36,19 +36,15 @@
</template>
<script>
import {
openURL
} from "quasar"
import {
mapState
} from "vuex"
import { openURL } from "quasar"
import { mapState } from "vuex"
import StatusFooter from "components/footer"
import MainMenu from "components/mainmenu"
export default {
name: "LayoutDefault",
computed: mapState({
theme: state => state.gateway.app.config.appearance.theme,
}),
data() {
return {
selectedTab: "tab-1",

65
src/pages/init/welcome.vue
View File

@ -1,7 +1,7 @@
<template>
<q-page>
<q-stepper class="no-shadow" ref="stepper">
<q-stepper class="no-shadow" ref="stepper" :color="theme == 'dark' ? 'light' : 'dark'" dark>
<q-step default title="Welcome">
@ -26,16 +26,29 @@
<div>Version: ATOM v1.0.2-0.3.1.2</div>
<h6 class="q-mb-md" style="font-weight: 300">Select Appearance:</h6>
<q-btn-toggle
v-model="choose_theme"
toggle-color="primary"
size="md"
:options="[
{label: 'Light theme', value: 'light', icon: 'brightness_5'},
{label: 'Dark theme', value: 'dark', icon: 'brightness_2'},
]"
/>
<h6 class="q-mb-md" style="font-weight: 300">Select language:</h6>
<div class="row">
<q-btn flat class="language-item">
<div class="language-item-circle">EN</div> English
</q-btn>
</div>
<q-btn-toggle
v-model="choose_lang"
toggle-color="primary"
size="md"
:options="[
{label: 'English', value: 'EN', icon: 'language'},
]"
/>
<p class="q-mt-md">More languages coming soon</p>
@ -80,18 +93,18 @@
<div class="row justify-end">
<div>
<q-btn
flat
@click="clickPrev()"
label="Back"
/>
flat
@click="clickPrev()"
label="Back"
/>
</div>
<div>
<q-btn
class="q-ml-sm"
color="primary"
@click="clickNext()"
label="Next"
/>
class="q-ml-sm"
color="primary"
@click="clickNext()"
label="Next"
/>
</div>
</div>
@ -105,6 +118,7 @@ import { mapState } from "vuex"
import SettingsGeneral from "components/settings_general"
export default {
computed: mapState({
theme: state => state.gateway.app.config.appearance.theme,
pending_config: state => state.gateway.app.pending_config
}),
data() {
@ -114,8 +128,14 @@ export default {
}
},
watch: {
choose_theme: function () {
this.$gateway.call("set_theme", this.choose_theme)
choose_theme: function (val) {
this.$store.commit("gateway/set_app_data", {
config: {
appearance: {
theme: val
}
}
});
}
},
mounted () {
@ -176,9 +196,4 @@ export default {
}
}
footer {
background:white;
}
</style>

25
src/pages/wallet-select/create.vue
View File

@ -3,19 +3,21 @@
<div class="q-mx-md">
<q-field class="q-mt-none">
<q-input
v-model="wallet.name"
float-label="Wallet name"
@blur="$v.wallet.name.$touch"
:error="$v.wallet.name.$error"
/>
v-model="wallet.name"
float-label="Wallet name"
@blur="$v.wallet.name.$touch"
:error="$v.wallet.name.$error"
:dark="theme=='dark'"
/>
</q-field>
<q-field>
<q-select
v-model="wallet.language"
float-label="Seed language"
:options="languageOptions"
/>
v-model="wallet.language"
float-label="Seed language"
:options="languageOptions"
:dark="theme=='dark'"
/>
</q-field>
<q-field>
@ -33,11 +35,11 @@
</p>
<q-field>
<q-input v-model="wallet.password" type="password" float-label="Password" />
<q-input v-model="wallet.password" type="password" float-label="Password" :dark="theme=='dark'" />
</q-field>
<q-field>
<q-input v-model="wallet.password_confirm" type="password" float-label="Confirm Password" />
<q-input v-model="wallet.password_confirm" type="password" float-label="Confirm Password" :dark="theme=='dark'" />
</q-field>
<q-btn color="primary" @click="create" label="Create wallet" />
@ -79,6 +81,7 @@ export default {
}
},
computed: mapState({
theme: state => state.gateway.app.config.appearance.theme,
status: state => state.gateway.wallet.status,
}),
watch: {

18
src/pages/wallet-select/import-legacy.vue
View File

@ -13,27 +13,28 @@
<q-field class="q-mt-none">
<q-input
v-model="wallet.name"
float-label="New wallet name"
@blur="$v.wallet.name.$touch"
:error="$v.wallet.name.$error"
/>
v-model="wallet.name"
float-label="New wallet name"
@blur="$v.wallet.name.$touch"
:error="$v.wallet.name.$error"
:dark="theme=='dark'"
/>
</q-field>
<q-field>
<div class="row gutter-sm">
<div class="col-12">
<q-input v-model="wallet_path" stack-label="Wallet file" disable />
<q-input v-model="wallet_path" stack-label="Wallet file" disable :dark="theme=='dark'" />
</div>
</div>
</q-field>
<q-field>
<q-input v-model="wallet.password" type="password" float-label="Password" />
<q-input v-model="wallet.password" type="password" float-label="Password" :dark="theme=='dark'" />
</q-field>
<q-field>
<q-input v-model="wallet.password_confirm" type="password" float-label="Confirm Password" />
<q-input v-model="wallet.password_confirm" type="password" float-label="Confirm Password" :dark="theme=='dark'" />
</q-field>
<q-btn color="primary" @click="import_wallet" label="Import wallet" />
@ -59,6 +60,7 @@ export default {
}
},
computed: mapState({
theme: state => state.gateway.app.config.appearance.theme,
status: state => state.gateway.wallet.status,
wallets_legacy: state => state.gateway.wallets.legacy,
wallet_path (state) {

39
src/pages/wallet-select/import-view-only.vue
View File

@ -3,29 +3,32 @@
<div class="q-mx-md">
<q-field class="q-mt-none">
<q-input
v-model="wallet.name"
float-label="Wallet name"
@blur="$v.wallet.name.$touch"
:error="$v.wallet.name.$error"
/>
v-model="wallet.name"
float-label="Wallet name"
@blur="$v.wallet.name.$touch"
:error="$v.wallet.name.$error"
:dark="theme=='dark'"
/>
</q-field>
<q-field>
<q-input
v-model="wallet.address"
float-label="Wallet address"
@blur="$v.wallet.address.$touch"
:error="$v.wallet.address.$error"
/>
v-model="wallet.address"
float-label="Wallet address"
@blur="$v.wallet.address.$touch"
:error="$v.wallet.address.$error"
:dark="theme=='dark'"
/>
</q-field>
<q-field>
<q-input
v-model="wallet.viewkey"
float-label="Private viewkey"
@blur="$v.wallet.viewkey.$touch"
:error="$v.wallet.viewkey.$error"
/>
v-model="wallet.viewkey"
float-label="Private viewkey"
@blur="$v.wallet.viewkey.$touch"
:error="$v.wallet.viewkey.$error"
:dark="theme=='dark'"
/>
</q-field>
<q-field>
@ -33,15 +36,16 @@
min="0" float-label="Restore height"
@blur="$v.wallet.refresh_start_height.$touch"
:error="$v.wallet.refresh_start_height.$error"
:dark="theme=='dark'"
/>
</q-field>
<q-field>
<q-input v-model="wallet.password" type="password" float-label="Password" />
<q-input v-model="wallet.password" type="password" float-label="Password" :dark="theme=='dark'" />
</q-field>
<q-field>
<q-input v-model="wallet.password_confirm" type="password" float-label="Confirm Password" />
<q-input v-model="wallet.password_confirm" type="password" float-label="Confirm Password" :dark="theme=='dark'" />
</q-field>
<q-btn color="primary" @click="restore_view_wallet" label="Restore view-only wallet" />
@ -68,6 +72,7 @@ export default {
}
},
computed: mapState({
theme: state => state.gateway.app.config.appearance.theme,
status: state => state.gateway.wallet.status,
}),
watch: {

24
src/pages/wallet-select/import.vue
View File

@ -4,31 +4,32 @@
<q-field class="q-mt-none">
<q-input
v-model="wallet.name"
float-label="New wallet name"
@blur="$v.wallet.name.$touch"
:error="$v.wallet.name.$error"
/>
v-model="wallet.name"
float-label="New wallet name"
@blur="$v.wallet.name.$touch"
:error="$v.wallet.name.$error"
:dark="theme=='dark'"
/>
</q-field>
<q-field>
<div class="row gutter-sm">
<div class="col-8">
<q-input v-model="wallet.path" stack-label="Wallet file" disable />
<div class="col">
<q-input v-model="wallet.path" stack-label="Wallet file" disable :dark="theme=='dark'" />
<input type="file" id="walletPath" v-on:change="setWalletPath" ref="fileInput" hidden />
</div>
<div class="col-4">
<q-btn v-on:click="selectFile">Select wallet file</q-btn>
<div class="col-auto">
<q-btn v-on:click="selectFile" class="float-right" :text-color="theme=='dark'?'white':'dark'">Select wallet file</q-btn>
</div>
</div>
</q-field>
<q-field>
<q-input v-model="wallet.password" type="password" float-label="Password" />
<q-input v-model="wallet.password" type="password" float-label="Password" :dark="theme=='dark'" />
</q-field>
<q-field>
<q-input v-model="wallet.password_confirm" type="password" float-label="Confirm Password" />
<q-input v-model="wallet.password_confirm" type="password" float-label="Confirm Password" :dark="theme=='dark'" />
</q-field>
<q-btn color="primary" @click="import_wallet" label="Import wallet" />
@ -53,6 +54,7 @@ export default {
}
},
computed: mapState({
theme: state => state.gateway.app.config.appearance.theme,
status: state => state.gateway.wallet.status,
}),
watch: {

13
src/pages/wallet-select/index.vue
View File

@ -1,7 +1,7 @@
<template>
<q-page>
<q-list link no-border>
<q-list link no-border :dark="theme=='dark'">
<template v-if="wallets.list.length">
<q-list-header>Open wallet</q-list-header>
<q-item v-for="wallet in wallets.list" @click.native="openWallet(wallet)">
@ -16,24 +16,19 @@
<q-item-separator />
</template>
<q-item @click.native="createNewWallet()">
<!--<q-item-side avatar="statics/guy-avatar.png" />-->
<q-item-main label="Create new wallet" />
</q-item>
<q-item @click.native="restoreWallet()">
<!--<q-item-side avatar="statics/guy-avatar.png" />-->
<q-item-main label="Restore wallet from seed" />
</q-item>
<q-item @click.native="restoreViewWallet()">
<!--<q-item-side avatar="statics/guy-avatar.png" />-->
<q-item-main label="Restore view-only wallet" />
</q-item>
<q-item @click.native="importWallet()">
<!--<q-item-side avatar="statics/guy-avatar.png" />-->
<q-item-main label="Import wallet from file" />
</q-item>
<template v-if="wallets.legacy.length">
<q-item @click.native="importLegacyWallet()">
<!--<q-item-side avatar="statics/guy-avatar.png" />-->
<q-item-main label="Import wallet from legacy gui" />
</q-item>
</template>
@ -47,6 +42,7 @@ import { mapState } from "vuex"
import Identicon from "components/identicon"
export default {
computed: mapState({
theme: state => state.gateway.app.config.appearance.theme,
wallets: state => state.gateway.wallets,
status: state => state.gateway.wallet.status
}),
@ -65,7 +61,8 @@ export default {
},
cancel: {
flat: true,
label: "CANCEL"
label: "CANCEL",
color: this.theme=="dark"?"white":"dark"
}
}).then(password => {
this.$q.loading.show({
@ -73,6 +70,8 @@ export default {
})
this.$gateway.send("wallet", "open_wallet", {name: wallet.name, password: password});
})
.catch(() => {
})
} else {
this.$q.loading.show({
delay: 0

30
src/pages/wallet-select/restore.vue
View File

@ -3,21 +3,23 @@
<div class="q-mx-md">
<q-field class="q-mt-none">
<q-input
v-model="wallet.name"
float-label="Wallet name"
@blur="$v.wallet.name.$touch"
:error="$v.wallet.name.$error"
/>
v-model="wallet.name"
float-label="Wallet name"
@blur="$v.wallet.name.$touch"
:error="$v.wallet.name.$error"
:dark="theme=='dark'"
/>
</q-field>
<q-field>
<q-input
v-model="wallet.seed"
float-label="Mnemonic seed"
type="textarea"
@blur="$v.wallet.seed.$touch"
:error="$v.wallet.seed.$error"
/>
v-model="wallet.seed"
float-label="Mnemonic seed"
type="textarea"
@blur="$v.wallet.seed.$touch"
:error="$v.wallet.seed.$error"
:dark="theme=='dark'"
/>
</q-field>
<q-field>
@ -25,15 +27,16 @@
min="0" float-label="Restore height"
@blur="$v.wallet.refresh_start_height.$touch"
:error="$v.wallet.refresh_start_height.$error"
:dark="theme=='dark'"
/>
</q-field>
<q-field>
<q-input v-model="wallet.password" type="password" float-label="Password" />
<q-input v-model="wallet.password" type="password" float-label="Password" :dark="theme=='dark'" />
</q-field>
<q-field>
<q-input v-model="wallet.password_confirm" type="password" float-label="Confirm Password" />
<q-input v-model="wallet.password_confirm" type="password" float-label="Confirm Password" :dark="theme=='dark'" />
</q-field>
<q-btn color="primary" @click="restore_wallet" label="Restore wallet" />
@ -58,6 +61,7 @@ export default {
}
},
computed: mapState({
theme: state => state.gateway.app.config.appearance.theme,
status: state => state.gateway.wallet.status,
}),
watch: {

3
src/pages/wallet/addressbook.vue
View File

@ -13,7 +13,7 @@
</div>
<template v-if="address_book_starred.length || address_book.length">
<q-list link no-border>
<q-list link no-border :dark="theme=='dark'">
<q-item v-for="(entry, index) in address_book_starred" @click.native="details(entry)">
<q-item-side>
@ -65,6 +65,7 @@ import Identicon from "components/identicon"
import AddressBookDetails from "components/address_book_details"
export default {
computed: mapState({
theme: state => state.gateway.app.config.appearance.theme,
address_book: state => state.gateway.wallet.address_list.address_book,
address_book_starred: state => state.gateway.wallet.address_list.address_book_starred,
is_ready (state) {

3
src/pages/wallet/receive.vue
View File

@ -12,7 +12,7 @@
</div>
<q-list link no-border>
<q-list link no-border :dark="theme=='dark'">
<q-list-header>My primary address</q-list-header>
<q-item v-for="(address, index) in address_list.primary" @click.native="details(address)">
@ -66,6 +66,7 @@ import Identicon from "components/identicon"
import AddressDetails from "components/address_details"
export default {
computed: mapState({
theme: state => state.gateway.app.config.appearance.theme,
address_list: state => state.gateway.wallet.address_list
}),
methods: {

41
src/pages/wallet/send.vue
View File

@ -19,13 +19,13 @@
<div class="col">
<q-field class="q-ma-none">
<q-input v-model="newTx.amount" float-label="Amount"
<q-input v-model="newTx.amount" float-label="Amount" :dark="theme=='dark'"
type="number" min="0" :max="unlocked_balance / 1e9" />
</q-field>
</div>
<div>
<q-btn @click="newTx.amount = unlocked_balance / 1e9">All coins</q-btn>
<q-btn @click="newTx.amount = unlocked_balance / 1e9" :text-color="theme=='dark'?'white':'dark'">All coins</q-btn>
</div>
</div>
@ -37,6 +37,7 @@
<q-item-main>
<q-field>
<q-input v-model="newTx.address" float-label="Address"
:dark="theme=='dark'"
@blur="$v.newTx.address.$touch"
:error="$v.newTx.address.$error"
/>
@ -46,6 +47,7 @@
<q-field style="margin-top:0">
<q-input v-model="newTx.payment_id" float-label="Payment ID (optional)"
:dark="theme=='dark'"
@blur="$v.newTx.payment_id.$touch"
:error="$v.newTx.payment_id.$error"
/>
@ -55,20 +57,20 @@
<div class="col-6">
<q-field>
<q-select
v-model="newTx.mixin"
float-label="Mixin"
:options="mixinOptions"
/>
<q-select :dark="theme=='dark'"
v-model="newTx.mixin"
float-label="Mixin"
:options="mixinOptions"
/>
</q-field>
</div>
<div class="col-6">
<q-field>
<q-select
v-model="newTx.priority"
float-label="Priority"
:options="priorityOptions"
/>
<q-select :dark="theme=='dark'"
v-model="newTx.priority"
float-label="Priority"
:options="priorityOptions"
/>
</q-field>
</div>
@ -76,22 +78,22 @@
<q-field>
<q-checkbox v-model="newTx.address_book.save" label="Save to address book" />
<q-checkbox v-model="newTx.address_book.save" label="Save to address book" :dark="theme=='dark'" />
</q-field>
<div v-if="newTx.address_book.save">
<q-field>
<q-input v-model="newTx.address_book.name" float-label="Name" />
<q-input v-model="newTx.address_book.name" float-label="Name" :dark="theme=='dark'" />
</q-field>
<q-field>
<q-input v-model="newTx.address_book.description" type="textarea" rows="2" float-label="Notes" />
<q-input v-model="newTx.address_book.description" type="textarea" rows="2" float-label="Notes" :dark="theme=='dark'" />
</q-field>
</div>
<q-field class="q-pt-sm">
<q-btn
:disable="!is_ready"
color="primary" @click="send()" label="Send" />
:disable="!is_ready"
color="primary" @click="send()" label="Send" />
</q-field>
</div>
@ -111,6 +113,7 @@ import Identicon from "components/identicon"
const objectAssignDeep = require("object-assign-deep");
export default {
computed: mapState({
theme: state => state.gateway.app.config.appearance.theme,
unlocked_balance: state => state.gateway.wallet.info.unlocked_balance,
tx_status: state => state.gateway.tx_status,
is_ready (state) {
@ -259,7 +262,8 @@ export default {
},
cancel: {
flat: true,
label: "CANCEL"
label: "CANCEL",
color: this.theme=="dark"?"white":"dark"
}
}).then(password => {
this.$store.commit("gateway/set_tx_status", {
@ -269,6 +273,7 @@ export default {
})
let newTx = objectAssignDeep.noMutate(this.newTx, {password})
this.$gateway.send("wallet", "transfer", newTx)
}).catch(() => {
})
}
},

3
src/pages/wallet/txhistory.vue
View File

@ -8,7 +8,7 @@
</div>
<div class="col-4">
<q-select
<q-select :dark="theme=='dark'"
v-model="tx_type"
float-label="Filter by transaction type"
:options="tx_type_options"
@ -39,6 +39,7 @@ export default {
}
},
computed: mapState({
theme: state => state.gateway.app.config.appearance.theme,
tx_list: state => state.gateway.wallet.transactions.tx_list
}),

15
src/pages/wallet/wallet.vue
View File

@ -52,9 +52,9 @@
</div>
<div>
<h6 class="q-my-none">Recent transactions:</h6>
<h6 class="q-my-none">Recent transactions:</h6>
<div style="margin: 0 -16px;">
<TxList :limit="5" />
@ -161,7 +161,7 @@
flat class="q-mr-sm"
@click="key_image_modal_show = false"
label="Close"
/>
/>
<q-btn
color="primary"
@click="doKeyImages()"
@ -181,6 +181,7 @@ import FormatRyo from "components/format_ryo"
import TxList from "components/tx_list"
export default {
computed: mapState({
theme: state => state.gateway.app.config.appearance.theme,
info: state => state.gateway.wallet.info,
secret: state => state.gateway.wallet.secret,
data_dir: state => state.gateway.app.config.app.data_dir,
@ -254,11 +255,13 @@ export default {
},
cancel: {
flat: true,
label: "CANCEL"
label: "CANCEL",
color: this.theme=="dark"?"white":"dark"
}
}).then(password => {
//this.spinner = true
this.$gateway.send("wallet", "get_private_keys", {password})
}).catch(() => {
})
},
closePrivateKeys () {
@ -308,13 +311,15 @@ export default {
},
cancel: {
flat: true,
label: "CANCEL"
label: "CANCEL",
color: this.theme=="dark"?"white":"dark"
}
}).then(password => {
if(this.key_image_import_export == "Export")
this.$gateway.send("wallet", "export_key_images", {password: password, path: this.key_image_export_path})
else if(this.key_image_import_export == "Import")
this.$gateway.send("wallet", "import_key_images", {password: password, path: this.key_image_import_path})
}).catch(() => {
})
}