From cee1040bcb31ba2264cdf377e036754d07830aac Mon Sep 17 00:00:00 2001
From: Bram Wiepjes <bramw@protonmail.com>
Date: Fri, 8 Mar 2019 14:34:25 +0100
Subject: [PATCH] added field styling, add buttons and finished basic grid view
styling
---
web-frontend/public/grid.html | 706 ++++--------------
.../src/scss/components/views/_grid.scss | 91 ++-
.../scss/components/views/grid/_boolean.scss | 24 +
.../scss/components/views/grid/_number.scss | 6 +
.../src/scss/components/views/grid/_text.scss | 5 +
web-frontend/src/scss/default.scss | 3 +
6 files changed, 252 insertions(+), 583 deletions(-)
create mode 100644 web-frontend/src/scss/components/views/grid/_boolean.scss
create mode 100644 web-frontend/src/scss/components/views/grid/_number.scss
create mode 100644 web-frontend/src/scss/components/views/grid/_text.scss
diff --git a/web-frontend/public/grid.html b/web-frontend/public/grid.html
index e90cbe638..4a2b5b570 100644
--- a/web-frontend/public/grid.html
+++ b/web-frontend/public/grid.html
@@ -182,109 +182,42 @@
<div class="grid-view-left" style="width: 200px;">
<div class="grid-view-inner" style="min-width: 200px;">
<div class="grid-view-head">
- <div class="grid-view-column" style="width: 200px;">head 1</div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-description">
+ <div class="grid-view-description-icon">
+ <i class="fas fa-font"></i>
+ </div>
+ <div class="grid-view-description-name">Name</div>
+ <a href="#" class="grid-view-description-options">
+ <i class="fas fa-caret-down"></i>
+ </a>
+ </div>
+ </div>
</div>
<div class="grid-view-body">
<div class="grid-view-body-inner">
- <div class="grid-view-row">
+ <div class="grid-view-row" data-repeat="20">
<div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 1</div>
+ <div class="grid-view-cell">
+ <div class="grid-field-text">
+ Blue socks
+ </div>
+ </div>
</div>
</div>
<div class="grid-view-row">
<div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 1</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 1</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 1</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 1</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 1</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 1</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 1</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 1</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 1</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 1</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 1</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 1</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 1</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 1</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 1</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 1</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 1</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 1</div>
+ <a href="#" class="grid-view-add-row">
+ <i class="fas fa-plus"></i>
+ </a>
</div>
</div>
</div>
</div>
<div class="grid-view-foot">
- <div class="grid-view-column">footer 1</div>
+ <div class="grid-view-column">
+ <div class="grid-view-foot-info">18 records</div>
+ </div>
</div>
</div>
</div>
@@ -292,30 +225,77 @@
<div class="grid-view-right" style="left: 200px;">
<div class="grid-view-inner" style="min-width: 1800px;">
<div class="grid-view-head">
- <div class="grid-view-column" style="width: 200px;">head 2</div>
- <div class="grid-view-column" style="width: 200px;">head 3</div>
- <div class="grid-view-column" style="width: 200px;">head 4</div>
- <div class="grid-view-column" style="width: 200px;">head 5</div>
- <div class="grid-view-column" style="width: 200px;">head 6</div>
- <div class="grid-view-column" style="width: 200px;">head 7</div>
- <div class="grid-view-column" style="width: 200px;">head 8</div>
- <div class="grid-view-column" style="width: 200px;">head 9</div>
- <div class="grid-view-column" style="width: 100px;">+</div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-description">
+ <div class="grid-view-description-icon">
+ <i class="fas fa-hashtag"></i>
+ </div>
+ <div class="grid-view-description-name">Price</div>
+ <a href="#" class="grid-view-description-options">
+ <i class="fas fa-caret-down"></i>
+ </a>
+ </div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-description">
+ <div class="grid-view-description-icon">
+ <i class="fas fa-check-square"></i>
+ </div>
+ <div class="grid-view-description-name">Active</div>
+ <a href="#" class="grid-view-description-options">
+ <i class="fas fa-caret-down"></i>
+ </a>
+ </div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;" data-repeat="5">
+ <div class="grid-view-description">
+ <div class="grid-view-description-icon">
+ <i class="fas fa-font"></i>
+ </div>
+ <div class="grid-view-description-name">Description</div>
+ <a href="#" class="grid-view-description-options">
+ <i class="fas fa-caret-down"></i>
+ </a>
+ </div>
+ </div>
+ <div class="grid-view-column" style="width: 100px;">
+ <a href="#" class="grid-view-add-column">
+ <i class="fas fa-plus"></i>
+ </a>
+ </div>
</div>
<div class="grid-view-body">
<div class="grid-view-body-inner">
- <div class="grid-view-row">
+ <div class="grid-view-row" data-repeat="20">
<div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 2</div>
+ <div class="grid-view-cell">
+ <div class="grid-field-number">
+ 99,99
+ </div>
+ </div>
</div>
<div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 3</div>
+ <div class="grid-view-cell">
+ <div class="grid-field-boolean">
+ <div class="grid-field-checkbox">
+ <i class="fas fa-check check"></i>
+ </div>
+ </div>
+ </div>
</div>
<div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 4</div>
+ <div class="grid-view-cell">
+ <div class="grid-field-text">
+ A very long description that is not fully visible.
+ </div>
+ </div>
</div>
<div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 5</div>
+ <div class="grid-view-cell">
+ <div class="grid-field-text">
+ Hello World!
+ </div>
+ </div>
</div>
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 6</div>
@@ -329,487 +309,18 @@
<div class="grid-view-column" style="width: 200px;">
<div class="grid-view-cell">body 9</div>
</div>
+ <div class="grid-view-column grid-view-add-column-placeholder" style="width: 100px;">
+ <div class="grid-view-cell"></div>
+ </div>
</div>
<div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 2</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 3</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell active">body 4</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 5</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 6</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 7</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 8</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 9</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 2</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 3</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 4</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 5</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 6</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 7</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 8</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 9</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 2</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 3</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 4</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 5</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 6</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 7</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 8</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 9</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 2</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 3</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 4</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 5</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 6</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 7</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 8</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 9</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 2</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 3</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 4</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 5</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 6</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 7</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 8</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 9</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 2</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 3</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 4</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 5</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 6</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 7</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 8</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 9</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 2</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 3</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 4</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 5</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 6</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 7</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 8</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 9</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 2</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 3</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 4</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 5</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 6</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 7</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 8</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 9</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 2</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 3</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 4</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 5</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 6</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 7</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 8</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 9</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 2</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 3</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 4</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 5</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 6</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 7</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 8</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 9</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 2</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 3</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 4</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 5</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 6</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 7</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 8</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 9</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 2</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 3</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 4</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 5</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 6</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 7</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 8</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 9</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 2</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 3</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 4</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 5</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 6</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 7</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 8</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 9</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 2</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 3</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 4</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 5</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 6</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 7</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 8</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 9</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 2</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 3</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 4</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 5</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 6</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 7</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 8</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 9</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 2</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 3</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 4</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 5</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 6</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 7</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 8</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 9</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 2</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 3</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 4</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 5</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 6</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 7</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 8</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 9</div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 2</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 3</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 4</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 5</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 6</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 7</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 8</div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">body 9</div>
+ <div class="grid-view-column" style="width: 1600px;">
+ <a href="#" class="grid-view-add-row"></a>
</div>
</div>
</div>
</div>
- <div class="grid-view-foot">
- <div class="grid-view-column" style="width: 200px;">footer 2</div>
- <div class="grid-view-column" style="width: 200px;">footer 3</div>
- <div class="grid-view-column" style="width: 200px;">footer 4</div>
- <div class="grid-view-column" style="width: 200px;">footer 5</div>
- <div class="grid-view-column" style="width: 200px;">footer 6</div>
- <div class="grid-view-column" style="width: 200px;">footer 7</div>
- <div class="grid-view-column" style="width: 200px;">footer 8</div>
- <div class="grid-view-column" style="width: 200px;">footer 9</div>
- </div>
+ <div class="grid-view-foot"></div>
</div>
</div>
</div>
@@ -819,6 +330,16 @@
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
(function() {
+ $("[data-repeat]").each(function(i, object) {
+ var $object = $(object);
+ var amount = parseInt($object.attr("data-repeat"));
+
+ var html = $object[0].outerHTML;
+ for(var i = 0; i < amount; i++) {
+ $(html).insertAfter($object);
+ }
+ });
+
$top1 = $(".grid-view-left .grid-view-body");
$top2 = $(".grid-view-right .grid-view-body");
$left1 = $(".grid-view-right");
@@ -834,6 +355,33 @@
$left1.scrollLeft(left);
event.preventDefault();
});
+
+ $addRow = $(".grid-view-add-row");
+ $addRow.hover(function() {
+ $addRow.addClass("hover");
+ }, function() {
+ $addRow.removeClass("hover");
+ });
+
+ $addColumn = $(".grid-view-add-column");
+ $addPlaceholder = $(".grid-view-add-column-placeholder")
+ $addColumn.hover(function() {
+ $addPlaceholder.addClass("hover");
+ }, function() {
+ $addPlaceholder.removeClass("hover");
+ });
+
+ $cell = $(".grid-view-cell")
+ $cell.click(function(e) {
+ $cell.removeClass("active");
+ $(this).addClass("active");
+ });
+
+ $(".grid-field-checkbox").click(function() {
+ if ($(this).closest(".grid-view-cell").hasClass("active")) {
+ $(this).toggleClass("active");
+ }
+ });
})();
</script>
</body>
diff --git a/web-frontend/src/scss/components/views/_grid.scss b/web-frontend/src/scss/components/views/_grid.scss
index 3763014de..17370a670 100644
--- a/web-frontend/src/scss/components/views/_grid.scss
+++ b/web-frontend/src/scss/components/views/_grid.scss
@@ -87,6 +87,10 @@
border-top: 1px solid $color-neutral-200;
}
+.grid-view-foot-info {
+ padding: 10px;
+}
+
.grid-view-row {
@extend .clearfix;
height: 32px + 1px;
@@ -121,12 +125,91 @@
background-color: $white;
&.active {
+ @include absolute(-2px);
z-index: 2;
- left: -2px;
- top: -2px;
- right: -2px;
- bottom: -2px;
border: 2px solid $color-primary-500;
border-radius: 2px;
}
+
+ &.active-by {
+ border-color: $color-success-500;
+ }
+
+ .grid-view-cell-active-by {
+ @include absolute(-8px, 0, auto, auto);
+ @include fixed-height(18px, 12px);
+ background-color: $color-success-500;
+ color: $white;
+ border-radius: 3px;
+ padding: 0 3px;
+ transform: translateX(50%);
+
+ .icon {
+ font-size: 9px;
+ }
+ }
+}
+
+.grid-view-description {
+ padding: 0 30px;
+ line-height: 32px;
+
+ .grid-view-description-icon,
+ .grid-view-description-options {
+ line-height: inherit;
+ width: 30px;
+ color: $color-neutral-600;
+ }
+
+ .grid-view-description-icon {
+ @include absolute(0, auto, 0, 0);
+ padding-left: 10px;
+ text-align: left;
+ }
+
+ .grid-view-description-options {
+ @include absolute(0, 0, 0, auto);
+ text-align: center;
+
+ &:hover {
+ color: $color-neutral-900;
+ }
+ }
+
+ .grid-view-description-name {
+ @extend %ellipsis;
+ }
+}
+
+.grid-view-add-column {
+ display: block;
+ line-height: 32px;
+ text-align: center;
+ color: $color-neutral-900;
+
+ &:hover {
+ background-color: $color-primary-100;
+ }
+}
+
+.grid-view-add-column-placeholder {
+ display: none;
+
+ &.hover {
+ display: block;
+ }
+}
+
+.grid-view-add-row {
+ display: block;
+ line-height: 32px;
+ height: 32px;
+ padding-left: 10px;
+ color: $color-neutral-900;
+ background-color: $white;
+
+ &:hover,
+ &.hover {
+ background-color: $color-primary-100;
+ }
}
diff --git a/web-frontend/src/scss/components/views/grid/_boolean.scss b/web-frontend/src/scss/components/views/grid/_boolean.scss
new file mode 100644
index 000000000..702ca58a1
--- /dev/null
+++ b/web-frontend/src/scss/components/views/grid/_boolean.scss
@@ -0,0 +1,24 @@
+.grid-field-boolean {
+ height: 32px;
+ display: flex;
+}
+
+.grid-field-checkbox {
+ margin: auto;
+ border: 1px solid $color-neutral-200;
+ border-radius: 3px;
+ color: $color-success-600;
+ @include center-text(18px, 11px);
+
+ .grid-view-cell.active & {
+ border-color: $color-neutral-300;
+ }
+
+ .check {
+ visibility: hidden;
+ }
+
+ &.active .check {
+ visibility: visible;
+ }
+}
diff --git a/web-frontend/src/scss/components/views/grid/_number.scss b/web-frontend/src/scss/components/views/grid/_number.scss
new file mode 100644
index 000000000..fdfac1ea8
--- /dev/null
+++ b/web-frontend/src/scss/components/views/grid/_number.scss
@@ -0,0 +1,6 @@
+.grid-field-number {
+ @extend %ellipsis;
+ @include fixed-height(32px, 13px);
+ text-align: right;
+ padding: 0 10px;
+}
diff --git a/web-frontend/src/scss/components/views/grid/_text.scss b/web-frontend/src/scss/components/views/grid/_text.scss
new file mode 100644
index 000000000..202f2ad4b
--- /dev/null
+++ b/web-frontend/src/scss/components/views/grid/_text.scss
@@ -0,0 +1,5 @@
+.grid-field-text {
+ @extend %ellipsis;
+ @include fixed-height(32px, 13px);
+ padding: 0 10px;
+}
diff --git a/web-frontend/src/scss/default.scss b/web-frontend/src/scss/default.scss
index 288e34fe0..d34881137 100755
--- a/web-frontend/src/scss/default.scss
+++ b/web-frontend/src/scss/default.scss
@@ -20,5 +20,8 @@
@import "components/scrollbar";
@import "components/views/grid";
+@import "components/views/grid/text";
+@import "components/views/grid/boolean";
+@import "components/views/grid/number";
@import "components/box_page";