Tag edit (#15173)
* tag edit * more * chop chop * spec * Apply suggestions from code review Co-authored-by: Michael Kohl <me@citizen428.net> * french translation * Fix I18n usage * Apply suggestions from code review Co-authored-by: Suzanne Aitchison <suzanne@forem.com> * lang Co-authored-by: Michael Kohl <me@citizen428.net> Co-authored-by: Michael Kohl <citizen428@forem.com> Co-authored-by: Suzanne Aitchison <suzanne@forem.com>
This commit is contained in:
ludwiczakpawel
GitHub
parent
cdedbc1588
commit
656cfcd655
9 changed files with 85 additions and 262 deletions
|
|
@ -255,17 +255,24 @@ textarea.crayons-textfield.crayons-textfield--ghost {
|
|||
|
||||
///////////////////////////////////////////////////
|
||||
.crayons-color-selector {
|
||||
--swatch-width: var(--su-6);
|
||||
--swatch-height: var(--su-6);
|
||||
@extend %form-styling;
|
||||
padding: calc(0.5em - var(--border-width)) 0.5em;
|
||||
height: 40px;
|
||||
|
||||
&::-webkit-color-swatch-wrapper {
|
||||
padding: 0;
|
||||
height: var(--su-6);
|
||||
width: var(--su-6);
|
||||
width: var(--swatch-width);
|
||||
height: var(--swatch-height);
|
||||
}
|
||||
|
||||
&::-webkit-color-swatch {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&--full {
|
||||
width: 100%;
|
||||
--swatch-width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,11 +7,9 @@
|
|||
@import 'dashboard';
|
||||
@import 'settings';
|
||||
@import 'podcast-episodes-show';
|
||||
@import 'user-profile-header';
|
||||
@import 'live';
|
||||
@import 'preact/sidebar-widget';
|
||||
@import 'preact/article-form';
|
||||
@import 'tag-edit';
|
||||
@import 'sidebar-data';
|
||||
@import 'video-collection';
|
||||
@import 'video-player';
|
||||
|
|
|
|||
|
|
@ -1,54 +0,0 @@
|
|||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
.tag-edit-form {
|
||||
margin-bottom: 5em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.tag-edit-container {
|
||||
margin-top: 1em;
|
||||
max-width: 50%;
|
||||
}
|
||||
.tag-form-field {
|
||||
margin-top: 10px;
|
||||
|
||||
br {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
}
|
||||
.tag-form-label {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.tag-form-text-field {
|
||||
height: 2em;
|
||||
width: 23em;
|
||||
text-align: left;
|
||||
overflow-wrap: break-word;
|
||||
font-size: 1em;
|
||||
resize: vertical;
|
||||
}
|
||||
.tag-area-text {
|
||||
height: 5em;
|
||||
}
|
||||
.tag-edit-submit {
|
||||
height: 2em;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 17px;
|
||||
border-radius: 3px;
|
||||
border: 2px solid var(--button-primary-bg-hover);
|
||||
background: var(--button-primary-bg);
|
||||
color: var(--button-primary-color);
|
||||
}
|
||||
.tag-edit-flash-success {
|
||||
color: white;
|
||||
background: #388019;
|
||||
padding: 15px;
|
||||
}
|
||||
.tag-edit-flash-error {
|
||||
color: white;
|
||||
background: $red;
|
||||
padding: 15px 15px 15px 40px;
|
||||
}
|
||||
|
|
@ -1,122 +0,0 @@
|
|||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
.user-profile-header {
|
||||
padding: calc(1.4vw + 8px) 0px;
|
||||
font-family: var(--ff-sans-serif);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: var(--card-bg);
|
||||
border-radius: 3px;
|
||||
@media screen and (min-width: 1100px) {
|
||||
padding: 25px 0px 11px;
|
||||
}
|
||||
&.podcast-header {
|
||||
background: rgb(5, 22, 32);
|
||||
text-align: center;
|
||||
padding: 70px 0px;
|
||||
color: white;
|
||||
h1 {
|
||||
.follow-action-button {
|
||||
font-size: 25px;
|
||||
display: block;
|
||||
margin: 10px auto;
|
||||
width: 100%;
|
||||
padding: 15px 0px;
|
||||
@media screen and (min-width: 950px) {
|
||||
vertical-align: 5px;
|
||||
display: inline-block;
|
||||
font-size: calc(1.5vw + 8px);
|
||||
width: 280px;
|
||||
padding: 3px 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-profile-header-container,
|
||||
.tag-or-query-header-container {
|
||||
max-width: 96%;
|
||||
margin: auto;
|
||||
overflow-y: auto;
|
||||
h1 {
|
||||
position: relative;
|
||||
img {
|
||||
height: 1.5em;
|
||||
width: 1.5em;
|
||||
vertical-align: -0.22em;
|
||||
margin-right: 0.15em;
|
||||
}
|
||||
}
|
||||
a {
|
||||
color: rgb(97, 97, 97);
|
||||
}
|
||||
.crayons-btn--outlined {
|
||||
background: white;
|
||||
}
|
||||
.profile-pic-wrapper {
|
||||
float: left;
|
||||
width: calc(14.5vw + 60px);
|
||||
max-width: 270px;
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
.profile-pic {
|
||||
width: calc(12.2vw + 50px);
|
||||
height: calc(12.2vw + 50px);
|
||||
border-radius: 200px;
|
||||
max-width: 220px;
|
||||
max-height: 220px;
|
||||
border: 4px solid white;
|
||||
margin-top: 2vw;
|
||||
background: no-repeat center center;
|
||||
background-size: cover;
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-metadata-details {
|
||||
width: 97%;
|
||||
overflow-y: auto;
|
||||
@media screen and (min-width: 1100px) {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
width: 370px;
|
||||
}
|
||||
.user-metadata-details-inner {
|
||||
padding: 8px 0px;
|
||||
margin-left: 5%;
|
||||
@media screen and (min-width: 430px) {
|
||||
font-size: 1.15em;
|
||||
padding: 15px 15px 15px 0;
|
||||
}
|
||||
@media screen and (min-width: 1100px) {
|
||||
position: absolute;
|
||||
top: 45%;
|
||||
transform: translateY(-45%);
|
||||
padding: 15px 15px 15px 0;
|
||||
}
|
||||
.row {
|
||||
padding: calc(5px + 0.2vw) 0px;
|
||||
display: inline-block;
|
||||
padding-left: 16px;
|
||||
width: 322px;
|
||||
max-width: 92%;
|
||||
}
|
||||
.key {
|
||||
font-size: 0.7em;
|
||||
font-weight: 800;
|
||||
margin-bottom: 2px;
|
||||
color: var(--card-color-tertiary);
|
||||
}
|
||||
.value {
|
||||
display: inline-block;
|
||||
font-size: 0.85em;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,73 +1,66 @@
|
|||
<% title t("views.tags.edit.meta.title", tag: @tag.name) %>
|
||||
|
||||
<div style="background-color:<%= @tag.bg_color_hex %>;color:<%= @tag.text_color_hex %>;">
|
||||
<div class="tag-or-query-header-container tag-edit-tag py-8 align-center">
|
||||
<h1><% t("views.tags.edit.heading_html", tag: link_to(@tag.name, URL.tag(@tag), style: "color: #{@tag.text_color_hex};text-decoration: underline;")) %></h1>
|
||||
<p>
|
||||
<%= t("views.tags.edit.markdown_html", tag: tag.code("##{@tag.name}", style: "background-color: #D2D2D2; color: black; padding: 5px; border-radius: 5px;")) %>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<%= form_tag("/tag/#{@tag.id}", method: :patch, class: "tag-edit-form") do %>
|
||||
<div class="tag-edit-container">
|
||||
<% if flash[:success] %>
|
||||
<p class="tag-edit-flash-success">
|
||||
<%= flash[:success] %>
|
||||
</p>
|
||||
<% elsif flash[:error] %>
|
||||
<ul class="tag-edit-flash-error">
|
||||
<% flash[:error].each do |message| %>
|
||||
<li><%= message %></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
<% end %>
|
||||
<h4>
|
||||
<a target="_blank" rel="noopener" href="https://thepracticaldev.s3.amazonaws.com/i/cc8vz48djnhty6c31jog.png">
|
||||
<%= t("views.tags.edit.form.example") %>
|
||||
</a>
|
||||
</h4>
|
||||
<% label_i18n = ->(param) { label_tag param, t("views.tags.edit.form.#{param}.label") } %>
|
||||
<div class="tag-form-field">
|
||||
<%= label_tag :pretty_name %>
|
||||
<br>
|
||||
<%= text_field_tag "tag[pretty_name]", @tag.pretty_name, placeholder: t("views.tags.edit.form.pretty_name.placeholder"), class: "tag-form-text-field" %>
|
||||
<main id="main-content" class="crayons-layout crayons-layout--limited-m">
|
||||
<header class="crayons-card flex items-center justify-between branded-4 p-3 pr-1 m:pr-5 m:p-6 m:pt-5" style="border-top-color: <%= Color::CompareHex.new([@tag.bg_color_hex || "#000000", @tag.text_color_hex || "#ffffff"]).brightness(0.88) %>">
|
||||
<h1 class="crayons-title">
|
||||
<% if @tag_model && @tag_model.pretty_name.present? %>
|
||||
<%= @tag_model.pretty_name %>
|
||||
<% else %>
|
||||
<span class="opacity-50">#</span><%= @tag %>
|
||||
<% end %>
|
||||
</h1>
|
||||
<div class="flex">
|
||||
<% if current_user.has_role?(:super_admin) || current_user.has_role?(:admin) %>
|
||||
<a href="<%= edit_admin_tag_path(@tag.id) %>" class="crayons-btn crayons-btn--ghost" data-no-instant><%= t("views.tags.edit.admin") %></a>
|
||||
<% end %>
|
||||
<a target="_blank" rel="noopener" href="https://admin.forem.com/docs/forem-basics/tags#editing-a-tag" class="crayons-btn crayons-btn--ghost"><%= t("views.tags.edit.help") %></a>
|
||||
<a href="/t/<%= @tag %>" class="crayons-btn crayons-btn--ghost"><%= t("views.tags.edit.view") %></a>
|
||||
</div>
|
||||
<div class="tag-form-field">
|
||||
<%= label_tag :bg_color_hex %>
|
||||
<br>
|
||||
<%= color_field_tag "tag[bg_color_hex]", @tag.bg_color_hex.presence || "#000000", placeholder: "#000000", class: "tag-form-text-field" %>
|
||||
</div>
|
||||
<div class="tag-form-field">
|
||||
<%= label_tag :text_color_hex %>
|
||||
<br>
|
||||
<%= color_field_tag "tag[text_color_hex]", @tag.text_color_hex.presence || "#ffffff", placeholder: "#ffffff", class: "tag-form-text-field" %>
|
||||
</div>
|
||||
<div class="tag-form-field">
|
||||
<%= label_tag :short_summary %>
|
||||
<br>
|
||||
<%= text_area_tag "tag[short_summary]", @tag.short_summary, placeholder: t("views.tags.edit.form.short_summary.placeholder"), class: "tag-form-text-field tag-area-text" %>
|
||||
</div>
|
||||
<div class="tag-form-field">
|
||||
<%= label_tag :wiki_body_markdown %>
|
||||
<br>
|
||||
<%= text_area_tag "tag[wiki_body_markdown]", @tag.wiki_body_markdown, placeholder: t("views.tags.edit.form.wiki_body_markdown.placeholder"), class: "tag-form-text-field tag-area-text" %>
|
||||
</div>
|
||||
<div class="tag-form-field">
|
||||
<%= label_tag :rules_markdown %>
|
||||
<br>
|
||||
<%= text_area_tag "tag[rules_markdown]", @tag.rules_markdown, placeholder: t("views.tags.edit.form.rules_markdown.placeholder"), class: "tag-form-text-field tag-area-text" %>
|
||||
</div>
|
||||
<div class="tag-form-field">
|
||||
<%= submit_tag t("views.tags.edit.form.submit"), class: "tag-edit-submit" %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</header>
|
||||
|
||||
<% if current_user.has_role?(:super_admin) || current_user.has_role?(:admin) %>
|
||||
<center>
|
||||
<h1><a href="<%= edit_admin_tag_path(@tag.id) %>" data-no-instant><%= t("views.tags.edit.admin", tag: @tag.name) %></a></h1>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
</center>
|
||||
<% end %>
|
||||
<%= form_tag("/tag/#{@tag.id}", method: :patch, class: "crayons-card p-4 m:p-6 grid gap-4") do %>
|
||||
<% if flash[:success] %>
|
||||
<div class="crayons-notice crayons-notice--success">
|
||||
<%= flash[:success] %>
|
||||
</div>
|
||||
<% elsif flash[:error] %>
|
||||
<div class="crayons-notice crayons-notice--danger">
|
||||
<ul>
|
||||
<% flash[:error].each do |message| %>
|
||||
<li><%= message %></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
<% end %>
|
||||
<% label_i18n = ->(param) { label_tag param, t("views.tags.edit.form.#{param}.label") } %>
|
||||
<div class="crayons-field">
|
||||
<%= label_tag :pretty_name, nil, class: "crayons-field__label" %>
|
||||
<%= text_field_tag "tag[pretty_name]", @tag.pretty_name, placeholder: t("views.tags.edit.form.pretty_name.placeholder"), class: "crayons-textfield" %>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<div class="crayons-field flex-1">
|
||||
<%= label_tag :bg_color_hex, nil, class: "crayons-field__label" %>
|
||||
<%= color_field_tag "tag[bg_color_hex]", @tag.bg_color_hex.presence || "#000000", placeholder: "#000000", class: "crayons-color-selector crayons-color-selector--full" %>
|
||||
</div>
|
||||
<div class="crayons-field flex-1">
|
||||
<%= label_tag :text_color_hex, nil, class: "crayons-field__label" %>
|
||||
<%= color_field_tag "tag[text_color_hex]", @tag.text_color_hex.presence || "#ffffff", placeholder: "#ffffff", class: "crayons-color-selector crayons-color-selector--full" %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="crayons-field">
|
||||
<%= label_tag :short_summary, nil, class: "crayons-field__label" %>
|
||||
<%= text_area_tag "tag[short_summary]", @tag.short_summary, placeholder: t("views.tags.edit.form.short_summary.placeholder"), class: "crayons-textfield" %>
|
||||
</div>
|
||||
<div class="crayons-field">
|
||||
<%= label_tag :wiki_body_markdown, nil, class: "crayons-field__label" %>
|
||||
<%= text_area_tag "tag[wiki_body_markdown]", @tag.wiki_body_markdown, placeholder: t("views.tags.edit.form.wiki_body_markdown.placeholder"), class: "crayons-textfield" %>
|
||||
</div>
|
||||
<div class="crayons-field">
|
||||
<%= label_tag :rules_markdown, nil, class: "crayons-field__label" %>
|
||||
<%= text_area_tag "tag[rules_markdown]", @tag.rules_markdown, placeholder: t("views.tags.edit.form.rules_markdown.placeholder"), class: "crayons-textfield" %>
|
||||
</div>
|
||||
<div>
|
||||
<%= submit_tag t("views.tags.edit.form.submit"), class: "crayons-btn" %>
|
||||
</div>
|
||||
<% end %>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -12,9 +12,10 @@ en:
|
|||
meta:
|
||||
title: Edit %{tag}
|
||||
heading_html: " Editing: %{tag}"
|
||||
admin: "%{tag}'s admin page"
|
||||
admin: "Admin"
|
||||
help: "Help"
|
||||
view: "View"
|
||||
form:
|
||||
example: Click here to see an example of attributes.
|
||||
pretty_name:
|
||||
label: Pretty name
|
||||
placeholder: This is the name at the top of the show page.
|
||||
|
|
@ -31,8 +32,7 @@ en:
|
|||
rules_markdown:
|
||||
label: Rules markdown
|
||||
placeholder: Optional - Can be used for challenges, i.e. submission guidelines.
|
||||
submit: SAVE CHANGES
|
||||
markdown_html: "%{tag} is the name of the tag used in Markdown."
|
||||
submit: Save
|
||||
follow: Follow
|
||||
following_tags: Following tags
|
||||
moderator:
|
||||
|
|
|
|||
|
|
@ -12,9 +12,10 @@ fr:
|
|||
meta:
|
||||
title: Edit %{tag}
|
||||
heading_html: " Editing: %{tag}"
|
||||
admin: "%{tag}'s admin page"
|
||||
admin: "Admin"
|
||||
help: "Help"
|
||||
view: "View"
|
||||
form:
|
||||
example: Click here to see an example of attributes.
|
||||
pretty_name:
|
||||
label: Pretty name
|
||||
placeholder: This is the name at the top of the show page.
|
||||
|
|
@ -31,7 +32,7 @@ fr:
|
|||
rules_markdown:
|
||||
label: Rules markdown
|
||||
placeholder: Optional - Can be used for challenges, i.e. submission guidelines.
|
||||
submit: SAVE CHANGES
|
||||
submit: Save
|
||||
markdown_html: "%{tag} is the name of the tag used in Markdown."
|
||||
follow: Suivre
|
||||
following_tags: Sujets suivis
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ RSpec.describe "Tags", type: :request, proper_status: true do
|
|||
it "allows super admins" do
|
||||
sign_in super_admin
|
||||
get "/t/#{tag}/edit"
|
||||
expect(response.body).to include("Click here to see an example of attributes.")
|
||||
expect(response.body).to include(I18n.t("views.tags.edit.help"))
|
||||
end
|
||||
|
||||
context "when user is a tag moderator" do
|
||||
|
|
@ -66,7 +66,7 @@ RSpec.describe "Tags", type: :request, proper_status: true do
|
|||
|
||||
it "allows authorized tag moderators" do
|
||||
get "/t/#{tag}/edit"
|
||||
expect(response.body).to include("Click here to see an example of attributes.")
|
||||
expect(response.body).to include(I18n.t("views.tags.edit.help"))
|
||||
end
|
||||
|
||||
it "does not allow moderators of one tag to edit another tag" do
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ RSpec.describe "User updates a tag", type: :system do
|
|||
end
|
||||
|
||||
it "defaults to black and white upon update", :aggregate_failures do
|
||||
click_button("SAVE CHANGES")
|
||||
click_button(I18n.t("views.tags.edit.form.submit"))
|
||||
|
||||
tag.reload
|
||||
|
||||
|
|
@ -41,7 +41,7 @@ RSpec.describe "User updates a tag", type: :system do
|
|||
old_bg_color_hex = tag.bg_color_hex
|
||||
old_text_color_hex = tag.text_color_hex
|
||||
|
||||
click_button("SAVE CHANGES")
|
||||
click_button(I18n.t("views.tags.edit.form.submit"))
|
||||
|
||||
expect(tag.reload.bg_color_hex).to eq(old_bg_color_hex)
|
||||
expect(tag.reload.text_color_hex).to eq(old_text_color_hex)
|
||||
|
|
@ -64,7 +64,7 @@ RSpec.describe "User updates a tag", type: :system do
|
|||
end
|
||||
|
||||
it "defaults to black and white upon update", :aggregate_failures do
|
||||
click_button("SAVE CHANGES")
|
||||
click_button(I18n.t("views.tags.edit.form.submit"))
|
||||
|
||||
tag.reload
|
||||
|
||||
|
|
@ -86,7 +86,7 @@ RSpec.describe "User updates a tag", type: :system do
|
|||
old_bg_color_hex = tag.bg_color_hex
|
||||
old_text_color_hex = tag.text_color_hex
|
||||
|
||||
click_button("SAVE CHANGES")
|
||||
click_button(I18n.t("views.tags.edit.form.submit"))
|
||||
|
||||
expect(tag.reload.bg_color_hex).to eq(old_bg_color_hex)
|
||||
expect(tag.reload.text_color_hex).to eq(old_text_color_hex)
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue