Skip to content
This repository has been archived by the owner on Mar 23, 2023. It is now read-only.

Improve settings menu UX #289

Merged
merged 5 commits into from Sep 28, 2017
Merged

Improve settings menu UX #289

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
43aa9dd
Alig the "Play song when receive funds?" label and switch button
j-a-m-l Sep 22, 2017
70ea754
Reorganize the settings menu and improve its aesthetics
j-a-m-l Sep 22, 2017
64f5879
Add a small space between the text of the "Play sound on transacion" …
j-a-m-l Sep 27, 2017
a54e8cd
Use "sound" instead of "song"
j-a-m-l Sep 27, 2017
b42e95f
Rename all instaces of "song" by "sound"
j-a-m-l Sep 27, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
22 changes: 21 additions & 1 deletion client/app/assets/app.css
View file
Open in desktop
Expand Up @@ -70,6 +70,26 @@ md-list.left-list md-list-item {
md-list.left-list md-list-item md-icon {
margin-right: 16px;
}
/* Since icons are text, avoids using the text cursor */
md-list.left-list md-list-item:first-child, md-list-item:nth-child(2) {
cursor: default;
}
md-list.left-list md-list-item md-select {
margin: 0;
}
md-list.left-list md-list-item md-select.currency {
text-transform: uppercase;
}
/* "Play sound" option */
md-list.left-list md-list-item:nth-child(3):hover {
background-color: rgba(158, 158, 158, 0.4);
}
md-list.left-list md-list-item:nth-child(3) .md-list-item-inner p {
margin-right: 20px
}
md-list.left-list md-list-item:nth-child(4) p, md-list-item:nth-child(4) ~ md-list-item p {
text-transform: uppercase;
}

.md-button.md-focused:not(:hover):focus {
background-color: transparent;
Expand Down Expand Up @@ -383,4 +403,4 @@ body > md-toolbar:not(.md-menu-toolbar) {
/* Useful with light background textures to outline the main toolbar buttons */
body.too-pale-background > md-toolbar:not(.md-menu-toolbar) {
background-color: rgba(20, 20, 20, 0.2) !important;
}
}
66 changes: 27 additions & 39 deletions client/app/index.html
View file
Open in desktop
Expand Up @@ -80,60 +80,48 @@
<md-button aria-label="Show Settings" ng-click="ul.openMenu($mdMenu.open, $event)">
<md-icon md-font-library="material-icons">settings</md-icon>
</md-button>
<md-menu-content flex layout-padding width="6" style="min-height: 430px; overflow:hidden;">
<md-menu-content flex layout-padding width="6" style="min-height: 458px; overflow:hidden;">
<md-list class="left-list">
<md-list-item>
<md-button ng-disabled="true">
<md-icon>attach_money</md-icon>
<label translate>Currency</label>
</md-button>
<md-select style="margin: 0;text-transform: uppercase" class="md-secondary" ng-model="ul.currency" ng-init="ul.currency" id="price-list" ng-change="ul.changeCurrency()">
<md-icon>attach_money</md-icon>
<p translate>Currency</p>
<md-select aria-label="Currency" class="currency md-secondary md-no-underline" ng-model="ul.currency" ng-init="ul.currency" id="price-list" ng-change="ul.changeCurrency()">
<md-option ng-value="opt" ng-repeat="opt in ul.currencies track by opt.symbol" style="text-transform: uppercase">{{ opt.name }}</md-option>
</md-select>
</md-list-item>
<md-list-item>
<md-button ng-disabled="true">
<md-icon>flag</md-icon>
<label translate>Language</label>
</md-button>
<md-select style="margin: 0" class="md-secondary" ng-model="ul.selectedLanguage" ng-init="ul.selectedLanguage = ul.getLanguage()" ng-change="ul.setLanguage()">
<md-icon>flag</md-icon>
<p translate>Language</p>
<md-select aria-label="Language" class="md-secondary md-no-underline" ng-model="ul.selectedLanguage" ng-init="ul.selectedLanguage = ul.getLanguage()" ng-change="ul.setLanguage()">
<md-option ng-value="language" ng-repeat="language in ul.selectAllLanguages()">{{language}}</md-option>
</md-select>
</md-list-item>
<md-list-item>
<md-button aria-label="Import Account" ng-click="ul.importAccount()">
<md-icon>file_download</md-icon>
<translate>Import Account</translate>
</md-button>
<md-list-item aria-label="Play sound when receiving transaction?">
<md-icon>music_note</md-icon>
<p translate>Play sound when receiving transaction?</p>
<md-switch ng-model="ul.playFundsReceivedSound" class="md-primary" md-no-ink arial-label="Play sound when receiving transaction?" ng-change="ul.togglePlayFundsReceivedSound()" ng-init="ul.togglePlayFundsReceivedSound()"></md-switch>
</md-list-item>
<md-list-item>
<md-button aria-label="Create Account" ng-click="ul.createAccount()">
<md-icon>account_box</md-icon>
<translate>Create Account</translate>
</md-button>
<md-list-item aria-label="Import Account" ng-click="ul.importAccount()">
<md-icon>file_download</md-icon>
<p translate>Import Account</p>
</md-list-item>
<md-list-item ng-controller="AddressbookController as ab">
<md-button class="md-button" ng-click="ab.addAddressbookContact()">
<md-icon md-font-library="material-icons">library_add</md-icon>
<translate>Add Contact</translate>
</md-button>
<md-list-item aria-label="Create Account" ng-click="ul.createAccount()">
<md-icon>account_box</md-icon>
<p translate>Create Account</p>
</md-list-item>
<md-list-item>
<md-button aria-label="Manage Networks" ng-click="ul.manageNetworks()">
<md-icon>network_check</md-icon>
<translate>Manage Networks</translate>
</md-button>
<md-list-item aria-label="Add Contact" ng-controller="AddressbookController as ab" ng-click="ab.addAddressbookContact()">
<md-icon md-font-library="material-icons">library_add</md-icon>
<p translate>Add Contact</p>
</md-list-item>
<md-list-item>
<md-button aria-label="Appearance" ng-click="ul.manageBackgrounds()">
<md-icon>landscape</md-icon>
<translate>Appearance</translate>
</md-button>
<md-list-item aria-label="Manage Networks" ng-click="ul.manageNetworks()">
<md-icon>network_check</md-icon>
<p translate>Manage Networks</p>
</md-list-item>
<md-list-item>
<md-switch ng-model="ul.playFundsReceivedSong" class="md-primary" md-no-ink arial-label="Play song when receive funds?" ng-change="ul.togglePlayFundsReceivedSong()" ng-init="ul.togglePlayFundsReceivedSong()"><translate>Play song when receive funds?</translate></md-switch>
<md-list-item aria-label="Appearance" ng-click="ul.manageBackgrounds()">
<md-icon>landscape</md-icon>
<p translate>Appearance</p>
</md-list-item>
<md-list>
</md-list>
</md-menu-content>
</md-menu>
</any>
Expand Down
16 changes: 8 additions & 8 deletions client/app/src/accounts/account.controller.js
View file
Open in desktop
Expand Up @@ -161,8 +161,8 @@
self.exportAccount = exportAccount;
self.copiedToClipboard = copiedToClipboard;

self.playFundsReceivedSong = storageService.get("playFundsReceivedSong") || false;
self.togglePlayFundsReceivedSong = togglePlayFundsReceivedSong;
self.playFundsReceivedSound = storageService.get("playFundsReceivedSound") || false;
self.togglePlayFundsReceivedSound = togglePlayFundsReceivedSound;
self.manageBackgrounds = manageBackgrounds;
self.manageNetworks = manageNetworks;
self.openPassphrasesDialog = openPassphrasesDialog;
Expand Down Expand Up @@ -765,8 +765,8 @@
var previousTx = self.selected.transactions;
self.selected.transactions = transactions;

var playSong = storageService.get('playFundsReceivedSong');
if (playSong == true && transactions.length > previousTx.length && transactions[0].type == 0 && transactions[0].recipientId == myaccount.address) {
var playSound = storageService.get('playFundsReceivedSound');
if (playSound == true && transactions.length > previousTx.length && transactions[0].type == 0 && transactions[0].recipientId == myaccount.address) {
var wavFile = require('path').resolve(__dirname, 'assets/audio/power-up.wav');
var audio = new Audio(wavFile);
audio.play();
Expand Down Expand Up @@ -798,8 +798,8 @@
}
}

function togglePlayFundsReceivedSong(status) {
storageService.set('playFundsReceivedSong', self.playFundsReceivedSong, true);
function togglePlayFundsReceivedSound(status) {
storageService.set('playFundsReceivedSound', self.playFundsReceivedSound, true);
}

/**
Expand Down Expand Up @@ -847,8 +847,8 @@
var previousTx = self.selected.transactions;
self.selected.transactions = transactions;

var playSong = storageService.get('playFundsReceivedSong');
if (playSong == true && transactions.length > previousTx.length && transactions[0].type == 0 && transactions[0].recipientId == myaccount.address) {
var playSound = storageService.get('playFundsReceivedSound');
if (playSound == true && transactions.length > previousTx.length && transactions[0].type == 0 && transactions[0].recipientId == myaccount.address) {
var wavFile = require('path').resolve(__dirname, 'assets/audio/power-up.wav');
var audio = new Audio(wavFile);
audio.play();
Expand Down