From 219bc82a0a80b85c3bb82d252398f3e987e5239b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sven=20K=C3=A4stle?= <sven.kaestle@gmx.de>
Date: Sat, 23 Jun 2018 16:24:44 +0200
Subject: [PATCH] feat: New annotation card design
---
.../webapp/assets/css/annotationStyle.css | 101 +++++++++----
.../main/webapp/assets/js/annotationScript.js | 139 ++++++++++++++++--
.../webapp/pages/annotation_document.html | 2 +-
3 files changed, 201 insertions(+), 41 deletions(-)
diff --git a/gemeinsamforschen/src/main/webapp/assets/css/annotationStyle.css b/gemeinsamforschen/src/main/webapp/assets/css/annotationStyle.css
index dd768598..ae5c30ae 100644
--- a/gemeinsamforschen/src/main/webapp/assets/css/annotationStyle.css
+++ b/gemeinsamforschen/src/main/webapp/assets/css/annotationStyle.css
@@ -29,42 +29,91 @@ ol {
margin: 10px;
/* background-color: white; */
}
-.card {
+.spacing {
+ height: 10px;
+ /* background-color: orange; */
+}
+.hl {
+ background-color: yellow;
+}
+
+.annotation-card {
+ width: 100%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 5px;
- padding: 5px;
display: inline-block;
background-color: white;
- width: 100%;
-
}
-.card:hover {
+.annotation-card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
-.cardAvatar {
- width: 50px;
- height: 50px;
- background: orange;
- border-radius: 50%;
- text-align: center;
- vertical-align: middle;
- line-height: 50px;
+.annotation-header {
+ padding: 5px;
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ border-top-right-radius: 5px;
+ border-top-left-radius: 5px;
+ color: white; }
+.annotation-header i {
+ font-size: 11px;
+}
+.annotation-header span {
+ font-size: 11px;
+ margin-left: 5px;
+ margin-right: 5px;
+}
+.annotation-header a:link {
color: white;
- font-size: 25px;
- display: inline-block;
- vertical-align: middle;
+ text-decoration: none;
}
-.cardContent {
- color: black;
- display: inline-block;
- vertical-align: middle;
- margin-left: 10px;
+.annotation-header a:visited {
+ color: white;
+ text-decoration: none;
}
-.spacing {
- height: 10px;
- /* background-color: orange; */
+.annotation-header a:active {
+ color: white;
+ text-decoration: none;
}
-.hl {
- background-color: yellow;
+.annotation-header a:hover {
+ color: #e6e6e6;
+ text-decoration: none;
+}
+.annotation-header-title {
+ display: flex;
+ flex-flow: column;
+ width: calc(100% - 40px);
+}
+.annotation-header-toggle {
+ height: 40px;
+ width: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.annotation-body {
+ padding: 8px;
+ border-bottom-right-radius: 5px;
+ border-bottom-left-radius: 5px;
+}
+.annotation-body p {
+ margin: 0px;
+ font-size: 13px;
+}
+.overflow-hidden {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
}
+.annotation-footer {
+ padding: 5px;
+ padding-top: 0px;
+ text-align: right;
+ font-size: 9px;
+ color: lightgrey;
+}
+.annotation-footer span {
+ margin-left: 5px;
+}
+
diff --git a/gemeinsamforschen/src/main/webapp/assets/js/annotationScript.js b/gemeinsamforschen/src/main/webapp/assets/js/annotationScript.js
index eefbf68d..9d649bb4 100644
--- a/gemeinsamforschen/src/main/webapp/assets/js/annotationScript.js
+++ b/gemeinsamforschen/src/main/webapp/assets/js/annotationScript.js
@@ -146,23 +146,72 @@ function displayAnnotation(annotation) {
)
}
+ var dateIcon = "fas fa-calendar";
+ if (timestampIsToday(annotation.timestamp)) {
+ dateIcon = "fas fa-clock";
+ }
+
// insert annotation card
list.prepend(
- $('<li>').mouseenter(function () {
- addHighlightedText(annotation.startCharacter, annotation.endCharacter);
- }).mouseleave(function () {
- deleteHighlightedText();
- }).data(annotation).attr('class', 'listelement').attr('id', annotation.id).append(
- $('<div>').attr('class', 'card').append(
- $('<div>').attr('class', 'cardAvatar').css('background-color', color).append(
- $('<b>').append(annotation.id.substr(0,1))
- )
- ).append(
- $('<div>').attr('class', 'cardContent').append(
- $('<span>').append(annotation.body.substring(0, 5) + "...")
- )
+ $('<li>')
+ .mouseenter(function () {
+ addHighlightedText(annotation.startCharacter, annotation.endCharacter);
+ })
+ .mouseleave(function () {
+ deleteHighlightedText();
+ })
+ .data(annotation)
+ .attr('class', 'listelement')
+ .append(
+ $('<div>').attr('class', 'annotation-card')
+ .append(
+ $('<div>').attr('class', 'annotation-header')
+ .css('background-color', color)
+ .append(
+ $('<div>').attr('class', 'annotation-header-title')
+ .append(
+ $('<div>').attr('class', 'overflow-hidden')
+ .append(
+ $('<i>').attr('class', 'fas fa-user')
+ )
+ .append(
+ $('<span>').append(annotation.userId)
+ )
+ )
+ .append(
+ $('<div>').attr('class', 'overflow-hidden')
+ .append(
+ $('<i>').attr('class', 'fas fa-bookmark')
+ )
+ .append(
+ $('<span>').append('title' + annotation.userId)
+ )
+ )
+ )
+ .append(
+ $('<div>').attr('class', 'annotation-header-toggle')
+ .append(
+ $('<i>').attr('class', 'fas fa-chevron-down')
+ )
+ )
+ )
+ .append(
+ $('<div>').attr('class', 'annotation-body')
+ .append(
+ $('<p>').attr('class', 'overflow-hidden').append(annotation.body)
+ )
+ )
+ .append(
+ $('<div>').attr('class', 'annotation-footer')
+ .append(
+ $('<i>').attr('class', dateIcon)
+ )
+ .append(
+ $('<span>').append(timestampToReadableTime(annotation.timestamp))
+ )
+ )
)
- )
+
);
}
@@ -222,3 +271,65 @@ function getRandomColor() {
(Math.floor(Math.random()*56)+170) +
')';
}
+
+/**
+ * Calculate and build a readable timestamp from an unix timestamp
+ *
+ * @param timestamp a unix timestamp
+ * @returns {string} a readable timestamp
+ */
+function timestampToReadableTime(timestamp) {
+ // build Date object from timestamp
+ var annotationDate = new Date(timestamp);
+ // declare response
+ var responseTimestamp;
+
+ // if annotation is from today
+ if (timestampIsToday(timestamp)) {
+ // get hours from date
+ var hours = annotationDate.getHours();
+ // get minutes from date
+ var minutes = "0" + annotationDate.getMinutes();
+ // get seconds from date
+ // var seconds = "0" + annotationDate.getSeconds();
+
+ // build readable timestamp
+ responseTimestamp = hours + ":" + minutes.substr(-2);
+ }
+ // else annotation is not from today
+ else {
+ // get date
+ var date = annotationDate.getDate();
+ // get month
+ var month = annotationDate.getMonth();
+ // get year
+ var year = annotationDate.getFullYear();
+
+ // build readable timestamp
+ responseTimestamp = date + "." + month + "." + year;
+ }
+
+ return responseTimestamp;
+}
+
+/**
+ * Check if given timestamp is from today
+ *
+ * @param timestamp the given timestamp in milliseconds
+ * @returns {boolean} returns true if the timestamp is from today
+ */
+function timestampIsToday(timestamp) {
+ // now
+ var now = new Date();
+ // build Date object from timestamp
+ var date = new Date(timestamp);
+
+ // return true if timestamp is today
+ if (now.getDate() == date.getDate() && now.getMonth() == date.getMonth() && now.getFullYear() == date.getFullYear()) {
+ return true;
+ }
+ else {
+ return false;
+ }
+}
+
diff --git a/gemeinsamforschen/src/main/webapp/pages/annotation_document.html b/gemeinsamforschen/src/main/webapp/pages/annotation_document.html
index 2a01102e..cebdda99 100644
--- a/gemeinsamforschen/src/main/webapp/pages/annotation_document.html
+++ b/gemeinsamforschen/src/main/webapp/pages/annotation_document.html
@@ -15,7 +15,7 @@
<!-- css - styles -->
<link rel="stylesheet" href="../assets/css/styles.css">
<!-- css - font awesome -->
- <link rel="stylesheet" href="../assets/fonts/font-awesome.min.css">
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<!-- css - sidebar -->
<link rel="stylesheet" href="../assets/css/Sidebar-Menu.css">
--
GitLab