From 5c554605e8058a4430657f0988fb4a78b5076e6c Mon Sep 17 00:00:00 2001
From: Alex ORLUC <alex.orluc@maarch.org>
Date: Wed, 16 Oct 2019 11:24:58 +0200
Subject: [PATCH] FEAT #12062 TIME 0:15 change tool button in edit mode
---
.../app/overlay/overlay.component.html | 8 +--
src/frontend/core/styles.scss | 51 ++++++++++++++++++-
2 files changed, 54 insertions(+), 5 deletions(-)
diff --git a/src/frontend/app/overlay/overlay.component.html b/src/frontend/app/overlay/overlay.component.html
index 7eb516f2b8..486fe085d7 100644
--- a/src/frontend/app/overlay/overlay.component.html
+++ b/src/frontend/app/overlay/overlay.component.html
@@ -1,10 +1,10 @@
<div>
- <span style="z-index:1;position: absolute;left:0;bottom: 10px;top: 10px;font-size: 25px;height:50px;">
- <button class="btn blue" (tap)="this.appDocumentNotePad.cancelAnnotation();"><i
+ <span style="z-index:1;position: absolute;left:20px;bottom: 20px;font-size: 25px;height:50px;">
+ <button class="btn-filled blue" (tap)="this.appDocumentNotePad.cancelAnnotation();"><i
class="fas fa-arrow-left fa-2x"></i>{{'lang.cancelAnnotation' | translate}}</button>
</span>
- <span style="z-index:1;position: absolute;bottom: 5px;left: 50%;transform: translateX(-50%);font-size: 25px;">
- <button class="btn green" (tap)="this.appDocumentNotePad.validateAnnotation();"><i
+ <span style="z-index:1;position: absolute;bottom: 20px;right: 20px;font-size: 25px;">
+ <button class="btn-filled green" (tap)="this.appDocumentNotePad.validateAnnotation();"><i
class="fas fa-check-circle fa-2x"></i>{{'lang.validateAnnotation' | translate}}</button>
</span>
</div>
diff --git a/src/frontend/core/styles.scss b/src/frontend/core/styles.scss
index 2ce5e73eec..7a6921d1b9 100644
--- a/src/frontend/core/styles.scss
+++ b/src/frontend/core/styles.scss
@@ -50,6 +50,56 @@ button:disabled {
display: flex;
align-items: center;
}
+.btn-filled {
+ height: 50px;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ font-size: 14px;
+ font-weight: bold;
+ border: 1px solid black;
+ color: white;
+ background-color: #fff;
+ padding: 0 25px;
+ border-radius: 25px !important;
+ cursor: pointer;
+ outline: none;
+ box-shadow: 10px 10px 17px -10px rgba(0,0,0,0.75);
+ transition: all 0.2;
+ &:active {
+ transition: all 0.2;
+ box-shadow: none;
+ }
+ &.btn-xs {
+ height: 35px;
+ }
+ &.green {
+ background-color: $accent;
+ border: 1px solid $accent;
+ }
+ &.red {
+ background-color: $warn;
+ border: 1px solid $warn;
+ }
+ &.blue {
+ background-color: $primary;
+ border: 1px solid $primary;
+ &.active {
+ color: #fff;
+ background: $primary;
+ }
+ }
+ &:disabled {
+ opacity: 0.5;
+ color: #000;
+ border: 1px solid #000;
+ cursor: not-allowed;
+ }
+ .fas, i, .material-icons {
+ margin: 0 5px;
+ }
+}
+
.btn {
height: 50px;
display: flex;
@@ -76,7 +126,6 @@ button:disabled {
}
&.blue {
color: $primary;
- background: #fff;
border: 1px solid $primary;
&.active {
color: #fff;
--
GitLab