Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Emoji picker #1608

Merged
merged 7 commits into from Oct 30, 2017
Merged

Emoji picker #1608

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
40a7585
Add emoji button and popup panel
liliakai Oct 25, 2017
110f42a
Don't close emoji panel on click, do close on send
liliakai Oct 25, 2017
7778814
Make panel emojis bigger and higher resolution
liliakai Oct 25, 2017
29c4fba
Move paperclip button to the right of the microphone
liliakai Oct 25, 2017
e078427
Move emoji picker padding to inner container
liliakai Oct 25, 2017
77bf21d
Insert emojis at cursor position
liliakai Oct 27, 2017
181f091
A few visual tweaks to reduce visual complexity of emoji panel
scottnonnenberg Oct 30, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 4 additions & 2 deletions background.html
View file
Open in desktop
Expand Up @@ -198,7 +198,8 @@ <h3>{{ welcomeToSignal }}</h3>

<div class='bottom-bar' id='footer'>
<div class='emoji-panel-container'></div>
<form class='send clearfix'>
<div class='compose'>
<form class='send clearfix'>
<div class='attachment-previews'></div>
<div class='flex'>
<button class='emoji'></button>
Expand All @@ -214,7 +215,8 @@ <h3>{{ welcomeToSignal }}</h3>
<input type='file' class='file-input'>
</div>
</div>
</form>
</form>
</div>
</div>
</div>
</script>
Expand Down
6 changes: 5 additions & 1 deletion stylesheets/_conversation.scss
View file
Open in desktop
Expand Up @@ -661,9 +661,13 @@ span.status {
.bottom-bar {
box-sizing: content-box;
$button-width: 36px;
padding: 5px 5px 5px 0;
padding: 5px 0px 5px 0;
background: $grey_l;

.compose {
padding-right: 5px;
}

form.active {
outline: solid 1px $blue;
}
Expand Down
7 changes: 4 additions & 3 deletions stylesheets/_emoji.scss
View file
Open in desktop
Expand Up @@ -111,14 +111,15 @@ button.emoji {

.emoji-panel-container {
height: 0px;
.ep-container {
padding-bottom: 5px;
}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you want at least a pixel between the bottom of the scroll handle and the blue outline on the message field.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I prefer no buffer; I think it makes things cleaner. But we'll see what the team says when they get a chance to play with it!

.ep-e {
background-image: url('../node_modules/emoji-datasource/sheet_apple_64.png');
background-size: 1312px;
}
.ep-slide {
background-color: $blue;
}
.ep ::-webkit-scrollbar {
// matches what is set in _global.scss; needs !important to override emoji panel CSS
width: 10px !important;
}
}
8 changes: 5 additions & 3 deletions stylesheets/manifest.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.