Skip to content


Merge pull request #291 from ActivityWatch/style-updates
Browse files Browse the repository at this point in the history
  • Loading branch information
ErikBjare committed Jun 10, 2021
2 parents 2003b52 + 651762a commit 4d8e5ee
Show file tree
Hide file tree
Showing 10 changed files with 102 additions and 69 deletions.
57 changes: 35 additions & 22 deletions src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,44 +2,57 @@

div(:class="{'container': !fullContainer, 'container-fluid': fullContainer}").px-0.px-md-3
div(:class="{'container': !fullContainer, 'container-fluid': fullContainer}").px-0.px-md-2

div.container(style="color: #555")
div(style="float: left")
| Made with by the #[a(href="") ActivityWatch developers]
div.container(style="color: #555; font-size: 0.9em")
// The heart emoji is red by default on most platforms, but not on all
| Made with #[span(style="color: red")] by the #[a(href="") ActivityWatch developers]
div"", target="_blank")
| GitHub"info", style="color: #888; font-size: 0.8em")
b Host:
|   {{info.hostname}}
b Version:
|   {{info.version}}

div(style="font-size: 0.9em; opacity: 0.8")
a(href="", target="_blank").mr-3
| Report a bug
a(href="", target="_blank").mr-3
| Ask for help
a(href="", target="_blank")
| Vote on features
a(href="", target="_blank")
| Twitter

div(style="float: right; text-align: right;")
| Found a bug? #[a(href="") File an issue]
| Need help? #[a(href="") Ask on the forum]
| Missing a feature? #[a(href="") Vote on the forum]
| Built something cool? #[a(href="") Share it on the forum]
br"info", style="color: #888; font-size: 0.8em")
| Host: {{info.hostname}}
| Version: {{info.version}}
a(href="", target="_blank").ml-3
| GitHub
a(href="", target="_blank").ml-3
| Donate

// only import the icons you use to reduce bundle size
import 'vue-awesome/icons/brands/twitter';
import 'vue-awesome/icons/brands/github';
import 'vue-awesome/icons/hand-holding-heart';
import 'vue-awesome/icons/vote-yea';
import 'vue-awesome/icons/question-circle';
import 'vue-awesome/icons/bug';
export default {
data: function () {
Expand Down
6 changes: 4 additions & 2 deletions src/components/Header.vue
Original file line number Diff line number Diff line change
Expand Up @@ -141,9 +141,11 @@ export default {

<style lang="scss" scoped>
@import '../style/globals';
.aw-navbar {
background-color: #fff;
border: solid #ccc;
background-color: white;
border: solid $lightBorderColor;
border-width: 0 0 1px 0;
Expand Down
5 changes: 0 additions & 5 deletions src/style/_container.scss

This file was deleted.

5 changes: 5 additions & 0 deletions src/style/_globals.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
$textColor: rgb(60, 66, 87);
$backgroundColor: rgb(247, 250, 252);

$lightBorderColor: darken(white, 12%);
$activeHighlightColor: rgb(10, 120, 255);
4 changes: 0 additions & 4 deletions src/style/_globalvars.scss

This file was deleted.

24 changes: 17 additions & 7 deletions src/style/style.scss
Original file line number Diff line number Diff line change
@@ -1,17 +1,21 @@
@import 'globalvars';
@import 'container';

$textcolor: #000;
@import "globals";

button {
color: $textcolor;
font-family: 'Varela Round', sans-serif !important;
color: $textColor;
font-family: -apple-system , BlinkMacSystemFont , "Segoe UI" , "Roboto" , "Helvetica Neue" , "Ubuntu" , sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;

h1, h2, h3, h4, h5, h6, nav {
font-family: 'Varela Round', sans-serif;

body {
background-color: #eee;
background-color: $backgroundColor;

// To make icons a little less crowded
Expand All @@ -21,3 +25,9 @@ body {
margin-right: 4px;
vertical-align: middle;

.aw-container {
background-color: #fff;
border: 1px solid $lightBorderColor;
border-radius: 5px;
2 changes: 1 addition & 1 deletion src/views/Search.vue
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ div
label Use regex
input(type="checkbox" v-model="use_regex")
label Filter AFK
label Exclude time away from computer
input(type="checkbox" v-model="filter_afk")
Expand Down
60 changes: 36 additions & 24 deletions src/views/activity/Activity.vue
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ div
b-button.px-2(:to="link_prefix + '/' + previousPeriod() + '/' + subview",
b-select.px-2(:value="periodLength", :options="['day', 'week', 'month']","periodLength", :options="['day', 'week', 'month']",
@change="(periodLength) => setDate(_date, periodLength)")
b-button.px-2(:to="link_prefix + '/' + nextPeriod() + '/' + subview",
Expand All @@ -34,9 +34,9 @@ div
| Refresh

aw-periodusage(:periodusage_arr="periodusage", @update="setDate")"periodusage", @update="setDate")
li.nav-item(v-for="view in views")
router-link.nav-link(:to="{ name: 'activity-view', params: {...$route.params, view_id:}}" :class="{'router-link-exact-active': ==}")
h6 {{}}
Expand All @@ -63,48 +63,59 @@ div
h5 Options

| Filter AFK
b-form-checkbox(v-model="filterAFK" size="sm")
| Exclude AFK time
icon#filterAFKHelp(name="question-circle" style="opacity: 0.4")
b-tooltip(target="filterAFKHelp" v-b-tooltip.hover title="Filter away time where the AFK watcher didn't detect any input.")
b-form-checkbox(v-model="includeAudible" :disabled="!filterAFK" size="sm")
| Count audible browser tab as active
icon#includeAudibleHelp(name="question-circle" style="opacity: 0.4")
b-tooltip(target="includeAudibleHelp" v-b-tooltip.hover title="If the active window is an audible browser tab, count as active. Requires a browser watcher.")

b-form-group(label="Show/filter category" label-cols="5" label-cols-lg="4")
b-form-select(v-model="filterCategory", :options="categories")
b-form-group(label="Show category" label-cols="5" label-cols-lg="4" style="font-size: 0.88em")
b-form-select(v-model="filterCategory", :options="categories" size="sm")

b-btn(id="load-demo", @click="load_demo")
| Load demo data

<style lang="scss" scoped>
$buttoncolor: #ddd;
$bordercolor: #ddd;
@import '../../style/globals';
.nav {
border-bottom: 2px solid $bordercolor;
border-bottom: 1px solid $lightBorderColor;
.nav-item {
margin-bottom: -2px;
margin-bottom: 0px;
&:first-child {
margin-left: 0;
.nav-link {
background-color: $buttoncolor;
margin: 0 0.2em 0 0.2em;
padding: 0.4em 0.5em 0.1em 0.5em;
border: 2px solid $bordercolor;
border-bottom: none;
border-radius: 0.5rem 0.5rem 0 0;
color: #111 !important;
// default bootstrap vertical padding was too high
padding: 0.25rem 1rem;
color: lighten(black, 40%);
cursor: pointer;
border: none;
&:hover {
background-color: #f8f8f8;
color: black !important;
border-bottom: 3px solid lighten(black, 70%);
border-radius: 0;
&.router-link-exact-active {
background-color: #fff;
color: #333 !important;
color: $activeHighlightColor !important;
border-bottom: 3px solid lighten($activeHighlightColor, 15%);
border-radius: 0;
// Does nothing for Verala Round
font-weight: bold;
&:hover {
background-color: #fff;
Expand All @@ -127,6 +138,7 @@ import 'vue-awesome/icons/plus';
import 'vue-awesome/icons/edit';
import 'vue-awesome/icons/times';
import 'vue-awesome/icons/save';
import 'vue-awesome/icons/question-circle';
export default {
name: 'Activity',
Expand Down
6 changes: 3 additions & 3 deletions src/visualizations/PeriodUsage.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@ svg

<style scoped lang="scss">
@import '../style/globals';
svg {
width: 100%;
height: 40pt;
border: 1px solid #999;
margin-top: 0.2em;
margin-bottom: 0.2em;
border: 1px solid $lightBorderColor;
border-radius: 0.5em;
Expand Down
2 changes: 1 addition & 1 deletion src/visualizations/SunburstCategories.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
// We want to use another colorscheme than the default 'schemeAccent',
// unfortunately it seems like the color-scheme prop is broken.
// See this issue:
sunburst(:data="data", :colorScale="colorfunc", :getCategoryForColor="categoryForColor", :colorScheme="null" showLabels="true")
sunburst(:data="data", :colorScale="colorfunc", :getCategoryForColor="categoryForColor", :colorScheme="null" :showLabels="true")
// Add behaviors
template(slot-scope="{ on, actions }")
highlightOnHover(v-bind="{ on, actions }")
Expand Down

1 comment on commit 4d8e5ee

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here are screenshots of this commit:

Screenshots using aw-server v0.10.0 (click to expand)

Screenshots using aw-server-rust master (click to expand)

Screenshots using aw-server-rust v0.10.0 (click to expand)

CML watermark

Please sign in to comment.