raucao/marco
1
0
Fork 0
Code Issues 12 Pull Requests Releases Activity

Use feather icons in sidebar header

Browse Source
This commit is contained in:
Râu Cao
2026-01-23 15:49:59 +07:00
parent 026d1c4712
commit f17f8ca17b
3 changed files with 24 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/components/icon.gjs
View File

@@ -10,6 +10,8 @@ import navigation from 'feather-icons/dist/icons/navigation.svg?raw';
import phone from 'feather-icons/dist/icons/phone.svg?raw'; import phone from 'feather-icons/dist/icons/phone.svg?raw';
import user from 'feather-icons/dist/icons/user.svg?raw'; import user from 'feather-icons/dist/icons/user.svg?raw';
import settings from 'feather-icons/dist/icons/settings.svg?raw'; import settings from 'feather-icons/dist/icons/settings.svg?raw';
import arrowLeft from 'feather-icons/dist/icons/arrow-left.svg?raw';
import x from 'feather-icons/dist/icons/x.svg?raw';
const ICONS = { const ICONS = {
clock, clock,
@@ -20,7 +22,9 @@ const ICONS = {
navigation, navigation,
phone, phone,
user, user,
settings settings,
'arrow-left': arrowLeft,
x
}; };
export default class IconComponent extends Component { export default class IconComponent extends Component {

5
app/components/places-sidebar.gjs
View File

@@ -5,6 +5,7 @@ import { on } from '@ember/modifier';
import { fn } from '@ember/helper'; import { fn } from '@ember/helper';
import or from 'ember-truth-helpers/helpers/or'; import or from 'ember-truth-helpers/helpers/or';
import PlaceDetails from './place-details'; import PlaceDetails from './place-details';
import Icon from './icon';
export default class PlacesSidebar extends Component { export default class PlacesSidebar extends Component {
@service storage; @service storage;
@@ -123,7 +124,7 @@ export default class PlacesSidebar extends Component {
type="button" type="button"
class="back-btn" class="back-btn"
{{on "click" this.clearSelection}} {{on "click" this.clearSelection}}
>←</button> ><Icon @name="arrow-left" @size={{20}} @color="#333" /></button>
{{else}} {{else}}
<h2>Nearby Places</h2> <h2>Nearby Places</h2>
{{/if}} {{/if}}
@@ -131,7 +132,7 @@ export default class PlacesSidebar extends Component {
type="button" type="button"
class="close-btn" class="close-btn"
{{on "click" @onClose}} {{on "click" @onClose}}
>×</button> ><Icon @name="x" @size={{20}} @color="#333" /></button>
</div> </div>
<div class="sidebar-content"> <div class="sidebar-content">

26
app/styles/app.css
View File

@@ -62,20 +62,26 @@ body {
padding: 1rem; padding: 1rem;
} }
.close-btn {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
padding: 0 0.5rem;
}
.back-btn { .back-btn {
background: none; background: none;
border: none; border: none;
font-size: 1.2rem;
cursor: pointer; cursor: pointer;
margin-right: 0.5rem; padding: 0 0.5rem;
margin-left: -0.5rem;
display: flex;
align-items: center;
justify-content: center;
}
.close-btn {
background: none;
border: none;
cursor: pointer;
padding: 0 0.5rem;
margin-right: -0.5rem;
display: flex;
align-items: center;
justify-content: center;
} }
.place-details { .place-details {