Browse Source

Add a View Markdown option for topics and comments

merge-requests/101/merge
Bauke 5 years ago
committed by Deimos
parent
commit
0ad36ac143
  1. 1
      tildes/package.json
  2. 4
      tildes/scss/modules/_comment.scss
  3. 9
      tildes/scss/modules/_dropdown.scss
  4. 2
      tildes/scss/modules/_topic.scss
  5. 8
      tildes/scss/themes/_theme_base.scss
  6. 44
      tildes/static/js/behaviors/copy-button.js
  7. 22
      tildes/static/js/behaviors/dropdown-toggle.js
  8. 30
      tildes/tildes/templates/intercooler/markdown_source.jinja2
  9. 22
      tildes/tildes/templates/macros/comments.jinja2
  10. 23
      tildes/tildes/templates/topic.jinja2
  11. 12
      tildes/tildes/views/api/web/comment.py
  12. 12
      tildes/tildes/views/api/web/topic.py

1
tildes/package.json

@ -28,6 +28,7 @@
"globals": {
"$": "readonly",
"Intercooler": "readonly",
"Promise": "readonly",
"Tildes": "readonly"
}
},

4
tildes/scss/modules/_comment.scss

@ -174,6 +174,10 @@
}
}
.comment .form-markdown-source {
padding-left: 0.4rem;
}
.is-comment-by-op {
> .comment-itself {
margin-left: -2px;

9
tildes/scss/modules/_dropdown.scss

@ -4,5 +4,14 @@
.dropdown {
.menu {
animation: none;
.btn-post-action {
justify-content: left;
width: 100%;
}
}
&-toggle.btn-post-action {
height: auto;
}
}

2
tildes/scss/modules/_topic.scss

@ -89,8 +89,6 @@
}
.btn-post-action {
width: 100%;
justify-content: left;
font-weight: normal;
}

8
tildes/scss/themes/_theme_base.scss

@ -340,6 +340,10 @@
}
}
.dropdown .menu .btn-post-action:hover {
background-color: map-get($theme, "background-secondary");
}
.empty-subtitle {
color: map-get($theme, "foreground-secondary");
}
@ -528,10 +532,6 @@
.topic-actions {
.btn-post-action {
color: map-get($theme, "link");
&:hover {
background-color: map-get($theme, "background-secondary");
}
}
.btn-post-action-used {

44
tildes/static/js/behaviors/copy-button.js

@ -0,0 +1,44 @@
// Copyright (c) 2020 Tildes contributors <code@tildes.net>
// SPDX-License-Identifier: AGPL-3.0-or-later
$.onmount("[data-js-copy-button]", function() {
$(this).click(function(event) {
event.preventDefault();
var textToCopy;
// If there are multiple inputs or textareas in a form with a copy button, you
// can use `data-js-copy-target="#selector"` to specify which element should
// get copied for that button. If this isn't defined, whatever input/textarea
// element jQuery finds first in the form will be copied instead.
if ($(this).attr("data-js-copy-target")) {
var $targetField = $($(this).attr("data-js-copy-target"));
$targetField.select();
textToCopy = $targetField.val();
} else {
var $parentForm = $(this).closest("form");
var $firstFoundField = $parentForm.find("input,textarea").first();
$firstFoundField.select();
textToCopy = $firstFoundField.val();
}
Tildes.writeToClipboard(textToCopy);
});
});
Tildes.writeToClipboard = function(text) {
// Minimal polyfill for writing to clipboard, by Lucas Garron
// https://gist.github.com/lgarron/d1dee380f4ed9d825ca7
return new Promise(function(resolve, reject) {
var success = false;
function listener(event) {
event.clipboardData.setData("text/plain", text);
event.preventDefault();
success = true;
}
document.addEventListener("copy", listener);
document.execCommand("copy");
document.removeEventListener("copy", listener);
success ? resolve() : reject();
});
};

22
tildes/static/js/behaviors/dropdown-toggle.js

@ -6,20 +6,34 @@
// with the dropdown-toggle class so that this behavior is always applied to dropdowns.
$.onmount(".dropdown-toggle", function() {
$(this).click(function() {
var $this = $(this);
// Spectre.css's dropdown menus use the focus event to display the menu,
// but Safari and Firefox on OSX don't give focus to a <button> when it's
// clicked. More info:
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
// This should make the behavior consistent across all browsers
$(this).focus();
$this.focus();
$(this).toggleClass("active");
$this.toggleClass("active");
// If toggleClass removed the class, that means that the click was on an
// already-active button, so we should hide the menu (via losing focus).
if (!$(this).hasClass("active")) {
$(this).blur();
if (!$this.hasClass("active")) {
$this.blur();
return;
}
// If the menu ends up off the left edge of the screen, remove the
// .dropdown-right class so that it's aligned to the left edge of the button
// instead of the right edge
var $menu = $this.siblings(".menu").first();
$this
.parent()
.toggleClass(
"dropdown-right",
$this.offset().left + $this.width() - $menu.width() > 0
);
});
$(this).blur(function() {

30
tildes/tildes/templates/intercooler/markdown_source.jinja2

@ -0,0 +1,30 @@
{# Copyright (c) 2020 Tildes contributors <code@tildes.net> #}
{# SPDX-License-Identifier: AGPL-3.0-or-later #}
<form class="form-markdown-source">
<label class="form-label" for="markdown-source">
{% if post is topic %}
Topic Markdown (read-only)
{% elif post is comment %}
Comment Markdown (read-only)
{% endif %}
</label>
<textarea
class="form-input"
name="markdown-source"
placeholder="Text (Markdown)"
readonly
>{{ post.markdown }}</textarea>
<div class="form-buttons">
<button
class="btn btn-primary"
data-js-copy-button
type="button"
>Copy Markdown</button>
<button
class="btn btn-link"
data-js-cancel-button
type="button"
>Hide</button>
</div>
</form>

22
tildes/tildes/templates/macros/comments.jinja2

@ -201,7 +201,29 @@
>Reply</button>
</li>
{% endif %}
<li>
<div class="dropdown dropdown-right">
<button class="btn-post-action dropdown-toggle">
More...
<i class="icon icon-caret"></i>
</button>
<menu class="menu">
<li>
<button class="btn-post-action" name="markdown-source"
data-ic-get-from="{{ request.route_url(
'ic_comment',
comment_id36=comment.comment_id36,
) }}"
data-ic-swap-style="replace"
data-ic-target="#comment-{{ comment.comment_id36 }} .btn-post:first + .btn-post-settings"
>View Markdown</button>
</li>
</menu>
</div>
</li>
</menu>
<div class="btn-post-settings"></div>
{% endif %}
</div>
{% endmacro %}

23
tildes/tildes/templates/topic.jinja2

@ -172,6 +172,29 @@
{% if request.has_permission("remove", topic) %}
{{ post_action_toggle_button("remove", topic, topic.is_removed) }}
{% endif %}
{% if topic.is_text_type and request.has_permission("view_content", topic) %}
<li>
<div class="dropdown dropdown-right">
<button class="btn-post-action dropdown-toggle">
More...
<i class="icon icon-caret"></i>
</button>
<menu class="menu">
<li>
<button class="btn-post-action" name="markdown-source"
data-ic-get-from="{{ request.route_url(
'ic_topic',
topic_id36=topic.topic_id36,
) }}"
data-ic-swap-style="replace"
data-ic-target=".topic-full .btn-post:first + .btn-post-settings"
>View Markdown</button>
</li>
</menu>
</div>
</li>
{% endif %}
</menu>
<div class="btn-post-settings"></div>

12
tildes/tildes/views/api/web/comment.py

@ -428,3 +428,15 @@ def delete_comment_bookmark(request: Request) -> dict:
_mark_comment_read_from_interaction(request, comment)
return {"name": "bookmark", "subject": comment, "is_toggled": False}
@ic_view_config(
route_name="comment",
request_method="GET",
request_param="ic-trigger-name=markdown-source",
renderer="markdown_source.jinja2",
permission="view",
)
def get_comment_markdown_source(request: Request) -> dict:
"""Get the Markdown source for a comment with Intercooler."""
return {"post": request.context}

12
tildes/tildes/views/api/web/topic.py

@ -482,3 +482,15 @@ def delete_topic_ignore(request: Request) -> dict:
).delete(synchronize_session=False)
return {"name": "ignore", "subject": topic, "is_toggled": False}
@ic_view_config(
route_name="topic",
request_method="GET",
request_param="ic-trigger-name=markdown-source",
renderer="markdown_source.jinja2",
permission="view_content",
)
def get_topic_markdown_source(request: Request) -> dict:
"""Get the Markdown source for a topic with Intercooler."""
return {"post": request.context}
Loading…
Cancel
Save