paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-06 23:13:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

message_edit: Modify css for hover over 'Copy' button.

Browse Source 
Replace background-image of copy button with an image
and change color on hover.
This commit is contained in:
Raghav Jajodia
2017-03-26 15:45:50 +05:30
committed by Tim Abbott
parent fd5ad3658d
commit 2bb632824e
6 changed files with 19 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
static/images/clippy.svg
View File

@@ -1,3 +1,3 @@
<svg height="1024" width="896" xmlns="http://www.w3.org/2000/svg">
<path d="M128 768h256v64H128v-64z m320-384H128v64h320v-64z m128 192V448L384 640l192 192V704h320V576H576z m-288-64H128v64h160v-64zM128 704h160v-64H128v64z m576 64h64v128c-1 18-7 33-19 45s-27 18-45 19H64c-35 0-64-29-64-64V192c0-35 29-64 64-64h192C256 57 313 0 384 0s128 57 128 128h192c35 0 64 29 64 64v320h-64V320H64v576h640V768zM128 256h512c0-35-29-64-64-64h-64c-35 0-64-29-64-64s-29-64-64-64-64 29-64 64-29 64-64 64h-64c-35 0-64 29-64 64z" />
<path fill="#777" d="M128 768h256v64H128v-64z m320-384H128v64h320v-64z m128 192V448L384 640l192 192V704h320V576H576z m-288-64H128v64h160v-64zM128 704h160v-64H128v64z m576 64h64v128c-1 18-7 33-19 45s-27 18-45 19H64c-35 0-64-29-64-64V192c0-35 29-64 64-64h192C256 57 313 0 384 0s128 57 128 128h192c35 0 64 29 64 64v320h-64V320H64v576h640V768zM128 256h512c0-35-29-64-64-64h-64c-35 0-64-29-64-64s-29-64-64-64-64 29-64 64-29 64-64 64h-64c-35 0-64 29-64 64z" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 519 B

After

Width:  |  Height:  |  Size: 531 B

3
static/images/clippy_hover.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg height="1024" width="896" xmlns="http://www.w3.org/2000/svg">
<path d="M128 768h256v64H128v-64z m320-384H128v64h320v-64z m128 192V448L384 640l192 192V704h320V576H576z m-288-64H128v64h160v-64zM128 704h160v-64H128v64z m576 64h64v128c-1 18-7 33-19 45s-27 18-45 19H64c-35 0-64-29-64-64V192c0-35 29-64 64-64h192C256 57 313 0 384 0s128 57 128 128h192c35 0 64 29 64 64v320h-64V320H64v576h640V768zM128 256h512c0-35-29-64-64-64h-64c-35 0-64-29-64-64s-29-64-64-64-64 29-64 64-29 64-64 64h-64c-35 0-64 29-64 64z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 519 B

5
static/js/message_edit.js
View File

@@ -201,11 +201,10 @@ function edit_message(row, raw_content) {
var message_edit_countdown_timer = row.find('.message_edit_countdown_timer');
var copy_message = row.find('.copy_message');
initClipboard(copy_message[0]);
if (editability === editability_types.NO) {
message_edit_content.prop("readonly", "readonly");
message_edit_topic.prop("readonly", "readonly");
initClipboard(copy_message[0]);
} else if (editability === editability_types.NO_LONGER) {
// You can currently only reach this state in non-streams. If that
// changes (e.g. if we stop allowing topics to be modified forever
@@ -213,10 +212,12 @@ function edit_message(row, raw_content) {
// row.find('input.message_edit_topic') as well.
message_edit_content.prop("readonly", "readonly");
message_edit_countdown_timer.text(i18n.t("View source"));
initClipboard(copy_message[0]);
} else if (editability === editability_types.TOPIC_ONLY) {
message_edit_content.prop("readonly", "readonly");
// Hint why you can edit the topic but not the message content
message_edit_countdown_timer.text(i18n.t("Topic editing only"));
initClipboard(copy_message[0]);
} else if (editability === editability_types.FULL) {
copy_message.remove();
composebox_typeahead.initialize_compose_typeahead("#message_edit_content", {emoji: true, stream: true});

6
static/js/ui_init.js
View File

@@ -222,12 +222,14 @@ $(function () {
$(this).closest(".message_row").find(".copy_message").hide();
});
$("body").on("mouseover", ".copy_message", function () {
$("body").on("mouseenter", ".copy_message", function () {
$(this).find('img#clipboard_image').attr("src", "/static/images/clippy_hover.svg");
$(this).show();
$(this).tooltip('show');
});
$("body").on("mouseout", ".copy_message", function () {
$("body").on("mouseleave", ".copy_message", function () {
$(this).find('img#clipboard_image').attr("src", "/static/images/clippy.svg");
$(this).tooltip('hide');
});

14
static/styles/zulip.css
View File

@@ -282,15 +282,11 @@ li,
.copy_message,
.copy_message:focus {
background-image: url('/static/images/clippy.svg');
background-size: contain;
background-repeat: no-repeat;
background-color: white;
background-position: center;
height: 20px;
width: 15px;
padding: 5px 10px;
border-radius: 2px;
border: none;
position: relative;
top: 32px;
left: -5px;
@@ -298,8 +294,12 @@ li,
display: block;
}
.copy_message:hover {
background-color: #dadada;
#clipboard_image {
height: inherit;
width: inherit;
max-width: inherit;
margin-top: inherit;
margin-left: -7px;
}
.btn-large {

1
static/templates/message_edit_form.handlebars
View File

@@ -17,6 +17,7 @@
<div class="control-group no-margin">
<div class="controls edit-controls">
<button class="btn pull-right copy_message" data-toggle="tooltip" title="{{t "Copy and close" }}" data-clipboard-target="#message_edit_content">
<img src="/static/images/clippy.svg" id="clipboard_image" />
</button>
<label class="edit-control-label" for="message_edit_topic">{{t "Content" }}</label>
<textarea class="message_edit_content" id="message_edit_content">{{content}}</textarea>