About done

This commit is contained in:
Valentin Ivanov 2018-04-24 16:04:39 -04:00 committed by Juha Ristolainen
parent ac74701866
commit ed2b511762
4 changed files with 47 additions and 10 deletions

View File

@ -20,6 +20,26 @@
height: 7rem;
}
.circle-progress .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #ddca7e;
color: black;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.circle-progress:hover .tooltiptext {
visibility: visible;
}
svg {
position: absolute;
top: 0;
@ -107,7 +127,7 @@ img {
-webkit-transition: width .6s ease;
-o-transition: width .6s ease;
transition: width .6s ease;
}
}
.progress-bar-success {
background-color: #318245;

View File

@ -5,18 +5,33 @@
<%= profile.new_xp %>)</sup>
<% } %>
</h3>
<div class="progress">
<div class="progress-bar progress-bar-success" style='width:${profile.progress}%;'>
<span class="sr-only">Level progress ${profile.progress - profile.new_progress}%.</span>
</div>
<div class="progress-bar progress-bar-striped progress-bar-warning" style='width:${profile.new_progress}%;'>
<span class="sr-only">Recent level progress ${profile.new_progress}%.</span>
</div>
</div>
<div style="clear: both;">
<% for( let l in languages) { %>
<div class="circle-progress">
<div class="language">
<%= languages[l].name %>
<span>
<%= languages[l].xp %>
<%= languages[l].level %>
</span>
</div>
<span class="tooltiptext">
Total XP: <strong><%=languages[l].xp %></strong> <br/>
New XP: <%=languages[l].new_xp%>
</span>
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="45" stroke="#424242" stroke-width="5"></circle>
<circle cx="50" cy="50" r="45" stroke="#318245" stroke-width="5" stroke-dasharray="282.6" stroke-dashoffset="70.65"></circle>
<circle cx="50" cy="50" r="45" stroke="#ddca7e" stroke-width="5" stroke-dasharray="282.6" stroke-dashoffset='${ ((100-languages[l].progress) * 282.6 / 100) }'></circle>
<circle cx="50" cy="50" r="45" stroke="#318245" stroke-width="5" stroke-dasharray="282.6" stroke-dashoffset='${ ((100-languages[l].progress + languages[l].new_progress) * 282.6 / 100) }'></circle>
</svg>
</div>
<% } %>
@ -37,7 +52,7 @@
<div class="progress">
<div class="progress-bar progress-bar-success" style='width:${machines[m].progress}%;'>
<span class="sr-only">Level progress ${machines[m].progress}%.</span>
<span class="sr-only">Level progress ${machines[m].progress - machines[m].new_progress}%.</span>
</div>
<div class="progress-bar progress-bar-striped progress-bar-warning" style='width:${machines[m].new_progress}%;'>
<span class="sr-only">Recent level progress ${machines[m].new_progress}%.</span>

View File

@ -13,7 +13,7 @@ import { CodeStatsAPI } from "./code-stats-api";
import template = require('lodash.template');
export class ProfileHtmlProvider implements TextDocumentContentProvider {
export class ProfileProvider implements TextDocumentContentProvider {
onDidChange?: Event<Uri>;
api: CodeStatsAPI;
@ -41,7 +41,7 @@ export class ProfileHtmlProvider implements TextDocumentContentProvider {
let curLevelXp = getNextLevelXp(level - 1);
let nextLevelXp = getNextLevelXp(level);
let haveXp = (xp-new_xp) - curLevelXp;
let haveXp = xp - curLevelXp;
let needXp = nextLevelXp - curLevelXp;
@ -79,6 +79,10 @@ export class ProfileHtmlProvider implements TextDocumentContentProvider {
profile["style"] = this.context.asAbsolutePath("assets/profile.css");
profile["level"] = getLevel(profile["total_xp"]);
let percents = getLevelProgress(profile["total_xp"], profile["new_xp"]);
profile["progress"] = percents[0];
profile["new_progress"] = percents[1];
let langs = getSortedArray(profile, "languages");

View File

@ -6,8 +6,6 @@ import {
Uri,
ViewColumn,
commands,
Event,
CancellationToken,
StatusBarItem,
TextDocument,
StatusBarAlignment,
@ -18,7 +16,7 @@ import {
} from "vscode";
import { Pulse } from "./pulse";
import { CodeStatsAPI } from "./code-stats-api";
import { ProfileHtmlProvider } from "./profileHtmlProvider";
import { ProfileProvider } from "./profile-provider";
export class XpCounter {
private combinedDisposable: Disposable;
@ -53,7 +51,7 @@ export class XpCounter {
this.statusBarItem.command = "code-stats.profile";
}
let provider = new ProfileHtmlProvider(context, this.api);
let provider = new ProfileProvider(context, this.api);
let registration = workspace.registerTextDocumentContentProvider('code-stats', provider);