mirror of
https://github.com/codex-team/codex.docs.git
synced 2025-07-18 20:59:42 +02:00
Add button component (twig) (#188)
* Add button component * Replace old buttons with the new ones * Update icons and border radius * Update add page button * Set size small to add page btn * Update button indentation * Cleanup * icons and button component updated * upd secondary colour, page button call * Update small button padding right Co-authored-by: Peter Savchenko <specc.dev@gmail.com>
This commit is contained in:
Tanya
GitHub
parent
f75401d0fb
commit
f714225e20
14 changed files with 177 additions and 46 deletions
37
src/backend/views/components/button.twig
Normal file
37
src/backend/views/components/button.twig
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
{#
|
||||
Reusable button component.
|
||||
Available props:
|
||||
- label
|
||||
- icon
|
||||
- name
|
||||
- style: primary, secondary or warning
|
||||
- size: small, default
|
||||
- url: URL to navigate in case if button is the navigation link
|
||||
- class: additional class for the button
|
||||
|
||||
Usage example:
|
||||
{% include 'components/button.twig' with {label: 'Label', icon: 'check', style: 'secondary', size: 'default'} %}
|
||||
#}
|
||||
|
||||
{% set mainClass = 'docs-button' %}
|
||||
|
||||
|
||||
{% set tag = 'button' %}
|
||||
|
||||
{% if url is not empty %}
|
||||
{% set tag = 'a' %}
|
||||
{% endif %}
|
||||
|
||||
<{{tag}}
|
||||
{{ name is not empty ? 'name="' ~ name ~ '"': '' }}
|
||||
class="{{ mainClass }} {{ mainClass }}--{{ style|default('primary') }} {{ mainClass }}--{{ size|default('default') }} {{ icon ? mainClass ~ '--with-icon' : '' }} {{ class ?? '' }}"
|
||||
{{ url is not empty ? 'href="' ~ url ~ '"' : '' }}
|
||||
>
|
||||
{% if icon %}
|
||||
<div class="{{mainClass}}__icon">
|
||||
{{ svg(icon) }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{{ label }}
|
||||
</{{tag}}>
|
||||
|
|
@ -5,15 +5,12 @@
|
|||
<ul class="docs-header__menu">
|
||||
{% if isAuthorized == true %}
|
||||
<li class="docs-header__menu-add">
|
||||
<a class="docs-header__button" href="/page/new">
|
||||
{{ svg('plus') }}
|
||||
Add Page
|
||||
</a>
|
||||
{% include 'components/button.twig' with {label: 'Add page', icon: 'plus', size: 'small', url: '/page/new'} %}
|
||||
</li>
|
||||
{% endif %}
|
||||
{% for option in config.menu %}
|
||||
<li>
|
||||
<a
|
||||
<a class="docs-header__menu-link"
|
||||
{% if option.uri %}
|
||||
href="{{ option.uri }}"
|
||||
{% else %}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
{% block body %}
|
||||
<style>
|
||||
.docs-header__button {
|
||||
.docs-header__menu-add {
|
||||
visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -56,12 +56,13 @@
|
|||
<div class="writing-editor">
|
||||
<div id="editorjs"></div>
|
||||
</div>
|
||||
<div class="writing-buttons">
|
||||
<span class="writing-header__save" name="js-submit-save">Save</span>
|
||||
|
||||
<div class="writing-buttons">
|
||||
{% include 'components/button.twig' with {label: 'Save changes', name: 'js-submit-save', icon: 'check'} %}
|
||||
{% if page._id is not empty %}
|
||||
<span class="writing-buttons__remove" name="js-submit-remove">Remove</span>
|
||||
{% include 'components/button.twig' with {label: 'Delete doc', name: 'js-submit-remove', icon: 'trash', style: 'warning'} %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -18,12 +18,10 @@
|
|||
{% endif %}
|
||||
<time class="page__header-time">
|
||||
Last edit {{ (page.body.time / 1000) | date("M d Y") }}
|
||||
{% if isAuthorized == true %}
|
||||
<a href="/page/edit/{{ page._id }}" class="page__header-button">
|
||||
Edit
|
||||
</a>
|
||||
{% endif %}
|
||||
</time>
|
||||
{% if isAuthorized == true %}
|
||||
{% include 'components/button.twig' with {label: 'Edit', icon: 'pencil', size: 'small', url: '/page/edit/' ~ page._id, class: 'page__header-button'} %}
|
||||
{% endif %}
|
||||
</header>
|
||||
<h1 class="page__title">
|
||||
{{ page.title }}
|
||||
|
|
|
|||
83
src/frontend/styles/components/button.pcss
Normal file
83
src/frontend/styles/components/button.pcss
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
.docs-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: var(--height);
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition-property: background-color;
|
||||
transition-duration: 0.1s;
|
||||
border-radius: 8px;
|
||||
|
||||
@supports(-webkit-mask-box-image: url('')){
|
||||
border-radius: 0;
|
||||
-webkit-mask-box-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10.3872C0 1.83334 1.83334 0 10.3872 0H13.6128C22.1667 0 24 1.83334 24 10.3872V13.6128C24 22.1667 22.1667 24 13.6128 24H10.3872C1.83334 24 0 22.1667 0 13.6128V10.3872Z' fill='black'/%3E%3C/svg%3E%0A") 48% 41% 37.9% 53.3%;;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 4px;
|
||||
|
||||
svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&--default {
|
||||
--height: 40px;
|
||||
}
|
||||
|
||||
&--small {
|
||||
--height: 32px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
&--primary {
|
||||
background: var(--color-button-primary);
|
||||
|
||||
&:hover {
|
||||
background: var(--color-button-primary-hover);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--color-button-primary-active);
|
||||
}
|
||||
}
|
||||
|
||||
&--secondary {
|
||||
background: var(--color-button-secondary);
|
||||
|
||||
&:hover {
|
||||
background: var(--color-button-secondary-hover);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--color-button-secondary-active);
|
||||
}
|
||||
}
|
||||
|
||||
&--warning {
|
||||
background: var(--color-button-warning);
|
||||
|
||||
&:hover {
|
||||
background: var(--color-button-warning-hover);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--color-button-warning-active);
|
||||
}
|
||||
}
|
||||
|
||||
&--with-icon {
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
|
|
@ -12,9 +12,9 @@
|
|||
line-height: 40px;
|
||||
}
|
||||
|
||||
a {
|
||||
&__menu-link,
|
||||
&__logo {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&__logo {
|
||||
|
|
@ -55,24 +55,22 @@
|
|||
a {
|
||||
@media (--mobile) {
|
||||
font-size: 0;
|
||||
padding: 8px;
|
||||
padding: 0 4px;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.docs-button__icon {
|
||||
@media (--mobile) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a:not(.docs-header__button) {
|
||||
color: inherit;
|
||||
|
||||
&-link {
|
||||
&:hover {
|
||||
color: var(--color-link-active);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__button {
|
||||
@apply --button;
|
||||
@apply --button-primary;
|
||||
margin: auto 30px auto auto;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--color-text-second);
|
||||
|
||||
@media (--mobile) {
|
||||
|
|
@ -40,11 +41,8 @@
|
|||
}
|
||||
|
||||
&-button {
|
||||
@apply --button;
|
||||
@apply --button-primary;
|
||||
padding: 5px 10px;
|
||||
font-size: 13px;
|
||||
margin-left: 10px;
|
||||
margin-left: 20px;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -31,9 +31,10 @@
|
|||
}
|
||||
|
||||
.writing-buttons {
|
||||
&__remove {
|
||||
@apply --button;
|
||||
@apply --button-danger;
|
||||
display: flex;
|
||||
|
||||
button:not(:last-child) {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
@import './components/page.pcss';
|
||||
@import './components/landing.pcss';
|
||||
@import './components/auth.pcss';
|
||||
@import './components/button.pcss';
|
||||
|
||||
body {
|
||||
font-family: system-ui, Helvetica, Arial, Verdana;
|
||||
|
|
@ -19,3 +20,8 @@ body {
|
|||
svg {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,10 +3,22 @@
|
|||
--color-text-second: #5d6068;
|
||||
--color-line-gray: #E8E8EB;
|
||||
--color-link-active: #2071cc;
|
||||
--color-button-danger: #ff5159;
|
||||
--color-bg-light: #f8f7fa;
|
||||
--color-page-active: #ff1767;
|
||||
|
||||
--color-button-primary: #3389FF;
|
||||
--color-button-primary-hover: #2E7AE6;
|
||||
--color-button-primary-active: #296DCC;
|
||||
|
||||
--color-button-secondary: #717682;
|
||||
--color-button-secondary-hover: #5D6068;
|
||||
--color-button-secondary-active: #4B4F5B;
|
||||
|
||||
--color-button-warning: #EF5C5C;
|
||||
--color-button-warning-hover: #D65151;
|
||||
--color-button-warning-active: #BD4848;
|
||||
|
||||
|
||||
/**
|
||||
* Site layout sizes
|
||||
*/
|
||||
|
|
@ -47,15 +59,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
--button-danger {
|
||||
background: var(--color-button-danger);
|
||||
color: #fff;
|
||||
box-shadow: none;
|
||||
|
||||
&:hover {
|
||||
background: color-mod(var(--color-button-danger) blackness(+10%));
|
||||
}
|
||||
}
|
||||
|
||||
--button-primary {
|
||||
background: var(--color-link-active);
|
||||
|
|
|
|||
3
src/frontend/svg/check.svg
Normal file
3
src/frontend/svg/check.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.374 7.293a1 1 0 0 1 0 1.414L11.04 16.04a1 1 0 0 1-1.414 0l-3.333-3.333a1 1 0 1 1 1.414-1.414l2.626 2.626 6.627-6.626a1 1 0 0 1 1.414 0Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 274 B |
3
src/frontend/svg/pencil.svg
Normal file
3
src/frontend/svg/pencil.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.917 6.75a.9.9 0 0 0-.637.264l-7.734 7.734-.477 1.75 1.75-.478 7.734-7.734a.899.899 0 0 0-.636-1.536Zm-.919-1.317a2.4 2.4 0 0 1 2.616 3.914l-7.875 7.875a.75.75 0 0 1-.333.193l-3.209.875a.75.75 0 0 1-.92-.92l.874-3.21a.75.75 0 0 1 .194-.332l7.875-7.875a2.4 2.4 0 0 1 .778-.52Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 413 B |
|
|
@ -1,3 +1,3 @@
|
|||
<svg width="11" height="11" viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.44 4.64h3.7a.9.9 0 1 1 0 1.8h-3.7v3.7a.9.9 0 1 1-1.8 0v-3.7H.9a.9.9 0 0 1 0-1.8h3.74V.9a.9.9 0 0 1 1.8 0v3.74z"/>
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 5a1 1 0 0 0-1 1v5H6a1 1 0 1 0 0 2h5v5a1 1 0 1 0 2 0v-5h5a1 1 0 1 0 0-2h-5V6a1 1 0 0 0-1-1Z"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 219 B After Width: | Height: | Size: 217 B |
3
src/frontend/svg/trash.svg
Normal file
3
src/frontend/svg/trash.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17.75 7h-3v-.75A2.25 2.25 0 0 0 12.5 4H11a2.25 2.25 0 0 0-2.25 2.25V7h-3a.75.75 0 0 0 0 1.5h.75l.75 8.25A2.25 2.25 0 0 0 9.5 19H14a2.25 2.25 0 0 0 2.25-2.25L17 8.5h.75a.75.75 0 1 0 0-1.5Zm-7.5-.75A.75.75 0 0 1 11 5.5h1.5a.75.75 0 0 1 .75.75V7h-3v-.75Zm4.5 10.5a.75.75 0 0 1-.75.75H9.5a.75.75 0 0 1-.75-.75L8 8.5h7.5l-.75 8.25Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 422 B |
Loading…
Add table
Add a link
Reference in a new issue