Skip to content

Commit

Permalink
More work on properly showing a pencil icon to edit messages
Browse files Browse the repository at this point in the history 
updates #421
  • Loading branch information
@jcbrand
jcbrand committed Jul 19, 2018
1 parent 7784364 commit ffee3aa
Show file tree
Hide file tree
Showing 3 changed files with 84 additions and 55 deletions.
22 changes: 16 additions & 6 deletions css/converse.css
View file

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

94 changes: 51 additions & 43 deletions mockup/chatroom.html
View file
Expand Up @@ -53,15 +53,17 @@

<div class="message chat-msg">
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
<div class="chat-msg-content">
<span class="chat-msg-heading">
<div class="chat-msg-container">
<div class="chat-msg-heading">
<span class="chat-msg-author">Romeo Montague <span class="badge badge-primary">Developer</span></span>
<span class="chat-msg-time">15:31</span>
</span>
<span class="chat-msg-text">He jests at scars that never felt a wound.</span>
</div>
<div class="chat-msg-actions">
<button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div>
<div class="chat-msg-content">
<div class="chat-msg-text">He jests at scars that never felt a wound.</div>
<div class="chat-msg-actions">
<button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div>
</div>
</div>
</div>

Expand All @@ -75,63 +77,69 @@

<div class="message chat-msg">
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
<div class="chat-msg-content">
<span class="chat-msg-heading">
<div class="chat-msg-container">
<div class="chat-msg-heading">
<span class="chat-msg-author">Romeo Montague</span>
<span class="chat-msg-time">19:36</span>
</span>
<span class="chat-msg-text">
But, soft! what light through yonder window breaks?
</span>
</div>
<div class="chat-msg-actions">
<button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div>
<div class="chat-msg-content">
<div class="chat-msg-text">But, soft! what light through yonder window breaks?</div>
<div class="chat-msg-actions">
<button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div>
</div>
</div>
</div>
<div class="message chat-msg chat-msg-followup">
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
<div class="chat-msg-content">
<span class="chat-msg-heading">
<div class="chat-msg-container">
<div class="chat-msg-heading">
<span class="chat-msg-author">Romeo Montague</span>
<span class="chat-msg-time">19:36</span>
</span>
<span class="chat-msg-text">It is the east, and Juliet is the sun.</span>
</div>
<div class="chat-msg-actions">
<button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div>
<div class="chat-msg-content">
<div class="chat-msg-text">It is the east, and Juliet is the sun.</div>
<div class="chat-msg-actions">
<button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div>
</div>
</div>
</div>
<div class="message chat-msg chat-msg-followup">
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
<div class="chat-msg-content">
<span class="chat-msg-heading">
<div class="chat-msg-container">
<div class="chat-msg-heading">
<span class="chat-msg-author">Romeo Montague</span>
<span class="chat-msg-time">19:36</span>
</span>
<span class="chat-msg-text">Arise, fair sun, and kill the envious moon, Who is already sick and pale with grief</span>
</div>
<div class="chat-msg-actions">
<button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div>
<div class="chat-msg-content">
<div class="chat-msg-text">Arise, fair sun, and kill the envious moon, Who is already sick and pale with grief</div>
<div class="chat-msg-actions">
<button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div>
</div>
</div>
</div>

<div class="message chat-msg">
<canvas height="36" width="36" class="avatar"></canvas>
<div class="chat-msg-content">
<span class="chat-msg-heading">
<div class="chat-msg-container">
<div class="chat-msg-heading">
<span class="chat-msg-author">Juliet Capulet</span>
<span class="chat-msg-time">19:43</span>
</span>
<span class="chat-msg-text">
O Romeo, Romeo! wherefore art thou Romeo?
Deny thy father and refuse thy name;
Or, if thou wilt not, be but sworn my love,
And I'll no longer be a Capulet.
</span>
<div class="chat-msg-media"></div>
</div>
<div class="chat-msg-actions">
<button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div>
<div class="chat-msg-content">
<div class="chat-msg-text">
O Romeo, Romeo! wherefore art thou Romeo?
Deny thy father and refuse thy name;
Or, if thou wilt not, be but sworn my love,
And I'll no longer be a Capulet.
</div>
<div class="chat-msg-media"></div>
<div class="chat-msg-actions">
<button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div>
</div>
</div>
</div>

Expand Down
23 changes: 17 additions & 6 deletions sass/_messages.scss
View file
Expand Up @@ -72,10 +72,9 @@
}
&:hover {
background-color: rgba(0, 0, 0, 0.035);

.chat-msg-actions {
.chat-msg-action {
display: block;
opacity: 1;
}
}
}
Expand Down Expand Up @@ -105,10 +104,21 @@
whitespace: nowrap;
}
}
.chat-msg-content {
.chat-msg-container {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
margin-left: 0.5rem;
width: 100%;
}

.chat-msg-content {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
}
.chat-msg-edited {
cursor: pointer;
}
Expand All @@ -121,6 +131,7 @@
.chat-msg-text {
padding: 0;
color: $message-text-color;
width: 100%;
a {
word-wrap: break-word;
word-break: break-all;
Expand All @@ -146,7 +157,7 @@
font-size: $message-font-size;
padding: 0;
border: none;
display: none;
opacity: 0;
background: transparent;
cursor: pointer;
&:focus {
Expand All @@ -162,6 +173,7 @@
width: 36px;
}
.chat-msg-heading {
width: 100%;
margin-top: 0.5em;
padding-right: 0.25rem;
padding-bottom: 0.25rem;
Expand All @@ -184,7 +196,6 @@
display: block;

.chat-msg-heading {
float: left;
margin-top: 0;
padding-bottom: 0;
}
Expand All @@ -194,7 +205,7 @@
.avatar {
display: none;
}
.chat-msg-content {
.chat-msg-container {
margin-left: 2.75rem;
}
}
Expand Down

0 comments on commit ffee3aa

Please sign in to comment.