maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Buttons: Ghost Dimmed (#9626)

Browse source 
* flare tag line height

* .

* dropdown fix + actions bar fix

* actions bar on mob

* ghost dimmed

* add to page/crayons
This commit is contained in:
ludwiczakpawel 2020-08-06 11:03:06 +02:00 • committed by GitHub
parent 269ef9c4f6
commit dbbe158d21
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 62 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/assets/javascripts/utilities/buildArticleHTML.js
View file

@ -62,7 +62,7 @@ function buildArticleHTML(article) {
commentsDisplay =
'<a href="' +
article.path +
'#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left "><svg class="crayons-icon" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"/></svg>' +
'#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost-dimmed crayons-btn--icon-left "><svg class="crayons-icon" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"/></svg>' +
commentsCount +
'<span class="hidden s:inline">&nbsp;comments</span></a>';
}
@ -101,7 +101,7 @@ function buildArticleHTML(article) {
reactionsDisplay =
'<a href="' +
article.path +
'" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"><svg class="crayons-icon" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"/></svg>' +
'" class="crayons-btn crayons-btn--s crayons-btn--ghost-dimmed crayons-btn--icon-left"><svg class="crayons-icon" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"/></svg>' +
reactionsCount +
'<span class="hidden s:inline">&nbsp;reactions</span></a>';
}

14
app/assets/stylesheets/components/buttons.scss
View file

@ -92,6 +92,7 @@
--font-size: var(--fs-s);
--with-icon-padding: var(--su-2);
--icon-margin: var(--su-1);
font-weight: normal;
}
&--l {
@ -174,6 +175,19 @@
--color-inverted-hover: var(--accent-brand-lighter);
}
&-dimmed {
--bg: var(--button-ghost-bg);
--bg-hover: var(--button-ghost-bg-hover);
--color: var(--button-ghost-dimmed-color);
--color-hover: var(--button-ghost-dimmed-color-hover);
--shadow: none;
--shadow-hover: none;
--bg-inverted: var(--button-ghost-inverted-bg);
--bg-inverted-hover: var(--button-ghost-inverted-bg-hover);
--color-inverted: var(--accent-ghost-dimmed-inverted-color);
--color-inverted-hover: var(--accent-ghost-dimmed-inverted-color-hover);
}
&-success {
--bg: var(--button-ghost-bg);
--bg-hover: var(--button-ghost-bg-hover);

4
app/assets/stylesheets/config/_colors.scss
View file

@ -154,11 +154,15 @@
--button-ghost-bg-hover: rgba(0, 0, 0, 0.035);
--button-ghost-color: var(--base-80);
--button-ghost-color-hover: var(--base-100);
--button-ghost-dimmed-color: var(--base-60);
--button-ghost-dimmed-color-hover: var(--base-100);
//-- Inverted
--button-ghost-inverted-bg: transparent;
--button-ghost-inverted-bg-hover: rgba(255, 255, 255, 0.15);
--button-ghost-inverted-color: var(--base-30);
--button-ghost-inverted-color-hover: var(--base-10);
--button-ghost-dimmed-inverted-color: var(--base-50);
--button-ghost-dimmed-inverted-color-hover: var(--base-100);
// Forms
--form-bg: var(--base-0);

4
app/assets/stylesheets/themes/hacker.scss
View file

@ -147,11 +147,15 @@
--button-ghost-bg-hover: rgba(0, 0, 0, 0.035);
--button-ghost-color: var(--base-80);
--button-ghost-color-hover: var(--base-100);
--button-ghost-dimmed-color: var(--base-60);
--button-ghost-dimmed-color-hover: var(--base-100);
//-- Inverted
--button-ghost-inverted-bg: transparent;
--button-ghost-inverted-bg-hover: rgba(255, 255, 255, 0.15);
--button-ghost-inverted-color: var(--base-30);
--button-ghost-inverted-color-hover: var(--base-10);
--button-ghost-inverted-color: var(--base-30);
--button-ghost-inverted-color-hover: var(--base-10);
// Forms
--form-bg: var(--base-0);

4
app/assets/stylesheets/themes/minimal.scss
View file

@ -145,11 +145,15 @@
--button-ghost-bg-hover: rgba(0, 0, 0, 0.035);
--button-ghost-color: var(--base-80);
--button-ghost-color-hover: var(--base-100);
--button-ghost-dimmed-color: var(--base-60);
--button-ghost-dimmed-color-hover: var(--base-100);
//-- Inverted
--button-ghost-inverted-bg: transparent;
--button-ghost-inverted-bg-hover: rgba(255, 255, 255, 0.15);
--button-ghost-inverted-color: var(--base-30);
--button-ghost-inverted-color-hover: var(--base-10);
--button-ghost-dimmed-inverted-color: var(--base-50);
--button-ghost-dimmed-inverted-color-hover: var(--base-100);
// Forms
--form-bg: #f4f5f7;

2
app/assets/stylesheets/themes/night.scss
View file

@ -147,6 +147,8 @@
--button-ghost-bg-hover: rgba(255, 255, 255, 0.035);
--button-ghost-color: var(--base-80);
--button-ghost-color-hover: var(--base-100);
--button-ghost-dimmed-color: var(--base-60);
--button-ghost-dimmed-color-hover: var(--base-100);
//-- Inverted
--button-ghost-inverted-bg: transparent;
--button-ghost-inverted-bg-hover: rgba(0, 0, 0, 0.1);

4
app/assets/stylesheets/themes/pink.scss
View file

@ -145,11 +145,15 @@
--button-ghost-bg-hover: rgba(0, 0, 0, 0.035);
--button-ghost-color: var(--base-90);
--button-ghost-color-hover: var(--base-100);
--button-ghost-dimmed-color: var(--base-60);
--button-ghost-dimmed-color-hover: var(--base-100);
//-- Inverted
--button-ghost-inverted-bg: transparent;
--button-ghost-inverted-bg-hover: rgba(255, 255, 255, 0.15);
--button-ghost-inverted-color: var(--base-30);
--button-ghost-inverted-color-hover: var(--base-10);
--button-ghost-dimmed-inverted-color: var(--base-50);
--button-ghost-dimmed-inverted-color-hover: var(--base-100);
// Forms
--form-bg: #fff7f9;

2
app/javascript/articles/components/SaveButton.jsx
View file

@ -34,7 +34,7 @@ export class SaveButton extends Component {
<button
type="button"
className={`crayons-btn crayons-btn--s ${
isBookmarked ? 'crayons-btn--ghost' : 'crayons-btn--secondary'
isBookmarked ? 'crayons-btn--ghost-dimmed' : 'crayons-btn--secondary'
}`}
data-initial-feed
data-reactable-id={article.id}

2
app/javascript/crayons/Button/__stories__/Button.stories.jsx
View file

@ -38,6 +38,7 @@ export const Default = () => (
Danger: 'danger',
Ghost: 'ghost',
'Ghost Brand': 'ghost-brand',
'Ghost Dimmed': 'ghost-dimmed',
'Ghost Success': 'ghost-success',
'Ghost Warning': 'ghost-warning',
'Ghost Danger': 'ghost-danger',
@ -112,6 +113,7 @@ export const ButtonWithIcon = () => {
Danger: 'danger',
Ghost: 'ghost',
'Ghost Brand': 'ghost-brand',
'Ghost Dimmed': 'ghost-dimmed',
'Ghost Success': 'ghost-success',
'Ghost Warning': 'ghost-warning',
'Ghost Danger': 'ghost-danger',

10
app/javascript/crayons/Button/__stories__/button.html.stories.jsx
View file

@ -59,6 +59,16 @@ Ghost.story = {
name: 'Ghost',
};
export const GhostDimmed = () => (
<button type="button" className="crayons-btn crayons-btn--ghost-dimmed">
Ghost Dimmed Button label
</button>
);
Ghost.story = {
name: 'Ghost Dimmed',
};
export const GhostBrand = () => (
<button type="button" className="crayons-btn crayons-btn--ghost-brand">
Ghost Brand Button label

2
app/views/articles/_actions.html.erb
View file

@ -26,7 +26,7 @@
<% end %>
<div class="align-center m:relative">
<button id="article-show-more-button" class="dropbtn crayons-btn crayons-btn--ghost crayons-btn--icon-rounded" aria-label="Toggle dropdown menu">
<button id="article-show-more-button" class="dropbtn crayons-btn crayons-btn--ghost-dimmed crayons-btn--icon-rounded" aria-label="Toggle dropdown menu">
<%= inline_svg_tag("overflow-horizontal.svg", aria: true, class: "dropdown-icon crayons-icon", title: "More...") %>
</button>
<div class="crayons-dropdown p-1 z-30 right-1 left-1 s:left-auto bottom-100 m:bottom-0 m:right-auto m:left-100 fs-base">

4
app/views/articles/_v2_form.html.erb
View file

@ -37,7 +37,7 @@
</div>
<div class="crayons-article-form__close">
<a href="/" class="crayons-btn crayons-btn--ghost crayons-btn--icon" title="Close the editor">
<a href="/" class="crayons-btn crayons-btn--ghost-dimmed crayons-btn--icon" title="Close the editor">
<%= inline_svg_tag("x.svg", aria: true, class: "crayons-icon", title: "Close") %>
</a>
</div>
@ -67,7 +67,7 @@
<% end %>
<div class="crayons-article-form__body text-padding">
<div class="crayons-article-form__toolbar">
<button class="crayons-btn crayons-btn--ghost crayons-btn--icon-left fw-normal" type="button">
<button class="crayons-btn crayons-btn--ghost-dimmed crayons-btn--icon-left fw-normal" type="button">
<%= (inline_svg_tag("image.svg", aria: true, class: "crayons-icon", title: "Image") + "Upload image").delete!("\n").html_safe %>
<input type="file" id="image-upload-field" class="w-100 h-100 absolute left-0 right-0 top-0 bottom-0 overflow-hidden opacity-0 cursor-pointer" multiple accept="image/*" data-max-file-size-mb="25" />
</button>

4
app/views/dashboards/_dashboard_article_row.html.erb
View file

@ -24,7 +24,7 @@
<% end %>
</div>
<div class="fs-s color-base-70">
<div class="fs-s color-base-60">
<% if !article.published? %>
<a href="<%= article.path %>/edit" class="crayons-indicator crayons-indicator--accent">Draft</a>
<% else %>
@ -59,7 +59,7 @@
</span>
<% if article.user_subscriptions_count > 0 %>
<a href="<%= dashboard_subscriptions_path(source_type: "Article", source_id: article.id) %>" class="flex items-center crayons-btn crayons-btn--ghost crayons-btn--s fw-normal color-base-70" title="Subscriptions">
<a href="<%= dashboard_subscriptions_path(source_type: "Article", source_id: article.id) %>" class="flex items-center crayons-btn crayons-btn--ghost-dimmed crayons-btn--s" title="Subscriptions">
<%= inline_svg_tag("small-data.svg", aria: true, class: "crayons-icon mr-1", title: "Data") %>
<%= article.user_subscriptions_count %>
</a>

10
app/views/pages/crayons.html.erb
View file

@ -656,6 +656,16 @@
<td><button class="crayons-btn crayons-btn--ghost" disabled>Button label</button></td>
<td class="bg-base-100 color-base-inverted"><button class="crayons-btn crayons-btn--ghost crayons-btn--inverted">Button label</button></td>
</tr>
<tr>
<td class="fs-s">.crayons-btn--ghost-dimmed</td>
<td><button class="crayons-btn crayons-btn--ghost-dimmed">Button label</button></td>
<td><button class="crayons-btn crayons-btn--ghost-dimmed crayons-btn--icon-left"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %>Button label</button></td>
<td><button class="crayons-btn crayons-btn--ghost-dimmed crayons-btn--icon-right">Button label<%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
<td><button class="crayons-btn crayons-btn--ghost-dimmed crayons-btn--icon"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
<td><button class="crayons-btn crayons-btn--ghost-dimmed crayons-btn--icon-rounded"><%= inline_svg_tag("bell.svg", class: "crayons-icon") %></button></td>
<td><button class="crayons-btn crayons-btn--ghost-dimmed" disabled>Button label</button></td>
<td class="bg-base-100 color-base-inverted"><button class="crayons-btn crayons-btn--ghost-dimmed crayons-btn--inverted">Button label</button></td>
</tr>
<tr>
<td class="fs-s">.crayons-btn--ghost-brand</td>
<td><button class="crayons-btn crayons-btn--ghost-brand">Button label</button></td>