Skip to content

Instantly share code, notes, and snippets.

@sbatson5
Last active October 8, 2020 00:19
Show Gist options
  • Save sbatson5/034c04f68f0c3082d95104586e52f1e4 to your computer and use it in GitHub Desktop.
Save sbatson5/034c04f68f0c3082d95104586e52f1e4 to your computer and use it in GitHub Desktop.
New Twiddle
import Ember from 'ember';
export default Ember.Component.extend({
tagName: ''
});
import Ember from 'ember';
export default Ember.Component.extend({
tagName: ''
});
import Component from '@ember/component';
export default Component.extend({
classNames: ['toolbar'],
attributeBindings: ['role'],
role: 'toolbar',
foo: 'hi',
// This should be a passed in action
closeAction() {
console.log(this);
console.warn('you did not pass in an action `closeAction` to `prodicle-toolbar`');
}
});
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
body {
margin: 12px 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12pt;
}
.toolbar {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
bottom: 0;
left: 0;
z-index: 100;
background: #fff;
box-shadow: 0 -12px 16px -8px rgba(0,0,0,0.12), 0 0 8px 1px rgba(0,0,0,0.06), 0 -7px 8px -8px rgba(0,0,0,0.08);
@media (max-width: 575px) {
padding-right: 16px;
padding-left: 16px;
height: 64px;
}
@media (min-width: 576px) {
height: 80px;
}
@media (min-width: 576px) and (max-width: 1023px) {
padding-right: 24px;
padding-left: 24px;
}
@media (min-width: 1024px) {
padding-right: 48px;
padding-left: 48px;
}
}
.toolbar__context,
.toolbar__actions {
display: flex;
align-items: center;
}
.toolbar__context__text {
margin-left: 16px;
}
.toolbar__action:not(:last-of-type) {
margin-right: 16px;
}
.button-filled {
display: inline-flex;
align-items: center;
color: #fff;
line-height: 1;
font-size: 1.5rem;
background-color: #0e6df3;
border: 1px solid #0e6df3;
border-radius: 4px;
transition: .3s ease background-color;
white-space: nowrap;
}
.button-filled:hover,
.button-filled:focus {
background-color: #0b56bf;
border-color: #0b56bf;
}
}
<h1>Check out this sweet toolbar</h1>
<h2>(It's at the bottom of the page)</h2>
<br>
<br>
{{outlet}}
<br>
<br>
{{#fancy-toolbar as |toolbar|}}
{{#toolbar.context}}
<p class="toolbar__context__text">Hi there</p>
{{/toolbar.context}}
{{#toolbar.actions}}
<button class="button-filled toolbar__action">Click me</button>
{{/toolbar.actions}}
{{/fancy-toolbar}}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" version="1.1" height="24px" viewBox="0 0 64 64" enable-background="new 0 0 64 64">
<g>
<path fill="#006DF0" d="M28.941,31.786L0.613,60.114c-0.787,0.787-0.787,2.062,0,2.849c0.393,0.394,0.909,0.59,1.424,0.59 c0.516,0,1.031-0.196,1.424-0.59l28.541-28.541l28.541,28.541c0.394,0.394,0.909,0.59,1.424,0.59c0.515,0,1.031-0.196,1.424-0.59 c0.787-0.787,0.787-2.062,0-2.849L35.064,31.786L63.41,3.438c0.787-0.787,0.787-2.062,0-2.849c-0.787-0.786-2.062-0.786-2.848,0 L32.003,29.15L3.441,0.59c-0.787-0.786-2.061-0.786-2.848,0c-0.787,0.787-0.787,2.062,0,2.849L28.941,31.786z"/>
</g>
</svg>
<div class="toolbar__context">
{{close-icon}}
{{yield (hash context="blank-template")}}
</div>
<div class="toolbar__actions">
{{yield (hash actions="blank-template")}}
</div>
{
"version": "0.15.1",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
"ember": "3.4.3",
"ember-template-compiler": "3.4.3",
"ember-testing": "3.4.3"
},
"addons": {
"ember-data": "3.4.2"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment