From 771530ecb63f46a4d5b0de1b7e19bb70020cbf00 Mon Sep 17 00:00:00 2001
From: julientaq <julientaq@gmail.com>
Date: Wed, 3 Jan 2018 16:21:48 +0100
Subject: [PATCH] cleaning the attachments and files styles
---
packages/ui/src/atoms/Attachment.js | 4 +-
packages/ui/src/atoms/Attachment.local.scss | 29 +++++++++---
packages/ui/src/atoms/File.local.scss | 2 +-
packages/ui/src/atoms/Icon.js | 2 +-
packages/ui/src/atoms/Icon.local.scss | 3 ++
packages/ui/src/lib/colors.local.scss | 2 +-
packages/ui/src/molecules/Attachments.js | 2 +-
.../ui/src/molecules/Attachments.local.scss | 4 +-
packages/ui/src/molecules/Files.local.scss | 2 +
yarn.lock | 45 +++++++++++++++++--
10 files changed, 79 insertions(+), 16 deletions(-)
diff --git a/packages/ui/src/atoms/Attachment.js b/packages/ui/src/atoms/Attachment.js
index 9f9be1d49..1d320ee2d 100644
--- a/packages/ui/src/atoms/Attachment.js
+++ b/packages/ui/src/atoms/Attachment.js
@@ -3,9 +3,9 @@ import Icon from './Icon'
import classes from './Attachment.local.scss'
const Attachment = ({ value }) => (
- <a download={value.name} href={value.url}>
+ <a className={classes.root} download={value.name} href={value.url}>
<span className={classes.icon}>
- <Icon color="var(--color-primary)">paperclip</Icon>
+ <Icon color="var(--color-local)">paperclip</Icon>
</span>
<span className={classes.filename}>{value.name}</span>
</a>
diff --git a/packages/ui/src/atoms/Attachment.local.scss b/packages/ui/src/atoms/Attachment.local.scss
index 4a6f52020..832d23dd8 100644
--- a/packages/ui/src/atoms/Attachment.local.scss
+++ b/packages/ui/src/atoms/Attachment.local.scss
@@ -1,13 +1,30 @@
+.root {
+ align-items: center;
+ display: flex;
+ line-height: 1.15;
+ text-decoration: none;
+}
+
.icon {
- color: var(--color-primary);
- display: inline-flex;
- margin-right: 10px;
+ --color-local: var(--color-primary);
+ --icon-size: 16px;
+
+ margin: 0.5em;
+}
+
+.icon svg {
+ height: var(--icon-size);
+ width: var(--icon-size);
}
.filename {
- font-size: 0.7em;
- height: 2em;
- max-width: 25ch;
+ color: var(--color-primary);
+ display: inline-flex;
overflow-wrap: break-word;
padding: 0;
+ word-break: break-all;
+}
+
+.root:hover .filename {
+ text-decoration: underline;
}
diff --git a/packages/ui/src/atoms/File.local.scss b/packages/ui/src/atoms/File.local.scss
index b75173420..0bef1ebf1 100644
--- a/packages/ui/src/atoms/File.local.scss
+++ b/packages/ui/src/atoms/File.local.scss
@@ -77,8 +77,8 @@
font-style: italic;
margin: 5px;
max-width: 15ch;
+ overflow-wrap: break-all; /* to divide into lines */
text-align: center;
- word-break: break-all; /* to divide into lines */
}
&:hover {
diff --git a/packages/ui/src/atoms/Icon.js b/packages/ui/src/atoms/Icon.js
index 26a904615..d67e11c29 100644
--- a/packages/ui/src/atoms/Icon.js
+++ b/packages/ui/src/atoms/Icon.js
@@ -3,7 +3,7 @@ import { pascalize } from 'humps'
import * as icons from 'react-feather'
import classes from './Icon.local.scss'
-const Icon = ({ children, color = 'black', size = 24 }) => {
+const Icon = ({ children, color = 'var(--color-local, black)', size = 24 }) => {
// convert `arrow_left` to `ArrowLeft`
const name = pascalize(children)
diff --git a/packages/ui/src/atoms/Icon.local.scss b/packages/ui/src/atoms/Icon.local.scss
index dfc0a60d1..dcf1c2ecb 100644
--- a/packages/ui/src/atoms/Icon.local.scss
+++ b/packages/ui/src/atoms/Icon.local.scss
@@ -1,3 +1,6 @@
.root {
+ // color of the icon is set by his parent
+
display: inline-flex;
+ width: var(--icon-size);
}
diff --git a/packages/ui/src/lib/colors.local.scss b/packages/ui/src/lib/colors.local.scss
index e06cf2a6b..16b8c8ca3 100644
--- a/packages/ui/src/lib/colors.local.scss
+++ b/packages/ui/src/lib/colors.local.scss
@@ -1,4 +1,4 @@
.primary {
- background-color: cornflowerblue;
+ background-color: var(--color-primary);
color: white;
}
diff --git a/packages/ui/src/molecules/Attachments.js b/packages/ui/src/molecules/Attachments.js
index c05eb4879..10f65100b 100644
--- a/packages/ui/src/molecules/Attachments.js
+++ b/packages/ui/src/molecules/Attachments.js
@@ -14,7 +14,7 @@ const Attachments = props => (
uploadingFile={({ file, progress, error }) => (
<div className={classes.uploading}>
<span className={classes.icon}>
- <Icon color="var(--color-primary)">paperclip</Icon>
+ <Icon color="var(--color-local, black)">paperclip</Icon>
</span>
<span className={classes.filename}>{error || 'Uploading…'}</span>
</div>
diff --git a/packages/ui/src/molecules/Attachments.local.scss b/packages/ui/src/molecules/Attachments.local.scss
index 67c036fe4..cf01f0057 100644
--- a/packages/ui/src/molecules/Attachments.local.scss
+++ b/packages/ui/src/molecules/Attachments.local.scss
@@ -1,6 +1,8 @@
.uploading {
- align-items: center;
display: flex;
+ flex-direction: column;
+ margin-bottom: 2em;
+ margin-top: 2em;
}
.icon {
diff --git a/packages/ui/src/molecules/Files.local.scss b/packages/ui/src/molecules/Files.local.scss
index b6e58a85f..1737d0ea2 100644
--- a/packages/ui/src/molecules/Files.local.scss
+++ b/packages/ui/src/molecules/Files.local.scss
@@ -18,6 +18,8 @@
}
.files {
+ display: flex;
+ flex-direction: column;
font-size: 0.9em;
font-style: italic;
line-height: 1.5;
diff --git a/yarn.lock b/yarn.lock
index ebe6312ed..c62a42fc8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -66,6 +66,24 @@
pouchdb "^6.3.4"
pubsweet-server "^1.0.0-beta.2"
+"@pubsweet/db-manager@^0.0.8":
+ version "0.0.8"
+ resolved "https://registry.yarnpkg.com/@pubsweet/db-manager/-/db-manager-0.0.8.tgz#f0d2d48ab393aa7958d6bcd8c97f0500686653bf"
+ dependencies:
+ "@pubsweet/logger" "0.0.1"
+ fs-extra "^4.0.2"
+ isomorphic-fetch "^2.2.1"
+ joi "^11.0.2"
+ pouchdb "^6.3.4"
+ pubsweet-server "^1.0.0-beta.2"
+
+"@pubsweet/logger@0.0.1", "@pubsweet/logger@^0.0.1":
+ version "0.0.1"
+ resolved "https://registry.yarnpkg.com/@pubsweet/logger/-/logger-0.0.1.tgz#ec0c15f04e0c64232c29173848ffe6da8190c9c2"
+ dependencies:
+ config "^1.26.2"
+ joi "^10.6.0"
+
"@pubsweet/starter@git+https://gitlab.coko.foundation/pubsweet/pubsweet-starter.git":
version "1.0.0-alpha.1"
resolved "git+https://gitlab.coko.foundation/pubsweet/pubsweet-starter.git#dfe2a9cc77dd84247a8a9bb3ec222ee7f6768059"
@@ -3938,6 +3956,12 @@ fastparse@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8"
+faye-websocket@0.9.4:
+ version "0.9.4"
+ resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.9.4.tgz#885934c79effb0409549e0c0a3801ed17a40cdad"
+ dependencies:
+ websocket-driver ">=0.5.1"
+
faye-websocket@^0.10.0:
version "0.10.0"
resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.10.0.tgz#4e492f8d04dfb6f89003507f6edbf2d501e7c6f4"
@@ -8715,6 +8739,10 @@ pubsweet-component-navigation@^0.2.7:
react-router-bootstrap "^0.24.4"
react-router-dom "^4.2.2"
+pubsweet-component-pepper-theme@^0.0.3:
+ version "0.0.3"
+ resolved "https://registry.yarnpkg.com/pubsweet-component-pepper-theme/-/pubsweet-component-pepper-theme-0.0.3.tgz#9bc8b111dde81e92100e74a17ec9c97a3bf9855a"
+
pubsweet-server@1.0.0-beta.3:
version "1.0.0-beta.3"
resolved "https://registry.yarnpkg.com/pubsweet-server/-/pubsweet-server-1.0.0-beta.3.tgz#c29c30671a897883e2c87085f214c0d6be178044"
@@ -8754,9 +8782,9 @@ pubsweet-server@1.0.0-beta.3:
uuid "^3.0.1"
winston "^2.2.0"
-pubsweet-sse@^0.1.1:
- version "0.1.3"
- resolved "https://registry.yarnpkg.com/pubsweet-sse/-/pubsweet-sse-0.1.3.tgz#a185e81e270ef3b1132cae12959c1ac430a6ae03"
+pubsweet-theme-plugin@^0.0.1:
+ version "0.0.1"
+ resolved "https://registry.yarnpkg.com/pubsweet-theme-plugin/-/pubsweet-theme-plugin-0.0.1.tgz#4160bdd53dec4d646952d29337ce36bc3b8dfe9a"
pubsweet@1.0.0-beta.5:
version "1.0.0-beta.5"
@@ -8807,6 +8835,13 @@ punycode@^1.2.4, punycode@^1.4.1:
version "1.4.1"
resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
+pusher-js@^4.2.1:
+ version "4.2.1"
+ resolved "https://registry.yarnpkg.com/pusher-js/-/pusher-js-4.2.1.tgz#7c10e2f981b8ed4390c1cbed448eb5c0967aaa22"
+ dependencies:
+ faye-websocket "0.9.4"
+ xmlhttprequest "^1.8.0"
+
q-i@^1.1.4:
version "1.2.0"
resolved "https://registry.yarnpkg.com/q-i/-/q-i-1.2.0.tgz#2cd2ab41784dc3c583e35c70a541d93c3fde5d4a"
@@ -11811,6 +11846,10 @@ xmlbuilder@^9.0.4:
version "9.0.4"
resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-9.0.4.tgz#519cb4ca686d005a8420d3496f3f0caeecca580f"
+xmlhttprequest@^1.8.0:
+ version "1.8.0"
+ resolved "https://registry.yarnpkg.com/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz#67fe075c5c24fef39f9d65f5f7b7fe75171968fc"
+
"xtend@>=4.0.0 <4.1.0-0", xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.0, xtend@~4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
--
GitLab