mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Prettier: Format CSS, SCSS, and JSON (#2339)

Browse source 
Expand auto-formatting to CSS, SCSS, and JSON:

*   [x] Ignore symlinked SCSS file from `components`.
*   [x] Ignore package manifest files, `package.json` and `bower.json`,
        as they are already formatted by their package manager.
*   [x] Skip locale JSON files (already managed by Transifex tools).
*   [x] Format all stylesheets.
This commit is contained in:
Daniel Gasienica 2018-05-07 18:44:37 -04:00 • committed by GitHub
commit bad4681ade
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
21 changed files with 816 additions and 449 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
.prettierignore
View file

@ -1,26 +1,34 @@
# TODO: Partially duplicated from `.gitignore`. Remove once Prettier # TODO: Partially duplicated from `.gitignore`. Remove once Prettier
# supports `.gitignore`: https://github.com/prettier/prettier/issues/2294 # supports `.gitignore`: https://github.com/prettier/prettier/issues/2294
# generated files # Generated files
dist/**
js/components.js js/components.js
js/libtextsecure.js
js/libsignal-protocol-worker.js js/libsignal-protocol-worker.js
js/libtextsecure.js
libtextsecure/components.js libtextsecure/components.js
libtextsecure/test/test.js libtextsecure/test/test.js
test/test.js test/test.js
ts/**/*.js
# Third-party files # Third-party files
components/**
js/jquery.js js/jquery.js
js/Mp3LameEncoder.min.js js/Mp3LameEncoder.min.js
js/WebAudioRecorderMp3.js js/WebAudioRecorderMp3.js
ts/**/*.js
components/*
dist/*
libtextsecure/libsignal-protocol.js libtextsecure/libsignal-protocol.js
test/fixtures.js
libtextsecure/test/blanket_mocha.js libtextsecure/test/blanket_mocha.js
test/blanket_mocha.js test/blanket_mocha.js
/**/*.json # Test fixtures
/**/*.css test/fixtures.js
# Managed by Transifex:
_locales/**
# Managed by package manager (`bower` and `yarn`/`npm`):
/bower.json
/package.json
# Symlink into third-party `components`:
stylesheets/_intlTelInput.scss

2
package.json
View file

@ -31,7 +31,7 @@
"lint": "yarn format --list-different && yarn lint-windows", "lint": "yarn format --list-different && yarn lint-windows",
"lint-windows": "yarn eslint && yarn grunt lint && yarn tslint", "lint-windows": "yarn eslint && yarn grunt lint && yarn tslint",
"tslint": "tslint --config tslint.json --format stylish --project .", "tslint": "tslint --config tslint.json --format stylish --project .",
"format": "prettier --write \"*.{js,ts,tsx,md}\" \"./**/*.{js,ts,tsx,md}\"", "format": "prettier --write \"*.{css,js,json,md,scss,ts,tsx}\" \"./**/*.{css,js,json,md,scss,ts,tsx}\"",
"transpile": "tsc", "transpile": "tsc",
"clean-transpile": "rimraf ts/**/*.js ts/*.js", "clean-transpile": "rimraf ts/**/*.js ts/*.js",
"open-coverage": "open coverage/lcov-report/index.html", "open-coverage": "open coverage/lcov-report/index.html",

14
stylesheets/_android.scss
View file

@ -15,7 +15,8 @@
.conversation.placeholder .conversation-header { .conversation.placeholder .conversation-header {
display: none; display: none;
} }
.conversation-header, .bubble { .conversation-header,
.bubble {
@include avatar-colors; @include avatar-colors;
} }
.bottom-bar { .bottom-bar {
@ -38,10 +39,16 @@
} }
.incoming .bubble { .incoming .bubble {
.sender, .content, .body, .meta, a, .fileView { .sender,
.content,
.body,
.meta,
a,
.fileView {
@include invert-text-color; @include invert-text-color;
} }
.attachments, .content { .attachments,
.content {
a { a {
color: $grey_l; color: $grey_l;
} }
@ -79,5 +86,4 @@
.inactive button.back { .inactive button.back {
@include header-icon-black('../images/back.svg'); @include header-icon-black('../images/back.svg');
} }
} }

105
stylesheets/_conversation.scss
View file

@ -9,14 +9,14 @@
} }
.conversation-name + .conversation-number { .conversation-name + .conversation-number {
&:before { &:before {
content:"\00b7"; // &middot content: '\00b7'; // &middot
font-weight: bold; font-weight: bold;
padding: 0 5px 0 4px; padding: 0 5px 0 4px;
} }
} }
.conversation-title .verified { .conversation-title .verified {
&:before { &:before {
content:"\00b7"; // &middot content: '\00b7'; // &middot
font-weight: bold; font-weight: bold;
padding: 0 5px 0 4px; padding: 0 5px 0 4px;
} }
@ -149,7 +149,8 @@
} }
} }
.key, .placeholder { .key,
.placeholder {
padding: 0 1em; padding: 0 1em;
-webkit-user-select: text; -webkit-user-select: text;
} }
@ -285,7 +286,6 @@
font-weight: bold; font-weight: bold;
color: red; color: red;
} }
} }
h3 { h3 {
@ -358,7 +358,9 @@ li.entry .error-icon-container {
} }
} }
&:hover .error-message { display: inline-block; } &:hover .error-message {
display: inline-block;
}
} }
li.entry .menu-container { li.entry .menu-container {
position: absolute; position: absolute;
@ -399,7 +401,6 @@ li.entry.outgoing .menu-container {
right: auto; right: auto;
} }
.error-icon { .error-icon {
display: inline-block; display: inline-block;
width: $error-icon-size; width: $error-icon-size;
@ -426,7 +427,6 @@ li.entry.outgoing .menu-container {
} }
} }
.group-update { .group-update {
font-size: smaller; font-size: smaller;
} }
@ -469,7 +469,9 @@ span.status {
.pending span.status { .pending span.status {
display: inline-block; display: inline-block;
background: none; background: none;
&:before { content: '...'; } &:before {
content: '...';
}
} }
.message-container, .message-container,
@ -487,7 +489,7 @@ span.status {
visibility: hidden; visibility: hidden;
display: block; display: block;
font-size: 0; font-size: 0;
content: " "; content: ' ';
clear: both; clear: both;
height: 0; height: 0;
} }
@ -504,15 +506,17 @@ span.status {
text-align: -webkit-auto; text-align: -webkit-auto;
-webkit-user-select: text; -webkit-user-select: text;
@media(max-width: 825px) { @media (max-width: 825px) {
max-width: calc(100% - 45px - #{$error-icon-size}); // avatar size + padding + error-icon size max-width: calc(
100% - 45px - #{$error-icon-size}
); // avatar size + padding + error-icon size
} }
.body { .body {
white-space: pre-wrap; white-space: pre-wrap;
a { a {
word-break: break-all word-break: break-all;
} }
} }
@ -536,7 +540,7 @@ span.status {
.hasRetry + .timestamp { .hasRetry + .timestamp {
&:before { &:before {
content:"\00b7"; // &middot content: '\00b7'; // &middot
font-weight: bold; font-weight: bold;
padding: 0 5px 0 4px; padding: 0 5px 0 4px;
text-decoration: none; text-decoration: none;
@ -556,22 +560,27 @@ span.status {
cursor: pointer; cursor: pointer;
} }
.hasRetry, .timestamp, .status, .timer { .hasRetry,
.timestamp,
.status,
.timer {
float: left; float: left;
} }
.timestamp, .status { .timestamp,
.status {
cursor: pointer; cursor: pointer;
opacity: 0.5; opacity: 0.5;
&:hover { &:hover {
opacity: 1.0; opacity: 1;
} }
} }
} }
.incoming { .incoming {
.avatar, .bubble { .avatar,
.bubble {
float: left; float: left;
} }
} }
@ -585,7 +594,8 @@ span.status {
right: calc(100% + 5px); right: calc(100% + 5px);
} }
.avatar, .bubble { .avatar,
.bubble {
float: right; float: right;
} }
@ -595,11 +605,21 @@ span.status {
} }
@keyframes shake { @keyframes shake {
0% { transform: translateX(0px); } 0% {
25% { transform: translateX(-5px); } transform: translateX(0px);
50% { transform: translateX(0px); } }
75% { transform: translateX(5px); } 25% {
100% { transform: translateX(0px); } transform: translateX(-5px);
}
50% {
transform: translateX(0px);
}
75% {
transform: translateX(5px);
}
100% {
transform: translateX(0px);
}
} }
.expired .bubble { .expired .bubble {
@ -619,7 +639,8 @@ span.status {
font-style: italic; font-style: italic;
} }
&::before, &::after { &::before,
&::after {
display: none; display: none;
} }
} }
@ -633,7 +654,9 @@ span.status {
background-color: #ccc; background-color: #ccc;
} }
img, audio, video { img,
audio,
video {
display: block; display: block;
max-width: 100%; max-width: 100%;
max-height: 300px; max-height: 300px;
@ -673,13 +696,15 @@ span.status {
overflow: hidden; overflow: hidden;
} }
.icon, .text { .icon,
.text {
opacity: 0.75; opacity: 0.75;
} }
&:hover { &:hover {
.icon, .text { .icon,
opacity: 1.0; .text {
opacity: 1;
} }
} }
@ -703,7 +728,6 @@ span.status {
} }
} }
} }
} }
.outgoing .avatar { .outgoing .avatar {
@ -735,8 +759,10 @@ span.status {
background-color: #eee; background-color: #eee;
position: relative; position: relative;
margin-right: $android-bubble-quote-padding - $android-bubble-padding-horizontal; margin-right: $android-bubble-quote-padding -
margin-left: $android-bubble-quote-padding - $android-bubble-padding-horizontal; $android-bubble-padding-horizontal;
margin-left: $android-bubble-quote-padding -
$android-bubble-padding-horizontal;
margin-bottom: 0.5em; margin-bottom: 0.5em;
// Accent color border: // Accent color border:
@ -908,7 +934,6 @@ span.status {
border-left-color: white; border-left-color: white;
} }
.message-list, .message-list,
.message-container { .message-container {
.avatar { .avatar {
@ -962,7 +987,8 @@ span.status {
} }
} }
input, textarea { input,
textarea {
color: $grey_d; color: $grey_d;
} }
@ -971,7 +997,6 @@ span.status {
.attachment-preview { .attachment-preview {
padding: 13px 10px 0; padding: 13px 10px 0;
} }
img { img {
border: 2px solid #ddd; border: 2px solid #ddd;
@ -1016,7 +1041,7 @@ span.status {
font-size: 1em; font-size: 1em;
font-family: inherit; font-family: inherit;
&[disabled=disabled] { &[disabled='disabled'] {
background: transparent; background: transparent;
} }
} }
@ -1026,9 +1051,8 @@ span.status {
} }
.android-length-warning { .android-length-warning {
padding: 10px; padding: 10px;
max-width:150px; max-width: 150px;
} }
} }
.toast { .toast {
@ -1120,7 +1144,6 @@ span.status {
padding-top: 25px; padding-top: 25px;
padding-bottom: 35px; padding-bottom: 35px;
.bar { .bar {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -1137,7 +1160,7 @@ span.status {
.text { .text {
font-size: 12px; font-size: 12px;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: .06em; letter-spacing: 0.06em;
background-color: white; background-color: white;
border-radius: 1.5em; border-radius: 1.5em;
padding: 10px 21px 9px 21px; padding: 10px 21px 9px 21px;
@ -1156,7 +1179,7 @@ span.status {
text-align: center; text-align: center;
background-color: white; background-color: white;
border: none; border: none;
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2); box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
outline: none; outline: none;
.icon { .icon {
@ -1168,7 +1191,7 @@ span.status {
background-color: #616161; background-color: #616161;
} }
&.new-messages { &.new-messages {
background-color: $blue; background-color: $blue;
.icon { .icon {
@include color-svg('../images/down.svg', white); @include color-svg('../images/down.svg', white);

1
stylesheets/_debugLog.scss
View file

@ -67,6 +67,5 @@
border: solid 1px #ccc; border: solid 1px #ccc;
border-right: none; border-right: none;
} }
} }
} }

106
stylesheets/_emoji.scss
View file

@ -1,83 +1,83 @@
span.emoji { span.emoji {
display: -moz-inline-box; display: -moz-inline-box;
-moz-box-orient: vertical; -moz-box-orient: vertical;
display: inline-block; display: inline-block;
vertical-align: baseline; vertical-align: baseline;
*vertical-align: auto; *vertical-align: auto;
*zoom: 1; *zoom: 1;
*display: inline; *display: inline;
width: 1em; width: 1em;
height: 1em; height: 1em;
background-size: 1em; background-size: 1em;
background-repeat: no-repeat; background-repeat: no-repeat;
text-indent: -9999px; text-indent: -9999px;
background-position: 50%, 50%; background-position: 50%, 50%;
background-size: contain; background-size: contain;
} }
span.emoji-sizer { span.emoji-sizer {
line-height: 0.81em; line-height: 0.81em;
font-size: 1em; font-size: 1em;
margin: -2px 0; margin: -2px 0;
} }
span.emoji-outer { span.emoji-outer {
display: -moz-inline-box; display: -moz-inline-box;
display: inline-block; display: inline-block;
*display: inline; *display: inline;
height: 1em; height: 1em;
width: 1em; width: 1em;
} }
span.emoji-inner { span.emoji-inner {
display: -moz-inline-box; display: -moz-inline-box;
display: inline-block; display: inline-block;
text-indent: -9999px; text-indent: -9999px;
width: 100%; width: 100%;
height: 100%; height: 100%;
vertical-align: baseline; vertical-align: baseline;
*vertical-align: auto; *vertical-align: auto;
*zoom: 1; *zoom: 1;
} }
img.emoji { img.emoji {
width: 1em; width: 1em;
height: 1em; height: 1em;
} }
img.emoji.small { img.emoji.small {
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
} }
img.emoji.medium { img.emoji.medium {
width: 1.5em; width: 1.5em;
height: 1.5em; height: 1.5em;
} }
img.emoji.large { img.emoji.large {
width: 1.75em; width: 1.75em;
height: 1.75em; height: 1.75em;
} }
img.emoji.jumbo { img.emoji.jumbo {
width: 2em; width: 2em;
height: 2em; height: 2em;
} }
// we need these, or we'll make conversation items too big in the left-nav // we need these, or we'll make conversation items too big in the left-nav
.conversations img.emoji.small { .conversations img.emoji.small {
width: 1em; width: 1em;
height: 1em; height: 1em;
} }
.conversations img.emoji.medium { .conversations img.emoji.medium {
width: 1em; width: 1em;
height: 1em; height: 1em;
} }
.conversations img.emoji.large { .conversations img.emoji.large {
width: 1em; width: 1em;
height: 1em; height: 1em;
} }
.conversations img.emoji.jumbo { .conversations img.emoji.jumbo {
width: 1em; width: 1em;
height: 1em; height: 1em;
} }
button.emoji { button.emoji {
@ -96,8 +96,9 @@ button.emoji {
@include color-svg('../images/smile.svg', $grey); @include color-svg('../images/smile.svg', $grey);
} }
&:focus, &:hover { &:focus,
opacity: 1.0; &:hover {
opacity: 1;
} }
} }
@ -105,9 +106,10 @@ button.emoji {
@import '../node_modules/emoji-panel/lib/emoji-panel-apple-32.css'; @import '../node_modules/emoji-panel/lib/emoji-panel-apple-32.css';
@font-face { @font-face {
font-family: 'apple-category'; font-family: 'apple-category';
src: url(../node_modules/emoji-panel/lib/asset/apple.ttf) format("truetype"); src: url(../node_modules/emoji-panel/lib/asset/apple.ttf) format('truetype');
font-weight: normal; font-weight: normal;
font-style: normal; } font-style: normal;
}
.emoji-panel-container { .emoji-panel-container {
height: 0px; height: 0px;

105
stylesheets/_global.scss
View file

@ -19,7 +19,7 @@ body {
.clearfix:before, .clearfix:before,
.clearfix:after { .clearfix:after {
display: table; display: table;
content: " "; content: ' ';
} }
.clearfix:after { .clearfix:after {
clear: both; clear: both;
@ -67,8 +67,9 @@ button.grey {
box-shadow: 0 0 10px -3px rgba($grey, 0.7); box-shadow: 0 0 10px -3px rgba($grey, 0.7);
} }
&[disabled=disabled] { &[disabled='disabled'] {
&, &:hover { &,
&:hover {
opacity: 0.5; opacity: 0.5;
box-shadow: none; box-shadow: none;
cursor: default; cursor: default;
@ -76,7 +77,9 @@ button.grey {
} }
} }
a { color: $blue; } a {
color: $blue;
}
button.back { button.back {
@include header-icon-black('../images/back.svg'); @include header-icon-black('../images/back.svg');
@ -88,9 +91,8 @@ button.hamburger {
@include header-icon-black('../images/menu.svg'); @include header-icon-black('../images/menu.svg');
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 10px; width: 10px;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
@ -98,11 +100,11 @@ button.hamburger {
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.15); background: rgba(0, 0, 0, 0.15);
border-radius: $border-radius; border-radius: $border-radius;
&:hover { &:hover {
background: rgba(0,0,0,0.25); background: rgba(0, 0, 0, 0.25);
} }
} }
@ -161,7 +163,7 @@ button.hamburger {
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: white; background-color: white;
box-shadow: 0 0 1px 1px rgba(0,0,0, 0.2); box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
li { li {
display: block; display: block;
@ -199,12 +201,13 @@ button.hamburger {
transform: rotateZ(-45deg); transform: rotateZ(-45deg);
} }
&:focus, &:hover { &:focus,
opacity: 1.0; &:hover {
opacity: 1;
} }
} }
input[type=file] { input[type='file'] {
display: none; display: none;
position: absolute; position: absolute;
width: 100%; width: 100%;
@ -247,7 +250,8 @@ $avatar-size: 44px;
padding: 2px 0px 0px 2px; padding: 2px 0px 0px 2px;
} }
.file-input .thumbnail, .thumbnail .avatar, .file-input .thumbnail,
.thumbnail .avatar,
img { img {
height: 54px; height: 54px;
width: 54px; width: 54px;
@ -282,7 +286,8 @@ $avatar-size: 44px;
.members .contact { .members .contact {
box-shadow: none; box-shadow: none;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
.last-message, .last-timestamp { .last-message,
.last-timestamp {
display: none; display: none;
} }
} }
@ -319,7 +324,7 @@ $avatar-size: 44px;
border-radius: $border-radius; border-radius: $border-radius;
background-color: $blue; background-color: $blue;
color: white; color: white;
border: solid 1px rgba(255,255,255,0.6); border: solid 1px rgba(255, 255, 255, 0.6);
} }
} }
.inactive .contact.selected { .inactive .contact.selected {
@ -330,7 +335,7 @@ $avatar-size: 44px;
padding: 12px; padding: 12px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
background: rgba(255,255,255,0.6); background: rgba(255, 255, 255, 0.6);
margin: 1px; margin: 1px;
&.selected { &.selected {
@ -416,15 +421,14 @@ $avatar-size: 44px;
} }
.verified-icon { .verified-icon {
@include color-svg('../images/verified-check.svg', $grey); @include color-svg('../images/verified-check.svg', $grey);
display: inline-block; display: inline-block;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
vertical-align: text-bottom; vertical-align: text-bottom;
} }
} }
.recipients-input { .recipients-input {
position: relative; position: relative;
@ -475,7 +479,6 @@ $avatar-size: 44px;
img { img {
max-width: 100%; max-width: 100%;
} }
} }
.new-conversation .recipients-input .recipients::before { .new-conversation .recipients-input .recipients::before {
content: 'To: '; content: 'To: ';
@ -489,7 +492,7 @@ $avatar-size: 44px;
&::before { &::before {
display: block; display: block;
margin: 0px auto; margin: 0px auto;
content: " "; content: ' ';
height: $loading-height; height: $loading-height;
width: $loading-height; width: $loading-height;
border-radius: 2 * $loading-height; border-radius: 2 * $loading-height;
@ -499,7 +502,9 @@ $avatar-size: 44px;
} }
@keyframes rotate { @keyframes rotate {
to { transform: rotate(360deg); } to {
transform: rotate(360deg);
}
} }
} }
@ -522,14 +527,17 @@ $avatar-size: 44px;
} }
} }
input[type=text], input[type=search], textarea { input[type='text'],
&:active, &:focus { input[type='search'],
textarea {
&:active,
&:focus {
outline: 1px solid $blue; outline: 1px solid $blue;
} }
} }
.expiredAlert { .expiredAlert {
background: #F3F3A7; background: #f3f3a7;
padding: 10px; padding: 10px;
button { button {
@ -628,12 +636,12 @@ input[type=text], input[type=search], textarea {
} }
background: linear-gradient( background: linear-gradient(
to bottom, to bottom,
rgb(238,238,238) 0%, // (1 - 0.41) * 255 + 0.41 * 213 /* (1 - 0.41) * 255 + 0.41 * 213*/ rgb(238, 238, 238) 0%,
rgb(243,243,243) 12%, // (1 - 0.19) * 255 + 0.19 * 191 /* (1 - 0.19) * 255 + 0.19 * 191*/ rgb(243, 243, 243) 12%,
rgb(255,255,255) 27%, rgb(255, 255, 255) 27%,
rgb(255,255,255) 60%, rgb(255, 255, 255) 60%,
rgb(249,249,249) 85%, // (1 - 0.19) * 255 + 0.19 * 222 /* (1 - 0.19) * 255 + 0.19 * 222*/ rgb(249, 249, 249) 85%,
rgb(213,213,213) 100% // (1 - 0.27) * 255 + 0.27 * 98 /* (1 - 0.27) * 255 + 0.27 * 98 */ rgb(213, 213, 213) 100%
); );
display: flex; display: flex;
align-items: center; align-items: center;
@ -787,29 +795,29 @@ input[type=text], input[type=search], textarea {
// generic // generic
&.check-circle-outline { &.check-circle-outline {
@include color-svg('../images/check-circle-outline.svg', #DEDEDE); @include color-svg('../images/check-circle-outline.svg', #dedede);
} }
&.alert-outline { &.alert-outline {
@include color-svg('../images/alert-outline.svg', #DEDEDE); @include color-svg('../images/alert-outline.svg', #dedede);
} }
// import and export // import and export
&.folder-outline { &.folder-outline {
@include color-svg('../images/folder-outline.svg', #DEDEDE); @include color-svg('../images/folder-outline.svg', #dedede);
} }
&.import { &.import {
@include color-svg('../images/import.svg', #DEDEDE); @include color-svg('../images/import.svg', #dedede);
} }
&.export { &.export {
@include color-svg('../images/export.svg', #DEDEDE); @include color-svg('../images/export.svg', #dedede);
} }
// registration process // registration process
&.lead-pencil { &.lead-pencil {
@include color-svg('../images/lead-pencil.svg', #DEDEDE); @include color-svg('../images/lead-pencil.svg', #dedede);
} }
&.sync { &.sync {
@include color-svg('../images/sync.svg', #DEDEDE); @include color-svg('../images/sync.svg', #dedede);
} }
// delete // delete
@ -817,7 +825,7 @@ input[type=text], input[type=search], textarea {
@include color-svg('../images/alert-outline.svg', red); @include color-svg('../images/alert-outline.svg', red);
} }
&.delete { &.delete {
@include color-svg('../images/delete.svg', #DEDEDE); @include color-svg('../images/delete.svg', #dedede);
} }
} }
@ -838,7 +846,7 @@ input[type=text], input[type=search], textarea {
&.neutral { &.neutral {
color: black; color: black;
background: #DEDEDE; background: #dedede;
} }
&.destructive { &.destructive {
background: red; background: red;
@ -912,11 +920,16 @@ input[type=text], input[type=search], textarea {
//yellow border fix //yellow border fix
.inbox:focus { .inbox:focus {
outline: none; outline: none;
} }
.text-security .inbox { .text-security .inbox {
.name, .body, .last-message, .sender, .conversation-title, .number { .name,
-webkit-text-security: square; .body,
.last-message,
.sender,
.conversation-title,
.number {
-webkit-text-security: square;
} }
} }

9
stylesheets/_hourglass.scss
View file

@ -4,11 +4,16 @@
@include color-svg('../images/hourglass_full.svg', transparent); @include color-svg('../images/hourglass_full.svg', transparent);
background-size: 100%; background-size: 100%;
&, .sand, &:before, &:after { &,
.sand,
&:before,
&:after {
width: 13px; width: 13px;
height: 11px; height: 11px;
} }
.sand, &:before, &:after { .sand,
&:before,
&:after {
content: ''; content: '';
display: inline-block; display: inline-block;
position: absolute; position: absolute;

41
stylesheets/_index.scss
View file

@ -1,10 +1,13 @@
.conversation-stack, .conversation-stack,
.new-conversation, .inbox, .gutter { .new-conversation,
.inbox,
.gutter {
height: 100%; height: 100%;
} }
.expired { .expired {
.conversation-stack, .gutter { .conversation-stack,
.gutter {
height: calc(100% - 56px); height: calc(100% - 56px);
} }
} }
@ -36,7 +39,7 @@
padding-left: 2 * $button-height; padding-left: 2 * $button-height;
display: none; display: none;
.network-status-message{ .network-status-message {
h3 { h3 {
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
@ -79,7 +82,7 @@
color: white; color: white;
background-color: #999999; background-color: #999999;
transition: background-color 0.5s; transition: background-color 0.5s;
border-bottom: 1px solid rgba(0,0,0,0.2); border-bottom: 1px solid rgba(0, 0, 0, 0.2);
.avatar { .avatar {
margin-bottom: -30px; margin-bottom: -30px;
@ -94,7 +97,7 @@
.inactive .conversation-header { .inactive .conversation-header {
background-color: $grey_l !important; background-color: $grey_l !important;
color: $grey_d; color: $grey_d;
border-color: rgba(0,0,0,0.05); border-color: rgba(0, 0, 0, 0.05);
.verified-icon { .verified-icon {
@include color-svg('../images/verified-check.svg', $grey_d); @include color-svg('../images/verified-check.svg', $grey_d);
} }
@ -137,11 +140,11 @@ input.search {
background-size: $search-x-size; background-size: $search-x-size;
&.ltr { &.ltr {
background-position : right $search-padding-right center; background-position: right $search-padding-right center;
} }
&.rtl { &.rtl {
background-position : left $search-padding-left center; background-position: left $search-padding-left center;
} }
} }
@ -175,12 +178,11 @@ input.search {
} }
&.valid { &.valid {
opacity: 1.0 opacity: 1;
} }
} }
.index { .index {
.gutter .new-group-update-form { .gutter .new-group-update-form {
display: none; display: none;
padding: 0.5em; padding: 0.5em;
@ -198,15 +200,14 @@ input.search {
right: 12px; right: 12px;
color: $grey; color: $grey;
} }
} }
.conversations .unread .contact-details { .conversations .unread .contact-details {
.name, .name,
.last-message, .last-message,
.last-timestamp { .last-timestamp {
font-weight: bold; font-weight: bold;
} }
} }
.hint { .hint {
@ -226,7 +227,8 @@ input.search {
left: 302px; left: 302px;
width: 225px; width: 225px;
&:before, &:after { &:before,
&:after {
content: ' '; content: ' ';
display: block; display: block;
position: absolute; position: absolute;
@ -271,8 +273,11 @@ input.search {
color: white; color: white;
border: 2px dashed white; border: 2px dashed white;
overflow: visible; overflow: visible;
p { color: white; } p {
&:before, &:after { color: white;
}
&:before,
&:after {
content: ' '; content: ' ';
display: block; display: block;
position: absolute; position: absolute;

34
stylesheets/_ios.scss
View file

@ -1,5 +1,5 @@
$ios-header-border-color: rgba(0,0,0,0.05); $ios-header-border-color: rgba(0, 0, 0, 0.05);
$ios-border-color: rgba(0,0,0,0.1); $ios-border-color: rgba(0, 0, 0, 0.1);
.ios { .ios {
#header { #header {
@ -8,7 +8,9 @@ $ios-border-color: rgba(0,0,0,0.1);
border-width: 0 1px 1px 0; border-width: 0 1px 1px 0;
background-color: $grey_l; background-color: $grey_l;
color: $grey_d; color: $grey_d;
h1 { display: none; } h1 {
display: none;
}
} }
.gutter { .gutter {
border-right: 1px solid $ios-border-color; border-right: 1px solid $ios-border-color;
@ -37,11 +39,11 @@ $ios-border-color: rgba(0,0,0,0.1);
float: left; float: left;
padding: 15px; padding: 15px;
} }
input[type=text]:active, input[type='text']:active,
input[type=text]:focus, input[type='text']:focus,
input[type=search]:active, input[type='search']:active,
input[type=search]:focus, input[type='search']:focus,
input[type=search].active, input[type='search'].active,
form.active { form.active {
outline-offset: 0; outline-offset: 0;
outline: -webkit-focus-ring-color auto 5px; outline: -webkit-focus-ring-color auto 5px;
@ -54,7 +56,7 @@ $ios-border-color: rgba(0,0,0,0.1);
line-height: 34px; line-height: 34px;
background-color: #dddddd; background-color: #dddddd;
&.active.rtl { &.active.rtl {
background-position : left $search-padding-left-ios center; background-position: left $search-padding-left-ios center;
} }
} }
.conversation-header { .conversation-header {
@ -77,7 +79,9 @@ $ios-border-color: rgba(0,0,0,0.1);
} }
} }
.avatar { display: none; } .avatar {
display: none;
}
} }
.conversation .panel, .conversation .panel,
@ -299,7 +303,8 @@ $ios-border-color: rgba(0,0,0,0.1);
padding-top: 0px; padding-top: 0px;
padding-bottom: 5px; padding-bottom: 5px;
video, audio { video,
audio {
margin-bottom: 5px; margin-bottom: 5px;
} }
@ -325,7 +330,8 @@ $ios-border-color: rgba(0,0,0,0.1);
.tail-wrapper.with-tail { .tail-wrapper.with-tail {
position: relative; position: relative;
&:before, &:after { &:before,
&:after {
content: ''; content: '';
display: block; display: block;
border-radius: 20px; border-radius: 20px;
@ -379,7 +385,9 @@ $ios-border-color: rgba(0,0,0,0.1);
background-color: $blue; background-color: $blue;
} }
&, .body, a { &,
.body,
a {
@include invert-text-color; @include invert-text-color;
} }
} }

424
stylesheets/_mixins.scss
View file

@ -1,135 +1,341 @@
@mixin color-svg($svg, $color) { @mixin color-svg($svg, $color) {
-webkit-mask: url($svg) no-repeat center; -webkit-mask: url($svg) no-repeat center;
-webkit-mask-size: 100%; -webkit-mask-size: 100%;
background-color: $color; background-color: $color;
} }
@mixin header-icon-white($svg) { @mixin header-icon-white($svg) {
@include color-svg($svg, rgba(255,255,255, 0.8)); @include color-svg($svg, rgba(255, 255, 255, 0.8));
&:focus, &:hover { &:focus,
&:hover {
@include color-svg($svg, white); @include color-svg($svg, white);
} }
} }
@mixin header-icon-black($svg) { @mixin header-icon-black($svg) {
@include color-svg($svg, rgba(0,0,0, 0.5)); @include color-svg($svg, rgba(0, 0, 0, 0.5));
&:focus, &:hover { &:focus,
&:hover {
@include color-svg($svg, black); @include color-svg($svg, black);
} }
} }
@mixin avatar-colors { @mixin avatar-colors {
&.red { background-color: $material_red ; } &.red {
&.pink { background-color: $material_pink ; } background-color: $material_red;
&.purple { background-color: $material_purple ; } }
&.deep_purple { background-color: $material_deep_purple ; } &.pink {
&.indigo { background-color: $material_indigo ; } background-color: $material_pink;
&.blue { background-color: $material_blue ; } }
&.light_blue { background-color: $material_light_blue ; } &.purple {
&.cyan { background-color: $material_cyan ; } background-color: $material_purple;
&.teal { background-color: $material_teal ; } }
&.green { background-color: $material_green ; } &.deep_purple {
&.light_green { background-color: $material_light_green ; } background-color: $material_deep_purple;
&.orange { background-color: $material_orange ; } }
&.deep_orange { background-color: $material_deep_orange ; } &.indigo {
&.amber { background-color: $material_amber ; } background-color: $material_indigo;
&.blue_grey { background-color: $material_blue_grey ; } }
&.grey { background-color: #999999 ; } &.blue {
&.default { background-color: $blue ; } background-color: $material_blue;
}
&.light_blue {
background-color: $material_light_blue;
}
&.cyan {
background-color: $material_cyan;
}
&.teal {
background-color: $material_teal;
}
&.green {
background-color: $material_green;
}
&.light_green {
background-color: $material_light_green;
}
&.orange {
background-color: $material_orange;
}
&.deep_orange {
background-color: $material_deep_orange;
}
&.amber {
background-color: $material_amber;
}
&.blue_grey {
background-color: $material_blue_grey;
}
&.grey {
background-color: #999999;
}
&.default {
background-color: $blue;
}
} }
@mixin dark-avatar-colors { @mixin dark-avatar-colors {
&.red { background-color: $dark_material_red ; } &.red {
&.pink { background-color: $dark_material_pink ; } background-color: $dark_material_red;
&.purple { background-color: $dark_material_purple ; } }
&.deep_purple { background-color: $dark_material_deep_purple ; } &.pink {
&.indigo { background-color: $dark_material_indigo ; } background-color: $dark_material_pink;
&.blue { background-color: $dark_material_blue ; } }
&.light_blue { background-color: $dark_material_light_blue ; } &.purple {
&.cyan { background-color: $dark_material_cyan ; } background-color: $dark_material_purple;
&.teal { background-color: $dark_material_teal ; } }
&.green { background-color: $dark_material_green ; } &.deep_purple {
&.light_green { background-color: $dark_material_light_green ; } background-color: $dark_material_deep_purple;
&.orange { background-color: $dark_material_orange ; } }
&.deep_orange { background-color: $dark_material_deep_orange ; } &.indigo {
&.amber { background-color: $dark_material_amber ; } background-color: $dark_material_indigo;
&.blue_grey { background-color: $dark_material_blue_grey ; } }
&.grey { background-color: #666666 ; } &.blue {
&.default { background-color: $blue ; } background-color: $dark_material_blue;
}
&.light_blue {
background-color: $dark_material_light_blue;
}
&.cyan {
background-color: $dark_material_cyan;
}
&.teal {
background-color: $dark_material_teal;
}
&.green {
background-color: $dark_material_green;
}
&.light_green {
background-color: $dark_material_light_green;
}
&.orange {
background-color: $dark_material_orange;
}
&.deep_orange {
background-color: $dark_material_deep_orange;
}
&.amber {
background-color: $dark_material_amber;
}
&.blue_grey {
background-color: $dark_material_blue_grey;
}
&.grey {
background-color: #666666;
}
&.default {
background-color: $blue;
}
} }
@mixin twenty-percent-colors { @mixin twenty-percent-colors {
&.red { background-color: rgba($dark_material_red, 0.2) ; } &.red {
&.pink { background-color: rgba($dark_material_pink, 0.2) ; } background-color: rgba($dark_material_red, 0.2);
&.purple { background-color: rgba($dark_material_purple, 0.2) ; } }
&.deep_purple { background-color: rgba($dark_material_deep_purple, 0.2) ; } &.pink {
&.indigo { background-color: rgba($dark_material_indigo, 0.2) ; } background-color: rgba($dark_material_pink, 0.2);
&.blue { background-color: rgba($dark_material_blue, 0.2) ; } }
&.light_blue { background-color: rgba($dark_material_light_blue, 0.2) ; } &.purple {
&.cyan { background-color: rgba($dark_material_cyan, 0.2) ; } background-color: rgba($dark_material_purple, 0.2);
&.teal { background-color: rgba($dark_material_teal, 0.2) ; } }
&.green { background-color: rgba($dark_material_green, 0.2) ; } &.deep_purple {
&.light_green { background-color: rgba($dark_material_light_green, 0.2) ; } background-color: rgba($dark_material_deep_purple, 0.2);
&.orange { background-color: rgba($dark_material_orange, 0.2) ; } }
&.deep_orange { background-color: rgba($dark_material_deep_orange, 0.2) ; } &.indigo {
&.amber { background-color: rgba($dark_material_amber, 0.2) ; } background-color: rgba($dark_material_indigo, 0.2);
&.blue_grey { background-color: rgba($dark_material_blue_grey, 0.2) ; } }
&.grey { background-color: rgba(#666666, 0.2) ; } &.blue {
&.default { background-color: rgba($blue, 0.2) ; } background-color: rgba($dark_material_blue, 0.2);
}
&.light_blue {
background-color: rgba($dark_material_light_blue, 0.2);
}
&.cyan {
background-color: rgba($dark_material_cyan, 0.2);
}
&.teal {
background-color: rgba($dark_material_teal, 0.2);
}
&.green {
background-color: rgba($dark_material_green, 0.2);
}
&.light_green {
background-color: rgba($dark_material_light_green, 0.2);
}
&.orange {
background-color: rgba($dark_material_orange, 0.2);
}
&.deep_orange {
background-color: rgba($dark_material_deep_orange, 0.2);
}
&.amber {
background-color: rgba($dark_material_amber, 0.2);
}
&.blue_grey {
background-color: rgba($dark_material_blue_grey, 0.2);
}
&.grey {
background-color: rgba(#666666, 0.2);
}
&.default {
background-color: rgba($blue, 0.2);
}
} }
@mixin text-colors { @mixin text-colors {
&.red { color: $material_red ; } &.red {
&.pink { color: $material_pink ; } color: $material_red;
&.purple { color: $material_purple ; } }
&.deep_purple { color: $material_deep_purple ; } &.pink {
&.indigo { color: $material_indigo ; } color: $material_pink;
&.blue { color: $material_blue ; } }
&.light_blue { color: $material_light_blue ; } &.purple {
&.cyan { color: $material_cyan ; } color: $material_purple;
&.teal { color: $material_teal ; } }
&.green { color: $material_green ; } &.deep_purple {
&.light_green { color: $material_light_green ; } color: $material_deep_purple;
&.orange { color: $material_orange ; } }
&.deep_orange { color: $material_deep_orange ; } &.indigo {
&.amber { color: $material_amber ; } color: $material_indigo;
&.blue_grey { color: $material_blue_grey ; } }
&.grey { color: #999999 ; } &.blue {
&.default { color: $blue ; } color: $material_blue;
}
&.light_blue {
color: $material_light_blue;
}
&.cyan {
color: $material_cyan;
}
&.teal {
color: $material_teal;
}
&.green {
color: $material_green;
}
&.light_green {
color: $material_light_green;
}
&.orange {
color: $material_orange;
}
&.deep_orange {
color: $material_deep_orange;
}
&.amber {
color: $material_amber;
}
&.blue_grey {
color: $material_blue_grey;
}
&.grey {
color: #999999;
}
&.default {
color: $blue;
}
} }
// TODO: Deduplicate these! Can SASS functions generate property names? // TODO: Deduplicate these! Can SASS functions generate property names?
@mixin message-replies-colors { @mixin message-replies-colors {
&.red { border-left-color: $material_red ; } &.red {
&.pink { border-left-color: $material_pink ; } border-left-color: $material_red;
&.purple { border-left-color: $material_purple ; } }
&.deep_purple { border-left-color: $material_deep_purple ; } &.pink {
&.indigo { border-left-color: $material_indigo ; } border-left-color: $material_pink;
&.blue { border-left-color: $material_blue ; } }
&.light_blue { border-left-color: $material_light_blue ; } &.purple {
&.cyan { border-left-color: $material_cyan ; } border-left-color: $material_purple;
&.teal { border-left-color: $material_teal ; } }
&.green { border-left-color: $material_green ; } &.deep_purple {
&.light_green { border-left-color: $material_light_green ; } border-left-color: $material_deep_purple;
&.orange { border-left-color: $material_orange ; } }
&.deep_orange { border-left-color: $material_deep_orange ; } &.indigo {
&.amber { border-left-color: $material_amber ; } border-left-color: $material_indigo;
&.blue_grey { border-left-color: $material_blue_grey ; } }
&.grey { border-left-color: #999999 ; } &.blue {
&.default { border-left-color: $blue ; } border-left-color: $material_blue;
}
&.light_blue {
border-left-color: $material_light_blue;
}
&.cyan {
border-left-color: $material_cyan;
}
&.teal {
border-left-color: $material_teal;
}
&.green {
border-left-color: $material_green;
}
&.light_green {
border-left-color: $material_light_green;
}
&.orange {
border-left-color: $material_orange;
}
&.deep_orange {
border-left-color: $material_deep_orange;
}
&.amber {
border-left-color: $material_amber;
}
&.blue_grey {
border-left-color: $material_blue_grey;
}
&.grey {
border-left-color: #999999;
}
&.default {
border-left-color: $blue;
}
} }
@mixin dark-message-replies-colors { @mixin dark-message-replies-colors {
&.red { border-left-color: $dark_material_red ; } &.red {
&.pink { border-left-color: $dark_material_pink ; } border-left-color: $dark_material_red;
&.purple { border-left-color: $dark_material_purple ; } }
&.deep_purple { border-left-color: $dark_material_deep_purple ; } &.pink {
&.indigo { border-left-color: $dark_material_indigo ; } border-left-color: $dark_material_pink;
&.blue { border-left-color: $dark_material_blue ; } }
&.light_blue { border-left-color: $dark_material_light_blue ; } &.purple {
&.cyan { border-left-color: $dark_material_cyan ; } border-left-color: $dark_material_purple;
&.teal { border-left-color: $dark_material_teal ; } }
&.green { border-left-color: $dark_material_green ; } &.deep_purple {
&.light_green { border-left-color: $dark_material_light_green ; } border-left-color: $dark_material_deep_purple;
&.orange { border-left-color: $dark_material_orange ; } }
&.deep_orange { border-left-color: $dark_material_deep_orange ; } &.indigo {
&.amber { border-left-color: $dark_material_amber ; } border-left-color: $dark_material_indigo;
&.blue_grey { border-left-color: $dark_material_blue_grey ; } }
&.grey { border-left-color: #666666 ; } &.blue {
&.default { border-left-color: $blue ; } border-left-color: $dark_material_blue;
}
&.light_blue {
border-left-color: $dark_material_light_blue;
}
&.cyan {
border-left-color: $dark_material_cyan;
}
&.teal {
border-left-color: $dark_material_teal;
}
&.green {
border-left-color: $dark_material_green;
}
&.light_green {
border-left-color: $dark_material_light_green;
}
&.orange {
border-left-color: $dark_material_orange;
}
&.deep_orange {
border-left-color: $dark_material_deep_orange;
}
&.amber {
border-left-color: $dark_material_amber;
}
&.blue_grey {
border-left-color: $dark_material_blue_grey;
}
&.grey {
border-left-color: #666666;
}
&.default {
border-left-color: $blue;
}
} }
@mixin invert-text-color { @mixin invert-text-color {

2
stylesheets/_modal.scss
View file

@ -17,6 +17,6 @@
background: white; background: white;
border-radius: $border-radius; border-radius: $border-radius;
overflow: auto; overflow: auto;
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2); box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
} }
} }

72
stylesheets/_progress.scss
View file

@ -7,21 +7,75 @@
} }
} }
.progress-bar-striped { .progress-bar-striped {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, .75) 75%, transparent 75%, transparent); background-image: -webkit-linear-gradient(
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, .75) 75%, transparent 75%, transparent); 45deg,
background-image: linear-gradient(45deg, rgba(255, 255, 255, .75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, .75) 75%, transparent 75%, transparent); rgba(255, 255, 255, 0.75) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.75) 50%,
rgba(255, 255, 255, 0.75) 75%,
transparent 75%,
transparent
);
background-image: -o-linear-gradient(
45deg,
rgba(255, 255, 255, 0.75) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.75) 50%,
rgba(255, 255, 255, 0.75) 75%,
transparent 75%,
transparent
);
background-image: linear-gradient(
45deg,
rgba(255, 255, 255, 0.75) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.75) 50%,
rgba(255, 255, 255, 0.75) 75%,
transparent 75%,
transparent
);
-webkit-background-size: 40px 40px; -webkit-background-size: 40px 40px;
background-size: 40px 40px; background-size: 40px 40px;
} }
.progress-bar-striped { .progress-bar-striped {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, .75) 75%, transparent 75%, transparent); background-image: -webkit-linear-gradient(
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, .75) 75%, transparent 75%, transparent); 45deg,
background-image: linear-gradient(45deg, rgba(255, 255, 255, .75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, .75) 75%, transparent 75%, transparent); rgba(255, 255, 255, 0.75) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.75) 50%,
rgba(255, 255, 255, 0.75) 75%,
transparent 75%,
transparent
);
background-image: -o-linear-gradient(
45deg,
rgba(255, 255, 255, 0.75) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.75) 50%,
rgba(255, 255, 255, 0.75) 75%,
transparent 75%,
transparent
);
background-image: linear-gradient(
45deg,
rgba(255, 255, 255, 0.75) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.75) 50%,
rgba(255, 255, 255, 0.75) 75%,
transparent 75%,
transparent
);
} }
.progress-bar.active { .progress-bar.active {
-webkit-animation: progress-bar-stripes 2s linear infinite; -webkit-animation: progress-bar-stripes 2s linear infinite;
-o-animation: progress-bar-stripes 2s linear infinite; -o-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite; animation: progress-bar-stripes 2s linear infinite;
} }
.bar-container { .bar-container {

30
stylesheets/_recorder.scss
View file

@ -10,8 +10,9 @@
padding: 0; padding: 0;
border: none; border: none;
&:focus, &:hover { &:focus,
opacity: 1.0; &:hover {
opacity: 1;
} }
&:before { &:before {
@ -36,8 +37,9 @@
text-align: center; text-align: center;
padding: 0; padding: 0;
&:focus, &:hover { &:focus,
opacity: 1.0; &:hover {
opacity: 1;
} }
.icon { .icon {
@ -51,14 +53,18 @@
background: lighten($green, 20%); background: lighten($green, 20%);
border: 1px solid $green; border: 1px solid $green;
.icon { @include color-svg('../images/check.svg', $green); } .icon {
@include color-svg('../images/check.svg', $green);
}
} }
.close { .close {
background: lighten($red, 20%); background: lighten($red, 20%);
border: 1px solid $red; border: 1px solid $red;
.icon { @include color-svg('../images/x.svg', $red); } .icon {
@include color-svg('../images/x.svg', $red);
}
} }
.time { .time {
@ -68,9 +74,15 @@
padding: 0 10px; padding: 0 10px;
@keyframes pulse { @keyframes pulse {
0% { opacity:0; } 0% {
50% { opacity:1; } opacity: 0;
100% { opacity:0; } }
50% {
opacity: 1;
}
100% {
opacity: 0;
}
} }
&::before { &::before {

10
stylesheets/_settings.scss
View file

@ -23,13 +23,13 @@
margin: 0 0 20px 20px; margin: 0 0 20px 20px;
} }
.synced_at { .synced_at {
font-size: $font-size-small; font-size: $font-size-small;
color: $grey; color: $grey;
} }
.sync_failed { .sync_failed {
display: none; display: none;
font-size: $font-size-small; font-size: $font-size-small;
color: red; color: red;
} }
} }
.clear-data-settings { .clear-data-settings {

62
stylesheets/_variables.scss
View file

@ -9,8 +9,8 @@ $grey_l3: darken($grey_l, 20%);
$grey_l4: darken($grey_l, 40%); $grey_l4: darken($grey_l, 40%);
$grey: #616161; $grey: #616161;
$grey_d: #454545; $grey_d: #454545;
$green: #47D647; $green: #47d647;
$red: #EF8989; $red: #ef8989;
$z-index-modal: 100; $z-index-modal: 100;
@ -55,37 +55,37 @@ $error-icon-size: 24px;
$font-size: 14px; $font-size: 14px;
$font-size-small: (13/14) + em; $font-size-small: (13/14) + em;
$material_red: #EF5350; $material_red: #ef5350;
$material_pink: #EC407A; $material_pink: #ec407a;
$material_purple: #AB47BC; $material_purple: #ab47bc;
$material_deep_purple: #7E57C2; $material_deep_purple: #7e57c2;
$material_indigo: #5C6BC0; $material_indigo: #5c6bc0;
$material_blue: #2196F3; $material_blue: #2196f3;
$material_light_blue: #03A9F4; $material_light_blue: #03a9f4;
$material_cyan: #00BCD4; $material_cyan: #00bcd4;
$material_teal: #009688; $material_teal: #009688;
$material_green: #4CAF50; $material_green: #4caf50;
$material_light_green: #7CB342; $material_light_green: #7cb342;
$material_orange: #FF9800; $material_orange: #ff9800;
$material_deep_orange: #FF5722; $material_deep_orange: #ff5722;
$material_amber: #FFB300; $material_amber: #ffb300;
$material_blue_grey: #607D8B; $material_blue_grey: #607d8b;
$dark_material_red: #D32F2F; $dark_material_red: #d32f2f;
$dark_material_pink: #C2185B; $dark_material_pink: #c2185b;
$dark_material_purple: #7B1FA2; $dark_material_purple: #7b1fa2;
$dark_material_deep_purple: #512DA8; $dark_material_deep_purple: #512da8;
$dark_material_indigo: #303F9F; $dark_material_indigo: #303f9f;
$dark_material_blue: #1976D2; $dark_material_blue: #1976d2;
$dark_material_light_blue: #0288D1; $dark_material_light_blue: #0288d1;
$dark_material_cyan: #0097A7; $dark_material_cyan: #0097a7;
$dark_material_teal: #00796B; $dark_material_teal: #00796b;
$dark_material_green: #388E3C; $dark_material_green: #388e3c;
$dark_material_light_green: #689F38; $dark_material_light_green: #689f38;
$dark_material_orange: #F57C00; $dark_material_orange: #f57c00;
$dark_material_deep_orange: #E64A19; $dark_material_deep_orange: #e64a19;
$dark_material_amber: #FFA000; $dark_material_amber: #ffa000;
$dark_material_blue_grey: #455A64; $dark_material_blue_grey: #455a64;
// Android // Android
$android-bubble-padding-horizontal: 12px; $android-bubble-padding-horizontal: 12px;

58
stylesheets/android-dark.scss
View file

@ -3,7 +3,7 @@ $grey-dark_l2: darken($grey-dark, 4%);
$grey-dark_l3: darken($grey-dark_l2, 7%); $grey-dark_l3: darken($grey-dark_l2, 7%);
$grey-dark_l4: darken($grey-dark_l3, 8%); $grey-dark_l4: darken($grey-dark_l3, 8%);
$button-dark: #ccc; $button-dark: #ccc;
$text-dark: #CCCCCC; $text-dark: #cccccc;
$text-dark_l2: darken($text-dark, 30%); $text-dark_l2: darken($text-dark, 30%);
.android-dark { .android-dark {
@ -14,7 +14,9 @@ $text-dark_l2: darken($text-dark, 30%);
background-color: $grey-dark; background-color: $grey-dark;
} }
color: $text-dark; color: $text-dark;
a { color: #57a5e5; } a {
color: #57a5e5;
}
hr { hr {
border-color: $grey-dark; border-color: $grey-dark;
} }
@ -40,7 +42,9 @@ $text-dark_l2: darken($text-dark, 30%);
background-color: darken($button-dark, 8%); background-color: darken($button-dark, 8%);
} }
} }
.message-detail, .message-container, .conversation, .message-detail,
.message-container,
.conversation,
.discussion-container { .discussion-container {
background-color: $grey-dark_l3; background-color: $grey-dark_l3;
} }
@ -87,10 +91,12 @@ $text-dark_l2: darken($text-dark, 30%);
.contact-details .number { .contact-details .number {
color: $text-dark_l2; color: $text-dark_l2;
.verified-icon { .verified-icon {
@include color-svg('../images/verified-check.svg', $text-dark_l2); @include color-svg('../images/verified-check.svg', $text-dark_l2);
} }
} }
.group-member-list .members .contact, .new-group-update .members .contact, .attachment-previews img { .group-member-list .members .contact,
.new-group-update .members .contact,
.attachment-previews img {
background-color: $grey-dark_l3; background-color: $grey-dark_l3;
border-color: $grey-dark; border-color: $grey-dark;
} }
@ -100,7 +106,9 @@ $text-dark_l2: darken($text-dark, 30%);
.conversation .conversation-loading-screen { .conversation .conversation-loading-screen {
background-color: $grey-dark_l3; background-color: $grey-dark_l3;
} }
.avatar, .conversation-header, .bubble { .avatar,
.conversation-header,
.bubble {
@include dark-avatar-colors; @include dark-avatar-colors;
} }
.message-list .advisory { .message-list .advisory {
@ -146,7 +154,7 @@ $text-dark_l2: darken($text-dark, 30%);
transform: rotateZ(-45deg); transform: rotateZ(-45deg);
} }
.capture-audio .microphone:before { .capture-audio .microphone:before {
@include color-svg('../images/microphone.svg', white); @include color-svg('../images/microphone.svg', white);
} }
.conversations { .conversations {
background-color: $grey-dark_l2; background-color: $grey-dark_l2;
@ -166,7 +174,8 @@ $text-dark_l2: darken($text-dark, 30%);
background-color: $grey-dark_l3; background-color: $grey-dark_l3;
border-color: $grey-dark_l2; border-color: $grey-dark_l2;
@include invert-text-color; @include invert-text-color;
&.active.ltr, &.active.rtl { &.active.ltr,
&.active.rtl {
background-image: url('../images/x_white.svg'); background-image: url('../images/x_white.svg');
} }
} }
@ -189,7 +198,12 @@ $text-dark_l2: darken($text-dark, 30%);
} }
.incoming .bubble { .incoming .bubble {
.sender, .content, .body, .meta, a, .fileView { .sender,
.content,
.body,
.meta,
a,
.fileView {
@include invert-text-color; @include invert-text-color;
} }
.content { .content {
@ -199,7 +213,7 @@ $text-dark_l2: darken($text-dark, 30%);
} }
} }
.incoming .bubble .fileView .icon{ .incoming .bubble .fileView .icon {
@include color-svg('../images/file.svg', white); @include color-svg('../images/file.svg', white);
&.audio { &.audio {
@include color-svg('../images/audio.svg', white); @include color-svg('../images/audio.svg', white);
@ -213,15 +227,15 @@ $text-dark_l2: darken($text-dark, 30%);
} }
.outgoing .bubble .fileView .icon { .outgoing .bubble .fileView .icon {
@include color-svg('../images/file.svg', #CCCCCC); @include color-svg('../images/file.svg', #cccccc);
&.audio { &.audio {
@include color-svg('../images/audio.svg', #CCCCCC); @include color-svg('../images/audio.svg', #cccccc);
} }
&.video { &.video {
@include color-svg('../images/video.svg', #CCCCCC); @include color-svg('../images/video.svg', #cccccc);
} }
&.voice { &.voice {
@include color-svg('../images/voice.svg', #CCCCCC); @include color-svg('../images/voice.svg', #cccccc);
} }
} }
@ -260,10 +274,10 @@ $text-dark_l2: darken($text-dark, 30%);
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.15); background: rgba(255, 255, 255, 0.15);
&:hover { &:hover {
background: rgba(255,255,255,0.25); background: rgba(255, 255, 255, 0.25);
} }
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
@ -275,7 +289,7 @@ $text-dark_l2: darken($text-dark, 30%);
.message-list .last-seen-indicator-view { .message-list .last-seen-indicator-view {
.bar { .bar {
border-top: 1px solid rgba(255, 255, 255, .0625); border-top: 1px solid rgba(255, 255, 255, 0.0625);
border-bottom: 1px solid rgba(0, 0, 0, 0.15); border-bottom: 1px solid rgba(0, 0, 0, 0.15);
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
@ -294,17 +308,17 @@ $text-dark_l2: darken($text-dark, 30%);
@include color-svg('../images/down.svg', black); @include color-svg('../images/down.svg', black);
} }
.icon:hover { .icon:hover {
background-color: white; background-color: white;
} }
&.new-messages { &.new-messages {
background-color: $blue; background-color: $blue;
.icon { .icon {
@include color-svg('../images/down.svg', white); @include color-svg('../images/down.svg', white);
} }
&:hover { &:hover {
background-color: #1472bd; background-color: #1472bd;
} }
} }
} }
} }

34
stylesheets/manifest.scss
View file

@ -1,24 +1,24 @@
// Global Settings, Variables, and Mixins // Global Settings, Variables, and Mixins
@import 'variables'; @import 'variables';
@import 'mixins'; @import 'mixins';
@import 'global'; @import 'global';
// Components // Components
@import 'progress'; @import 'progress';
@import 'hourglass'; @import 'hourglass';
@import 'modal'; @import 'modal';
@import 'debugLog'; @import 'debugLog';
@import 'lightbox'; @import 'lightbox';
@import 'recorder'; @import 'recorder';
@import 'emoji'; @import 'emoji';
@import 'settings'; @import 'settings';
// Build the main view // Build the main view
@import 'index'; @import 'index';
@import 'conversation'; @import 'conversation';
@import 'ios'; @import 'ios';
@import 'android'; @import 'android';
@import 'android-dark'; @import 'android-dark';
// Installer // Installer
@import 'options'; @import 'options';

2
stylesheets/options.scss
View file

@ -3,7 +3,7 @@
@import 'progress'; @import 'progress';
.iti-flag { .iti-flag {
// override intlTelInput's flags image location // override intlTelInput's flags image location
background: url("../images/flags.png"); background: url('../images/flags.png');
} }
.intl-tel-input .country-list { .intl-tel-input .country-list {

89
tsconfig.json
View file

@ -1,54 +1,55 @@
{ {
"compilerOptions": { "compilerOptions": {
/* Basic Options */ // Basic Options
"target": "es2016", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */ "target": "es2016", // Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'.
"module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */ "module": "commonjs", // Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'.
"lib": [ /* Specify library files to be included in the compilation. */ // Specify library files to be included in the compilation.
"dom", // Required to access `window` "lib": [
"es2017", // Required by `@sindresorhus/is` "dom", // Required to access `window`
"es2017" // Required by `@sindresorhus/is`
], ],
// "allowJs": true, /* Allow javascript files to be compiled. */ // "allowJs": true, // Allow javascript files to be compiled.
// "checkJs": true, /* Report errors in .js files. */ // "checkJs": true, // Report errors in .js files.
"jsx": "react", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ "jsx": "react", // Specify JSX code generation: 'preserve', 'react-native', or 'react'.
// "declaration": true, /* Generates corresponding '.d.ts' file. */ // "declaration": true, // Generates corresponding '.d.ts' file.
// "sourceMap": true, /* Generates corresponding '.map' file. */ // "sourceMap": true, // Generates corresponding '.map' file.
// "outFile": "./", /* Concatenate and emit output to single file. */ // "outFile": "./", // Concatenate and emit output to single file.
// "outDir": "./", /* Redirect output structure to the directory. */ // "outDir": "./", // Redirect output structure to the directory.
"rootDir": "./ts", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ "rootDir": "./ts", // Specify the root directory of input files. Use to control the output directory structure with --outDir.
// "removeComments": true, /* Do not emit comments to output. */ // "removeComments": true, // Do not emit comments to output.
// "noEmit": true, /* Do not emit outputs. */ // "noEmit": true, // Do not emit outputs.
// "importHelpers": true, /* Import emit helpers from 'tslib'. */ // "importHelpers": true, // Import emit helpers from 'tslib'.
// "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ // "downlevelIteration": true, // Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'.
// "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ // "isolatedModules": true, // Transpile each file as a separate module (similar to 'ts.transpileModule').
/* Strict Type-Checking Options */ // Strict Type-Checking Options
"strict": true, /* Enable all strict type-checking options. */ "strict": true, // Enable all strict type-checking options.
/* Additional Checks */ // Additional Checks
"noUnusedLocals": true, /* Report errors on unused locals. */ "noUnusedLocals": true, // Report errors on unused locals.
"noUnusedParameters": true, /* Report errors on unused parameters. */ "noUnusedParameters": true, // Report errors on unused parameters.
"noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ "noImplicitReturns": true, // Report error when not all code paths in function return a value.
"noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ "noFallthroughCasesInSwitch": true, // Report errors for fallthrough cases in switch statement.
/* Module Resolution Options */ // Module Resolution Options
"moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ "moduleResolution": "node", // Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6).
// "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ // "baseUrl": "./", // Base directory to resolve non-absolute module names.
// "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ // "paths": {}, // A series of entries which re-map imports to lookup locations relative to the 'baseUrl'.
// "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ // "rootDirs": [], // List of root folders whose combined content represents the structure of the project at runtime.
// "typeRoots": [], /* List of folders to include type definitions from. */ // "typeRoots": [], // List of folders to include type definitions from.
// "types": [], /* Type declaration files to be included in compilation. */ // "types": [], // Type declaration files to be included in compilation.
// "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ // "allowSyntheticDefaultImports": true, // Allow default imports from modules with no default export. This does not affect code emit, just typechecking.
"esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ "esModuleInterop": true // Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'.
// "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ // "preserveSymlinks": true, // Do not resolve the real path of symlinks.
/* Source Map Options */ // Source Map Options
// "sourceRoot": "./", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ // "sourceRoot": "./", // Specify the location where debugger should locate TypeScript files instead of source locations.
// "mapRoot": "./", /* Specify the location where debugger should locate map files instead of generated locations. */ // "mapRoot": "./", // Specify the location where debugger should locate map files instead of generated locations.
// "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ // "inlineSourceMap": true, // Emit a single file with source maps instead of having a separate file.
// "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ // "inlineSources": true, // Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set.
/* Experimental Options */ // Experimental Options
// "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ // "experimentalDecorators": true, // Enables experimental support for ES7 decorators.
// "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ // "emitDecoratorMetadata": true, // Enables experimental support for emitting type metadata for decorators.
} }
} }

39
tslint.json
View file

@ -1,12 +1,16 @@
{ {
"defaultSeverity": "error", "defaultSeverity": "error",
"extends": [ "extends": ["tslint:recommended", "tslint-react"],
"tslint:recommended",
"tslint-react"
],
"jsRules": {}, "jsRules": {},
"rules": { "rules": {
"align": [true, "arguments", "elements", "members", "parameters", "statements"], "align": [
true,
"arguments",
"elements",
"members",
"parameters",
"statements"
],
"array-type": [true, "generic"], "array-type": [true, "generic"],
// Preferred by Prettier: // Preferred by Prettier:
@ -23,7 +27,7 @@
"linebreak-style": [true, "LF"], "linebreak-style": [true, "LF"],
// Ignore `import`s to allow Prettier formatting: // Ignore `import`s to allow Prettier formatting:
"max-line-length": [true, {"limit": 90, "ignore-pattern": "^import"}], "max-line-length": [true, { "limit": 90, "ignore-pattern": "^import" }],
"mocha-avoid-only": true, "mocha-avoid-only": true,
// Disabled until we can allow dynamically generated tests: // Disabled until we can allow dynamically generated tests:
@ -37,12 +41,21 @@
// Ignore import sources order until we can specify that we want ordering // Ignore import sources order until we can specify that we want ordering
// based on import name vs module name: // based on import name vs module name:
"ordered-imports": [true, { "ordered-imports": [
"import-sources-order": "any", true,
"named-imports-order": "case-insensitive" {
}], "import-sources-order": "any",
"named-imports-order": "case-insensitive"
}
],
"quotemark": [true, "single", "jsx-double", "avoid-template", "avoid-escape"], "quotemark": [
true,
"single",
"jsx-double",
"avoid-template",
"avoid-escape"
],
// Preferred by Prettier: // Preferred by Prettier:
"semicolon": [true, "always", "ignore-bound-class-methods"], "semicolon": [true, "always", "ignore-bound-class-methods"],
@ -62,7 +75,5 @@
} }
] ]
}, },
"rulesDirectory": [ "rulesDirectory": ["node_modules/tslint-microsoft-contrib"]
"node_modules/tslint-microsoft-contrib"
]
} }