apairon/mocoapp-browser-extension
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

qw/timer (#23)

Browse Source 
* Rename logo and add 32x32 version

* Set timer icon if a timer is running

* Do not query activities on initialization

* Show timer in bubble if timed activity exists

* Pass timed activity to App

* Code cleanup

* Show timer view and stop timer

* Make hours optional

* Use booked seconds instead of hours

* Add type submit to form button

* Define colors as sass variables⎄

* Style timer view

* Show start timer submit label

* Update view layouts and content

* Update version and changelog

* Dyanically set iframe height

* Reduce h1 font size

* Add svg webpack loader

* Parse empty string (TimeInputParser)

* Forward ref in Popup component

* Start time on current day only, format buttons

* Improve styling

* Set standard height as iframe default height, validate form

* Upgrade packages to supress react warning

* Show activity form in popup after timer was stoped

* Use stop-watch icon in timer view

* Fix empty description

* Close TimerView if timer stopped for current service

* Style timerview

* Improve timer view styling

* qw/setting-time-tracking-hh-mm (#24)

* Format duration depending on settingTimeTrackingHHMM

* Fix formatDuation without second argument

* Fix time format after updating bubble

* Add tests for formatDuration
This commit is contained in:
Manuel Bouza
2019-10-10 14:57:01 +02:00
committed by GitHub
parent 7023b4b482
commit 72626a6c42
38 changed files with 788 additions and 437 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/css/_button.scss
View File

@@ -7,17 +7,21 @@ button.moco-bx-btn {
white-space: nowrap;
color: white;
background-image: none;
background-color: #7dc332;
border-color: #7dc332;
background-color: $green;
border-color: $green;
border-radius: 0;
border-style: solid;
box-shadow: none;
font-size: 100%;
cursor: pointer;
&:focus {
outline: none;
}
&:hover:not(:disabled) {
background-color: #639a28;
border-color: #639a28;
background-color: $green-dark;
border-color: $green-dark;
}
&:disabled {

20
src/css/_form.scss
View File

@@ -1,3 +1,4 @@
@import "variables";
@import "button";
input {
@@ -15,7 +16,8 @@ input {
margin-bottom: 0.25rem;
}
input, textarea {
input,
textarea {
padding: 6px 12px;
background-color: white;
border-color: #cccccc;
@@ -31,13 +33,14 @@ input {
}
&.has-error {
input, textarea {
border-color: #FB3A2F;
input,
textarea {
border-color: $red;
}
}
.form-error {
color: #FB3A2F;
color: $red;
}
.input-group {
@@ -71,8 +74,8 @@ input[name="hours"] {
outline: 0 !important;
&:focus {
border: 1px solid #38b5eb;
box-shadow: 0 0 0 1px #38b5eb;
border: 1px solid $blue;
box-shadow: 0 0 0 1px $blue;
}
}
@@ -84,8 +87,7 @@ textarea[name="description"] {
outline: 0 !important;
&:focus {
border: 1px solid #38b5eb;
box-shadow: 0 0 0 1px #38b5eb;
border: 1px solid $blue;
box-shadow: 0 0 0 1px $blue;
}
}

7
src/css/_variables.scss
View File

@@ -1,5 +1,10 @@
$font-family: Arial, sans-serif;
$font-family: Roboto, Arial, sans-serif;
$font-color: #191919;
$popup-width: 420px;
$popup-height: 463px;
$green: #7dc332;
$green-dark: #639a28;
$blue: #38b5eb;
$red: #fb3a2f;
$gray-base: #a3a3a3;

4
src/css/content.scss
View File

@@ -6,6 +6,10 @@
color: $font-color;
pointer-events: all;
.text-red {
color: $red;
}
.moco-bx-bubble {
box-sizing: content-box;
position: fixed;

4
src/css/options.scss
View File

@@ -32,11 +32,11 @@
}
.text-success {
color: #7DC332;
color: $green;
}
.text-danger {
color: #FB3A2F;
color: $red;
}
}
}

98
src/css/popup.scss
View File

@@ -1,6 +1,6 @@
@import "variables";
@import "form";
@import "spinner";
@import "variables";
html {
overflow: hidden;
@@ -14,33 +14,48 @@ html {
#moco-bx-root {
min-width: 516px;
h1 {
font-size: 24px;
font-weight: normal;
line-height: 1.5;
margin-top: 1rem;
margin-bottom: 3rem;
}
h2 {
font-size: 20px;
font-weight: normal;
line-height: 1.5;
margin-top: 1rem;
margin-bottom: 3rem;
}
.text-red {
color: $red;
}
.text-secondary {
color: $gray-base;
}
.moco-bx-app-container {
width: 324px;
padding: 3rem 6rem;
.moco-bx-logo__container {
display: flex;
justify-content: center;
margin-bottom: 3rem;
text-align: center;
img.moco-bx-logo {
flex: 0 0 48px;
width: 48px;
height: 48px;
}
h1 {
line-height: 48px;
margin: 0;
}
}
.moco-bx-calendar {
display: flex;
justify-content: space-between;
margin-bottom: 3rem;
margin-bottom: 2rem;
.moco-bx-calendar__day {
display: flex;
@@ -66,12 +81,11 @@ html {
flex: 0 0 42px;
color: white;
background-color: #eee;
}
&.moco-bx-calendar__day--filled {
.moco-bx-calendar__hours {
background-color: #7dc332;
background-color: $green;
}
}
@@ -84,43 +98,73 @@ html {
&.moco-bx-calendar__day--active {
.moco-bx-calendar__hours {
background-color: #38b5eb;
background-color: $blue;
}
}
}
}
.moco-bx-timer-view {
text-align: center;
margin-top: 3rem;
h2 {
margin-top: 2rem;
max-height: 90px;
overflow: hidden;
}
p {
margin-top: 1rem;
margin-bottom: 1rem;
line-height: 1.2rem;
}
span.moco-bx-single-line {
display: inline-block;
max-height: 19px;
overflow: hidden;
}
.timer {
margin-top: 2rem;
}
.btn-stop-timer {
margin-top: 1.5rem;
background-color: $red;
border: none;
border-radius: 50%;
width: 60px;
height: 60px;
}
}
}
.moco-bx-error-container {
font-size: 18px;
line-height: 1.5;
width: 420px;
padding: 3rem;
text-align: center;
h1 {
font-size: 35px;
font-weight: normal;
margin-top: 0;
line-height: 1.3;
}
img {
width: auto;
max-width: 100%;
margin-top: 1.5rem;
margin-bottom: 2rem;
&.moco-bx-logo {
width: 48px;
margin-bottom: 2rem;
}
}
ol {
text-align: left;
&.firefox-addons {
margin-top: 0;
width: auto;
}
}
button {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
}
}