Skip to content

Instantly share code, notes, and snippets.

@mortendk
Created July 16, 2016 11:54
Show Gist options
  • Save mortendk/ed0ac8abfc44932576168c2cf595ca3a to your computer and use it in GitHub Desktop.
Save mortendk/ed0ac8abfc44932576168c2cf595ca3a to your computer and use it in GitHub Desktop.
input submit as buttons
{{ attach_library(active_theme()~'/form') }}
{# find the unique name for the button. #}
{% if element['#value'].getUntranslatedString() %}
{% set element_name = element['#value'].getUntranslatedString()|clean_class %}
{% else %}
{% set element_name = element['#value']|clean_class %}
{% endif %}
{# We dont use form-submit or button--primary for the css so lets remove it. #}
{%
set remove_classes = [
'form-submit',
'button--primary'
]
%}
{# add the specific classes for earch button #}
{% set classes = [
element_name == "apply" ? 'button--icon button--icon-filter',
element_name == "filter" ? 'button--icon button--icon-filter',
element_name == "log-in" ? 'button--icon button--icon-ufo',
]
%}
{# test and se what icon we wanna put in there #}
{% if element_name =="save-configuration" or element_name =="save-settings" or element_name =="save" or element_name =="save-blocks" or element_name =="save-configuration" or element_name =="save-field-settings" %}
{% set svgfile ="/icons/girl.svg" %}
{% elseif element_name =="button--preview" or element_name =="preview" %}
{% set svgfile ="/icons/browser.svg" %}
{% elseif element_name =="remove" or element_name =="delete" or element_name =="uninstall" %}
{% set svgfile ="/icons/demoltion.svg" %}
{% elseif element_name =="search" %}
{% set svgfile ="/icons/search.svg" %}
{% elseif element_name =="install" %}
{% set svgfile ="/icons/console.svg" %}
{% elseif element_name =="send-message" %}
{% set svgfile ="/icons/mailbox.svg" %}
{% endif %}
{# <input {{ attributes }}> #}
{# change the old input type sibmit to a button #}
<button
{{ attributes.
removeClass(remove_classes).
addClass(classes).
setAttribute('type', "submit")
}}
>
{# Add an icon in here with svg #}
{% if svgfile %}
{% include active_theme_path() ~ svgfile %}
{% endif %}
{# the string for the button #}
{{ attributes.value}}
</button>
{# add a reset button if its a field you can save from #}
{% if
( element_name == "save-configuration" or
element_name == "preview" or
element_name == "save" or
element_name == "install" or
element_name == "uninstall"
)
%}
<button type="reset" class="button-icon">
{% include active_theme_path() ~ '/icons/eraser.svg' %}
{{ 'Reset'|t }}
</button>
{% endif %}
{{ children }}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment