From e324d5c0edd86be16583c1749ea5ffced960779a Mon Sep 17 00:00:00 2001 From: Vincent Date: Fri, 17 Jul 2020 11:05:27 +1000 Subject: [PATCH] Polish audio ui --- package.json | 2 + stylesheets/_session_conversation.scss | 35 +++++++++------ stylesheets/_theme_dark.scss | 4 +- yarn.lock | 61 ++++++++++++++++++++++++-- 4 files changed, 84 insertions(+), 18 deletions(-) diff --git a/package.json b/package.json index aa0acd0a6..d3b12791f 100644 --- a/package.json +++ b/package.json @@ -107,6 +107,7 @@ "react-autosize-textarea": "^7.0.0", "react-contextmenu": "2.11.0", "react-dom": "16.8.3", + "react-emoji": "^0.5.0", "react-h5-audio-player": "^3.2.0", "react-portal": "^4.2.0", "react-qr-svg": "^2.2.1", @@ -122,6 +123,7 @@ "tar": "4.4.8", "tmp": "0.0.33", "to-arraybuffer": "1.0.1", + "twemoji": "^13.0.0", "typings-for-css-modules-loader": "^1.7.0", "underscore": "1.9.0", "uuid": "3.3.2" diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss index c42f9c8e2..29d21093b 100644 --- a/stylesheets/_session_conversation.scss +++ b/stylesheets/_session_conversation.scss @@ -227,7 +227,7 @@ $composition-container-height: 60px; background: transparent; outline: none; border: none; - font-size: $session-font-md; + font-size: 14px; line-height: $session-font-h2; letter-spacing: 0.5px; } @@ -449,6 +449,14 @@ $rhap_font-family: inherit !default; padding: 0px; background-color: transparent; box-shadow: none; + + svg { + transition: fill $session-transition-duration; + + &:hover path { + fill: #FFFFFF; + } + } } .rhap_total-time { @@ -456,7 +464,7 @@ $rhap_font-family: inherit !default; } .rhap_current-time { - margin-right: 5px; + margin: 0 5px 0 4px; } .rhap_play-pause-button { @@ -476,8 +484,7 @@ $rhap_font-family: inherit !default; .rhap_time { color: $rhap_time-color; font-size: 12px; - user-select: none; - -webkit-user-select: none; + width: 32px; } .rhap_progress-bar { @@ -491,7 +498,10 @@ $rhap_font-family: inherit !default; } .rhap_progress-filled { + opacity: 0.6; background-color: #00f782; + padding-left: 5px; + left: -5px; } .rhap_download-progress { @@ -503,15 +513,14 @@ $rhap_font-family: inherit !default; } .rhap_progress-indicator { - display: none; - // z-index: 3; - // width: 10px; - // height: 5px; - // margin-left: -5px; - // top: 0px; - // background: $session-color-green; - // box-shadow: none; - // box-shadow: rgba($rhap_theme-color, .5) 0 0 5px; + z-index: 3; + width: 15px; + height: 15px; + top: -5px; + margin-left: -10px; + background: $session-color-green; + box-shadow: none; + box-shadow: rgba($rhap_theme-color, .5) 0 0 5px; } .rhap_controls-section { diff --git a/stylesheets/_theme_dark.scss b/stylesheets/_theme_dark.scss index 595f69dec..8455d6257 100644 --- a/stylesheets/_theme_dark.scss +++ b/stylesheets/_theme_dark.scss @@ -729,9 +729,9 @@ body.dark-theme { } .module-message__text { - color: $color-dark-05; + color: #FFFFFF; a { - color: $color-dark-05; + color: #FFFFFF; } } diff --git a/yarn.lock b/yarn.lock index b4fecca4d..874c7d738 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3227,6 +3227,11 @@ elliptic@^6.0.0: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.0" +emoji-annotation-to-unicode@^0.3.0: + version "0.3.0" + resolved "https://registry.yarnpkg.com/emoji-annotation-to-unicode/-/emoji-annotation-to-unicode-0.3.0.tgz#b76d18823e1d70a95a017c438c168eda12902f3b" + integrity sha1-t20Ygj4dcKlaAXxDjBaO2hKQLzs= + emoji-datasource-apple@4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/emoji-datasource-apple/-/emoji-datasource-apple-4.0.0.tgz#f31a2cbf9295c66b5cc1e78635ee7b617430a08b" @@ -3237,6 +3242,11 @@ emoji-datasource@4.0.0: resolved "https://registry.yarnpkg.com/emoji-datasource/-/emoji-datasource-4.0.0.tgz#3fc9c0c2f4fb321d9291138819f6d100603d3e2f" integrity sha1-P8nAwvT7Mh2SkROIGfbRAGA9Pi8= +emoji-emoticon-to-unicode@^0.2.2: + version "0.2.2" + resolved "https://registry.yarnpkg.com/emoji-emoticon-to-unicode/-/emoji-emoticon-to-unicode-0.2.2.tgz#5ae60d53852d8328b63f31d1ca29897ebb783260" + integrity sha1-WuYNU4Utgyi2PzHRyimJfrt4MmA= + emoji-js@3.4.0: version "3.4.0" resolved "https://registry.yarnpkg.com/emoji-js/-/emoji-js-3.4.0.tgz#dabdeda60c92d1948a5177e51ba9421d2029b052" @@ -3383,7 +3393,7 @@ escape-html@~1.0.3: resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988" integrity sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg= -escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5: +escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.3, escape-string-regexp@^1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4" integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ= @@ -4124,7 +4134,7 @@ fs-extra@^4.0.1: jsonfile "^4.0.0" universalify "^0.1.0" -fs-extra@^8.1.0: +fs-extra@^8.0.1, fs-extra@^8.1.0: version "8.1.0" resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0" integrity sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g== @@ -5794,6 +5804,15 @@ jsonfile@^4.0.0: optionalDependencies: graceful-fs "^4.1.6" +jsonfile@^5.0.0: + version "5.0.0" + resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-5.0.0.tgz#e6b718f73da420d612823996fdf14a03f6ff6922" + integrity sha512-NQRZ5CRo74MhMMC3/3r5g2k4fjodJ/wh8MxjFbCViWKFjxrnudWSY5vomh+23ZaXzAS7J3fBZIR2dV6WbmfM0w== + dependencies: + universalify "^0.1.2" + optionalDependencies: + graceful-fs "^4.1.6" + jsonfile@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.0.1.tgz#98966cba214378c8c84b82e085907b40bf614179" @@ -6104,6 +6123,11 @@ lodash.clonedeep@^4.3.2: resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef" integrity sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8= +lodash.compact@^3.0.0: + version "3.0.1" + resolved "https://registry.yarnpkg.com/lodash.compact/-/lodash.compact-3.0.1.tgz#540ce3837745975807471e16b4a2ba21e7256ca5" + integrity sha1-VAzjg3dFl1gHRx4WtKK6IeclbKU= + lodash.cond@^4.3.0: version "4.5.2" resolved "https://registry.yarnpkg.com/lodash.cond/-/lodash.cond-4.5.2.tgz#f471a1da486be60f6ab955d17115523dd1d255d5" @@ -7071,6 +7095,11 @@ object-assign@4.x, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4. resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM= +object-assign@^2.0.0: + version "2.1.1" + resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-2.1.1.tgz#43c36e5d569ff8e4816c4efa8be02d26967c18aa" + integrity sha1-Q8NuXVaf+OSBbE76i+AtJpZ8GKo= + object-copy@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/object-copy/-/object-copy-0.1.0.tgz#7e7d858b781bd7c991a41ba975ed3812754e998c" @@ -8459,6 +8488,17 @@ react-dom@16.8.3: prop-types "^15.6.2" scheduler "^0.13.3" +react-emoji@^0.5.0: + version "0.5.0" + resolved "https://registry.yarnpkg.com/react-emoji/-/react-emoji-0.5.0.tgz#14b91cc6b3ce3c3246f740e7ef5de2ec0bee664b" + integrity sha1-FLkcxrPOPDJG90Dn713i7AvuZks= + dependencies: + emoji-annotation-to-unicode "^0.3.0" + emoji-emoticon-to-unicode "^0.2.2" + escape-string-regexp "^1.0.3" + lodash.compact "^3.0.0" + object-assign "^2.0.0" + react-error-overlay@^4.0.1: version "4.0.1" resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-4.0.1.tgz#417addb0814a90f3a7082eacba7cee588d00da89" @@ -10499,6 +10539,21 @@ tweetnacl@^0.14.3, tweetnacl@~0.14.0: resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64" integrity sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q= +twemoji-parser@13.0.0: + version "13.0.0" + resolved "https://registry.yarnpkg.com/twemoji-parser/-/twemoji-parser-13.0.0.tgz#bd9d1b98474f1651dc174696b45cabefdfa405af" + integrity sha512-zMaGdskpH8yKjT2RSE/HwE340R4Fm+fbie4AaqjDa4H/l07YUmAvxkSfNl6awVWNRRQ0zdzLQ8SAJZuY5MgstQ== + +twemoji@^13.0.0: + version "13.0.0" + resolved "https://registry.yarnpkg.com/twemoji/-/twemoji-13.0.0.tgz#bdda95c0a76553bb57a355459955feb79eeebcfb" + integrity sha512-JIkoLy0lL7ZlsiUKAOdXTp0o8C15O3CzDzAmnWdeDHpjeifmKDDKX4CyViUj+9g33pIqMr8Uhcy1WLwETr8oNg== + dependencies: + fs-extra "^8.0.1" + jsonfile "^5.0.0" + twemoji-parser "13.0.0" + universalify "^0.1.2" + type-check@~0.3.2: version "0.3.2" resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72" @@ -10729,7 +10784,7 @@ unist-util-visit@^1.1.0, unist-util-visit@^1.3.0: dependencies: unist-util-visit-parents "^2.0.0" -universalify@^0.1.0: +universalify@^0.1.0, universalify@^0.1.2: version "0.1.2" resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66" integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==