Skip to content

Commit

Permalink
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#wrapper
aw-header

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.aw-container.my-3.p-3
error-boundary
user-satisfaction-poll
new-release-notification(v-if="isNewReleaseCheckEnabled")
router-view

div.container(style="color: #555")
div(style="float: left")
div.mb-1
| Made with by the #[a(href="http://activitywatch.net/contributors/") ActivityWatch developers]
div.container(style="color: #555; font-size: 0.9em")
div.mb-2
// The heart emoji is red by default on most platforms, but not on all
| Made with #[span(style="color: red")] by the #[a(href="http://activitywatch.net/contributors/") ActivityWatch developers]
div
a.mr-2(href="https://github.com/ActivityWatch/activitywatch", target="_blank")
icon(name="brands/github")
| GitHub
span.mt-2(v-show="info", style="color: #888; font-size: 0.8em")
span.mr-2
b Host:
|   {{info.hostname}}
span
b Version:
|   {{info.version}}

div(style="font-size: 0.9em; opacity: 0.8")
div.float-none.float-md-right.my-2
a(href="https://github.com/ActivityWatch/activitywatch/issues/new/choose", target="_blank").mr-3
icon(name="bug")
| Report a bug
a(href="https://forum.activitywatch.net/c/support", target="_blank").mr-3
icon(name="question-circle")
| Ask for help
a(href="https://forum.activitywatch.net/c/features", target="_blank")
icon(name="vote-yea")
| Vote on features
div.float-none.float-md-left.my-2
a(href="https://twitter.com/ActivityWatchIt", target="_blank")
icon(name="brands/twitter")
| Twitter

div(style="float: right; text-align: right;")
| Found a bug? #[a(href="https://github.com/ActivityWatch/activitywatch/issues/new/choose") File an issue]
br
| Need help? #[a(href="https://forum.activitywatch.net/c/support") Ask on the forum]
br
| Missing a feature? #[a(href="https://forum.activitywatch.net/c/features") Vote on the forum]
br
| Built something cool? #[a(href="https://forum.activitywatch.net/c/projects") Share it on the forum]
br
span.mt-2(v-show="info", style="color: #888; font-size: 0.8em")
| Host: {{info.hostname}}
br
| Version: {{info.version}}
a(href="https://github.com/ActivityWatch", target="_blank").ml-3
icon(name="brands/github")
| GitHub
a(href="https://activitywatch.net/donate/", target="_blank").ml-3
icon(name="hand-holding-heart")
| Donate
</template>

<script>
// 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 {
</script>

<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";

body,
html,
body,
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")
div
label Filter AFK
label Exclude time away from computer
input(type="checkbox" v-model="filter_afk")
//div.form-row
div.form-group.col-md-6
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",
variant="outline-dark")
icon(name="arrow-left")
b-select.px-2(:value="periodLength", :options="['day', 'week', 'month']",
b-select.pl-2.pr-3(:value="periodLength", :options="['day', 'week', 'month']",
@change="(periodLength) => setDate(_date, periodLength)")
b-input-group-append
b-button.px-2(:to="link_prefix + '/' + nextPeriod() + '/' + subview",
Expand All @@ -34,9 +34,9 @@ div
span.d-none.d-md-inline
| Refresh

aw-periodusage(:periodusage_arr="periodusage", @update="setDate")
aw-periodusage.mt-2(:periodusage_arr="periodusage", @update="setDate")

ul.row.nav.nav-tabs.mt-3.px-3
ul.row.nav.nav-tabs.mt-4
li.nav-item(v-for="view in views")
router-link.nav-link(:to="{ name: 'activity-view', params: {...$route.params, view_id: view.id}}" :class="{'router-link-exact-active': currentView.id == view.id}")
h6 {{view.name}}
Expand All @@ -63,48 +63,59 @@ div
h5 Options

div.row
div.col-lg-6
b-form-checkbox(v-model="filterAFK")
| Filter AFK
b-form-checkbox(v-model="includeAudible")
div.col-md-6
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.")

div.col-lg-6
b-form-group(label="Show/filter category" label-cols="5" label-cols-lg="4")
b-form-select(v-model="filterCategory", :options="categories")
div.col-md-6.mt-2.mt-md-0
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")

aw-devonly
b-btn(id="load-demo", @click="load_demo")
| Load demo data
</template>

<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
</template>

<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;
}
</style>
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: https://github.com/David-Desmaisons/Vue.D3.sunburst/issues/11
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

@github-actions
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.