JourneyPlanner #1 - koncepcja szablonu

Przyszedł czas na pracę nad tym do czego przygotowywałem się tyle czasu. Mianowicie aplikacja JourneyPlanner pozwalająca zaplanować weekend lub całe wakacje.

Koncepcja

Wstępna koncepcja wyglądu aplikacji prezentuje się następująco

Wiem że artysta ze mnie nie będzie ale taka grafika potrafi zobrazować myśli. Dzięki czemu wiadomo na czym się skupić podczas tworzenia interfejsu.

Póki co skupiam się na wykonaniu górnej i dolnej belki z przyciskami.

Usuwanie

Całą pracę zacząłem od wyprucia przykładowej aplikacji opisanej w poprzednim poście z większości funkcji.

Usunąłem moduły network, camera, battery i loading.

Odpowiednio modyfikuję również plik ./lib/app/index.ts pozbawiając go odwołań do usuniętych modułów.

Z modułu home w kontrolerze usunąłem funkcję showLoading() i przycisk z szablonu.

W szablonie modułu menu zostawiłem tylko odwołanie do modułu home.

Po skompilowaniu aplikacja wygląda tak:

Dodawanie

Skoro odjąłem co nieco, powinienem teraz coś dodać. Na pewno przyda się dolna belka z zakładkami. Na razie nie będę implementował przycisku w górnej belce bo jeszcze nie wiem co miałby robić.

Dolne zakładki dodałem przed tagiem zamykającym </ion-side-menu-content> w ten sposób:

<ion-footer-bar>
  <ion-tabs class="tabs-positive tabs-icon-only">
 <ion-tab title="Map" icon="ion-map"></ion-tab>
 <ion-tab title="Places" icon="ion-location"></ion-tab>
 <ion-tab title="Routes" icon="ion-android-walk"></ion-tab>
  </ion-tabs>
</ion-footer-bar>

I otrzymałem taki widok

W następnym poście będę podłączał pod zakładki akcje i mam nadzieję uzyskać już pierwszy podgląd mapy! Trzymajcie się :)