lukechilds
/
EasyDEX-GUI
mirror of https://github.com/lukechilds/EasyDEX-GUI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

New EasyDEX-GUI dashboard base structure added

master
Satinder Grewal 8 years ago
parent
518b73c025
commit
7c974f4c81
5 changed files with 306 additions and 24 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 195
      assets/css/dashboard-wallet-widgets.css
  2. 2
      assets/css/site.min.css
  3. 60
      assets/scripts/dashboard.js
  4. 26
      assets/scripts/sidebar.js
  5. 47
      index.html

195
assets/css/dashboard-wallet-widgets.css
View File

@ -0,0 +1,195 @@
.wallet-widgets #map {
height: 100%;
}
.wallet-widgets #map .marker-active .in-map-markers .wallet-widgets-icon {
border-color: #5c6bc0;
}
.wallet-widgets #map .marker-active .in-map-markers .wallet-widgets-icon::before {
border-color: #5c6bc0 transparent transparent;
}
.wallet-widgets #map .in-map-markers {
display: inline-block;
}
.wallet-widgets #map .in-map-markers .wallet-widgets-icon {
position: relative;
display: inline-block;
border: 3px solid #3f51b5;
border-radius: 50%;
-webkit-transition: .4s ease-in-out all;
-o-transition: .4s ease-in-out all;
transition: .4s ease-in-out all;
}
.wallet-widgets #map .in-map-markers .wallet-widgets-icon img {
width: 62px;
border-radius: 50%;
}
.wallet-widgets #map .in-map-markers .wallet-widgets-icon::before {
position: absolute;
top: 58px;
left: 10px;
z-index: -1;
width: 0;
height: 0;
content: "";
border-color: #3f51b5 transparent transparent;
border-style: solid;
border-width: 17px 21px 0;
-webkit-transition: .4s ease-in-out all;
-o-transition: .4s ease-in-out all;
transition: .4s ease-in-out all;
}
.wallet-widgets #map .in-map-markers .wallet-widgets-icon:hover {
border-color: #5c6bc0;
}
.wallet-widgets #map .in-map-markers .wallet-widgets-icon:hover::before {
border-color: #5c6bc0 transparent transparent;
}
.page-aside {
width: 450px;
background-color: #f3f7f9;
}
.page-aside + .page-main {
height: 100%;
margin-left: 450px !important;
}
.page-aside-inner {
height: 100%;
overflow: hidden;
}
.page-aside-inner .search-wallet-widgets {
margin-bottom: 15px;
border-radius: 0;
}
.page-aside-inner .wallet-widgets-list {
height: 100%;
height: -webkit-calc(100% - 72px);
height: calc(100% - 72px);
}
.page-aside-inner .wallet-widgets-list-body {
height: 100%;
}
.list-group {
padding-right: 15px;
margin: 0;
}
.list-group .col-xxl-6.col-lg-12.friend-info {
padding: 0;
padding-left: 15px;
}
.list-group .avatar {
width: 62px;
}
.list-group .card {
margin-bottom: 15px;
}
.list-group .card-block {
-webkit-transition: border .2s linear, color .2s linear, width .2s linear, background-color .2s linear;
-o-transition: border .2s linear, color .2s linear, width .2s linear, background-color .2s linear;
transition: border .2s linear, color .2s linear, width .2s linear, background-color .2s linear;
}
.list-group .card-block:hover {
cursor: pointer;
background-color: #eee;
}
.list-group .list-group-item,
.list-group .list-group-item:hover {
background-color: transparent;
}
.list-inline {
height: 25px;
}
.list-inline li a:hover {
color: #9e9e9e !important;
text-decoration: none;
}
.detail {
background-color: #5c6bc0 !important;
}
.leaflet-popup-pane:hover h3 {
color: #5c6bc0 !important;
}
.marker-cluster-small {
background-color: rgba(121, 134, 203, .6);
}
.marker-cluster-small > div {
background-color: rgba(63, 81, 181, .6);
}
.marker-cluster-small span {
color: #fff;
}
.marker-cluster-medium {
background-color: rgba(229, 115, 115, .6);
}
.marker-cluster-medium > div {
background-color: rgba(244, 67, 54, .6);
}
.marker-cluster-medium span {
color: #fff;
}
@media (max-width: 1199px) {
.page-aside + .page-main {
margin-left: 450px !important;
}
}
@media (max-width: 1599px) {
.page-aside {
width: 300px;
}
.page-aside .panel-title {
opacity: 0;
}
.page-aside .input-search {
width: 240px;
}
.page-aside + .page-main {
margin-left: 300px !important;
}
}
@media (max-width: 767px) {
.page-aside-inner {
overflow: hidden !important;
}
.page-aside {
width: 260px;
}
.page-aside + .page-main {
margin-left: 0 !important;
}
.page-aside.open {
width: 300px;
}
}

2
assets/css/site.min.css
View File

File diff suppressed because one or more lines are too long

60
assets/scripts/dashboard.js
View File

@ -44,9 +44,9 @@ var Dashboard = function() {
var modetip = '';
var modecolor = '';
if ( value == 'basilisk' ) { modecode = 'B'; modetip = 'Basilisk'; modecolor = 'info'; }
if ( value == 'full' ) { modecode = 'F'; modetip = 'Full'; modecolor = 'success'; }
if ( value == 'virtual' ) { modecode = 'V'; modetip = 'Virtual'; modecolor = 'danger'; }
if ( value == 'basilisk' ) { modecode = 'Basilisk'; modetip = 'Basilisk'; modecolor = 'info'; }
if ( value == 'full' ) { modecode = 'Full'; modetip = 'Full'; modecolor = 'success'; }
if ( value == 'virtual' ) { modecode = 'Virtual'; modetip = 'Virtual'; modecolor = 'danger'; }
if ( AllcoinsDataOutput[value][index] == 'BTC' ) { coinlogo = 'bitcoin'; coinname = 'Bitcoin'; }
if ( AllcoinsDataOutput[value][index] == 'BTCD' ) { coinlogo = 'bitcoindark'; coinname = 'BitcoinDark'; }
@ -69,7 +69,23 @@ var Dashboard = function() {
//console.log(AllcoinsDataOutput[value][index]);
walletDivContent += '<!-- Begin' + AllcoinsDataOutput[value][index] + 'wallet widget -->';
walletDivContent += '<!-- Wallet Widget '+AllcoinsDataOutput[value][index]+' -->';
walletDivContent += '<div class="list-group-item col-xlg-6 col-lg-12 wallet-widgets-info" data-wallet-widget-coin-code="'+AllcoinsDataOutput[value][index]+'">';
walletDivContent += '<div class="widget widget-shadow">';
walletDivContent += '<div class="widget-content text-center bg-white padding-20">';
//walletDivContent += '<a href="#" class="avatar margin-bottom-5">';
walletDivContent += '<a class="avatar margin-bottom-5" href="javascript:void(0)" data-wallet-widgets-coin-code="' + AllcoinsDataOutput[value][index] + '" data-wallet-widgets-coin-modecode="' + modecode + '" id="wallet-widgets-coin-logo">';
walletDivContent += '<img class="img-responsive" src="assets/images/cryptologo/' + coinlogo + '.png" alt="'+coinname+'"/>';
walletDivContent += '<span class="badge up badge-' + modecolor + '" id="basfull" data-wallet-widgets-coin-code="' + AllcoinsDataOutput[value][index] + '" data-toggle="tooltip" data-placement="top" data-original-title="' + modetip + '">' + modecode + '</span>';
walletDivContent += '</a>';
walletDivContent += '<div class="coin-name">'+coinname+'</div>';
walletDivContent += '<div class="coin-title margin-bottom-20 blue-grey-400"><span data-wallet-widget-coin-code="'+AllcoinsDataOutput[value][index]+'" id="wallet-widget-coin-balance">-</span> '+AllcoinsDataOutput[value][index]+'</div>';
walletDivContent += '</div>';
walletDivContent += '</div>';
walletDivContent += '</div>';
walletDivContent += '<!-- End Wallet Widget '+AllcoinsDataOutput[value][index]+' -->';
/*walletDivContent += '<!-- Begin' + AllcoinsDataOutput[value][index] + 'wallet widget -->';
walletDivContent += '<div class="col-md-6 col-xs-12 masonry-item">';
walletDivContent += '<div class="widget widget-shadow">';
walletDivContent += '<div class="widget-header wallet-widget-header padding-15 clearfix">';
@ -81,10 +97,12 @@ var Dashboard = function() {
walletDivContent += '</a>';
walletDivContent += '<div>';
walletDivContent += '<div class="font-size-20 hidden-xs" data-currency="' + AllcoinsDataOutput[value][index] + '" id="currency-name">' + coinname + '</div>';
walletDivContent += '<div class="form-material hidden-md hidden-xs">';
walletDivContent += '<div class="form-material hidden-md hidden-xs">';*/
/*walletDivContent += '<select class="form-control font-size-12" data-currency="' + AllcoinsDataOutput[value][index] + '" id="currency-addr" style="width: 235px;">';
walletDivContent += '</select>';*/
walletDivContent += '<div class="font-size-12" data-currency="' + AllcoinsDataOutput[value][index] + '" id="currency-addr"></div>';
/*walletDivContent += '<div class="font-size-12" data-currency="' + AllcoinsDataOutput[value][index] + '" id="currency-addr"></div>';
walletDivContent += '</div>';
walletDivContent += '<div class="font-size-12 hidden-xs"></div>';
walletDivContent += '</div>';
@ -96,14 +114,16 @@ var Dashboard = function() {
walletDivContent += '<div class="counter-icon"><i class="icon">' + AllcoinsDataOutput[value][index] + '</i></div>';
walletDivContent += '<span class="counter-number" data-currency="' + AllcoinsDataOutput[value][index] + '" id="currency-balance">0</span>';
walletDivContent += '</div>';
walletDivContent += '</div>';
walletDivContent += '</div>';*/
/*walletDivContent += '<div class="col-md-4 col-xs-6">';
walletDivContent += '<div class="counter" data-toggle="tooltip" data-placement="top" data-original-title="Unconfirmed">';
walletDivContent += '<div class="counter-icon"><i class="icon fa-spinner"></i></div>';
walletDivContent += '<span class="counter-number" data-currency="' + AllcoinsDataOutput[value][index] + '" id="currency-unconfirmed">0</span>';
walletDivContent += '</div>';
walletDivContent += '</div>';*/
walletDivContent += '<div class="col-md-6 hidden-xs hidden-sm">';
/*walletDivContent += '<div class="col-md-6 hidden-xs hidden-sm">';
walletDivContent += '<div class="counter" data-toggle="tooltip" data-placement="top" data-original-title="No. of Transactions">';
walletDivContent += '<div class="counter-icon"><i class="icon fa-book"></i></div>';
walletDivContent += '<span class="counter-number" data-currency="' + AllcoinsDataOutput[value][index] + '" id="currency-nooftransactions">0</span>';
@ -171,9 +191,10 @@ var Dashboard = function() {
walletDivContent += '</div>';
walletDivContent += '</div>';
walletDivContent += '</div>';
walletDivContent += '<!-- End' + AllcoinsDataOutput[value][index] + 'wallet widget -->';
walletDivContent += '<!-- End' + AllcoinsDataOutput[value][index] + 'wallet widget -->';*/
$('#wallet-widgets').html(walletDivContent);
$('.wallet-widgets-row').html(walletDivContent);
getCoinBalance(AllcoinsDataOutput[value][index]);
$('.scrollbar-dynamic').scrollbar(); //Make sure widget-body has scrollbar for transactions history
$('[data-toggle="tooltip"]').tooltip(); //Make sure tooltips are working for wallet widgets and anywhere else in wallet.
//console.log(walletDivContent);
@ -260,12 +281,19 @@ var Dashboard = function() {
//main function to initiate the module
init: function() {
/* set default map height */
var navbarH = $(".site-navbar").outerHeight();
var footerH = $(".site-footer").outerHeight();
var mapH = $(window).height() - navbarH - footerH;
$(".page-main").outerHeight(mapH);
if ( sessionStorage.getItem('IguanaActiveAccount') === null ) {
console.log('=> No wallet logged in. No need to run Dashboard JS.');
} else {
handleWalletWidgets();
handleWalletSendRec();
TotalFiatValue();
//handleWalletSendRec();
//TotalFiatValue();
}
/*setInterval(function() {
@ -278,7 +306,7 @@ var Dashboard = function() {
console.log('=> No wallet logged in. No need to get Rates.');
StopTotalFiatValue();
} else {
TotalFiatValue();
//TotalFiatValue();
//console.log('Get Rates (every 60 seconds)');
}
}, 60000);
@ -441,10 +469,6 @@ function ShowCoinHistory(getData) {
}
function getCoinBalance() {
}
function getCoinBalance(coin) {
//console.log(rmd160conv_data);
//return rmd160conv_data;
@ -461,7 +485,7 @@ function getCoinBalance(coin) {
var AjaxOutputData = JSON.parse(data);
console.log('== Data OutPut ==');
console.log(AjaxOutputData);
$('span[data-currency="' + coin + '"][id="currency-balance"]').text(AjaxOutputData.result);
$('span[data-wallet-widget-coin-code="' + coin + '"][id="wallet-widget-coin-balance"]').text(AjaxOutputData.result);
},
error: function(xhr, textStatus, error) {
console.log('failed getting Coin History.');

26
assets/scripts/sidebar.js
View File

@ -20,6 +20,7 @@ $(document).ready(function() {
removeKMDWalletStyle();
removeZECWalletStyle();
CommonSidebarActionsSet01();
applyDashboardStyle();
});
@ -43,6 +44,7 @@ $('#nav-dashboard').on('click', function() {
removeKMDWalletStyle();
removeZECWalletStyle();
CommonSidebarActionsSet01();
applyDashboardStyle();
});
$('#nav-easydex').on('click', function() {
@ -65,6 +67,7 @@ $('#nav-easydex').on('click', function() {
removeKMDWalletStyle();
removeZECWalletStyle();
CommonSidebarActionsSet02();
removeDashboardStyle();
});
$('#nav-komodo-wallet').on('click', function() {
@ -92,6 +95,7 @@ $('#nav-komodo-wallet').on('click', function() {
applyKMDWalletStyle();
//removeZECWalletStyle();
CommonSidebarActionsSet02();
removeDashboardStyle();
});
$('#nav-zcash-wallet').on('click', function() {
@ -125,6 +129,7 @@ $('#nav-zcash-wallet').on('click', function() {
applyZECWalletStyle();
//removeKMDWalletStyle();
CommonSidebarActionsSet02();
removeDashboardStyle();
NProgress.done();
});
@ -148,6 +153,7 @@ $('#nav-iguana-atomic-explorer').on('click', function() {
removeKMDWalletStyle();
removeZECWalletStyle();
CommonSidebarActionsSet02();
removeDashboardStyle();
});
$('#nav-iguana-wallet-settings').on('click', function() {
@ -171,6 +177,7 @@ $('#nav-iguana-wallet-settings').on('click', function() {
removeZECWalletStyle();
Settings_ShowWalletInfo(); //Execute this function from walletsettings.js file
CommonSidebarActionsSet02();
removeDashboardStyle();
});
$('#nav-about-iguana').on('click', function() {
@ -193,6 +200,7 @@ $('#nav-about-iguana').on('click', function() {
removeKMDWalletStyle();
removeZECWalletStyle();
CommonSidebarActionsSet02();
removeDashboardStyle();
});
@ -247,4 +255,22 @@ function removeZECWalletStyle() {
$('#easydex_kmd_wallet_actions_header').hide();
$('#easydex_zec_wallet_actions_header').hide();
$('#easydex_btc_btcd_balances_header').show();
}
function applyDashboardStyle() {
$('.page-aside').show();
$('.page-main').show();
/* set default map height */
var navbarH = $(".site-navbar").outerHeight();
var footerH = $(".site-footer").outerHeight();
var mapH = $(window).height() - navbarH - footerH;
$(".page-main").outerHeight(mapH);
$('#easydex-header-div').hide();
}
function removeDashboardStyle() {
$('.page-aside').hide();
$(".page-main").hide();
$('#easydex-header-div').show();
}

47
index.html
View File

@ -19,6 +19,7 @@
<link rel="stylesheet" href="assets/css/site.min.css">
<link rel="stylesheet" href="assets/css/progress-bars.css">
<link rel="stylesheet" href="assets/css/dashboard.css">
<link rel="stylesheet" href="assets/css/dashboard-wallet-widgets.css">
<!-- Plugins -->
<link rel="stylesheet" href="assets/global/vendor/animsition/animsition.min.css">
<link rel="stylesheet" href="assets/global/vendor/asscrollable/asScrollable.min.css">
@ -362,6 +363,42 @@
</div>
<!-- Page -->
<div class="page animsition">
<!-- Wallet Widgets Sidebar -->
<div class="page-aside">
<div class="page-aside-switch">
<i class="icon md-chevron-left" aria-hidden="true"></i>
<i class="icon md-chevron-right" aria-hidden="true"></i>
</div>
<div class="page-aside-inner">
<!-- Search Panel -->
<div class="search-wallet-widgets panel">
<div class="panel-heading">
<div class="panel-actions">
<div class="input-search input-group-sm">
<button type="submit" class="input-search-btn">
<i class="icon md-search" aria-hidden="true"></i>
</button>
<input type="text" class="form-control" name="" placeholder="Search...">
</div>
</div>
<h3 class="panel-title">Active Coins</h3>
</div>
</div>
<!-- End Search Panel -->
<!-- Wallet Widgets List -->
<div class="wallet-widgets-list" data-plugin="pageAsideScroll">
<div data-role="container">
<div data-role="content">
<div class="list-group row wallet-widgets-row">
</div>
</div>
</div>
</div>
<!-- End Wallet Widgets List -->
</div>
</div>
<!-- End Wallet Widgets Sidebar -->
<!-- BEGIN DASHBOARD CONTENT BODY -->
<!-- Example With Stats -->
@ -437,7 +474,7 @@
</div>
</div>-->
<!-- End page header -->
<div class="page-content" id="section-dashboard">
<div class="page-main" id="section-dashboard">
<div class="row" id="wallet-widgets" data-plugin="masonry">
</div>
@ -590,22 +627,22 @@
</select>
</div>
</div>
<div class="col-sm-2" style="text-align: center;">
<!--<div class="col-sm-2" style="text-align: center;">
<button type="button" class="btn btn-primary" data-toggle="modal" data-dismiss="modal" id="mdl_addcoin_done_btn" onclick="ExecuteAddCoinFn()">Add Coin</button>
</div>
</div>-->
</div>
</div>
</div>
</div>
<!-- End Modal -->
<button type="button" class="btn btn-info btn-lg btn-block waves-effect waves-light" data-target="#exampleGrid" data-toggle="modal">Add Coin</button>
<!--<button type="button" class="btn btn-info btn-lg btn-block waves-effect waves-light" data-target="#exampleGrid" data-toggle="modal">Add Coin</button>-->
</div>
<!-- START ADD COIN DIV -->
<!-- END DASHBOARD CONTENT BODY -->
<div class="progress-bar progress-bar-info progress-bar-striped active" aria-valuemin="0" aria-valuemax="100" style="width: 50%" aria-valuenow="60" role="progressbar"><span class="progress-label"></span></div>
<!--<div class="progress-bar progress-bar-info progress-bar-striped active" aria-valuemin="0" aria-valuemax="100" style="width: 50%" aria-valuenow="60" role="progressbar"><span class="progress-label"></span></div>-->
</div>
<!-- End Page -->

Write Preview
Loading…
Cancel
Save