Complex UI elements

Here is an example of the Animation module with a more complex UI.

To use this example, you'll need to install the FontAwesome fonts in your project by running:

> purgetss icon-library -v=fa

And copy the following code:

index.xml

<Alloy>
  <Window class="bg-purple-700 exit-on-close-false portrait">
    <!-- Sidebar -->
    <View id="sideBar" class="w-24 ml-2 h-1/2">
      <View class="mr-8 bg-white rounded-lg vertical ios:shadow-lg" ios:onSingletap="doAction" android:onClick="doAction">
        <View class="grid-flow-row">
          <View class="ml-0 grid-rows-7 w-72">
            <View class="items-center horizontal bg-selected-purple-100" action="home">
              <Label class="w-16 h-full ml-0 text-xl text-center text-purple-700 bg-transparent border-transparent touch-enabled-false fas fa-home" />
              <Label class="text-purple-700 touch-enabled-false" text="Home" />
            </View>
          </View>

          <View class="ml-0 grid-rows-7 w-72">
            <View class="items-center horizontal bg-selected-purple-100" action="profile">
              <Label class="w-16 h-full ml-0 text-xl text-center text-purple-700 bg-transparent border-transparent touch-enabled-false fas fa-user" />
              <Label class="text-purple-700 touch-enabled-false" text="Profile" />
            </View>
          </View>

          <View class="ml-0 grid-rows-7 w-72">
            <View class="items-center horizontal bg-selected-purple-100" action="messages">
              <Label class="w-16 h-full ml-0 text-xl text-center text-purple-700 bg-transparent border-transparent touch-enabled-false fas fa-comment" />
              <Label class="text-purple-700 touch-enabled-false" text="Messages" />
            </View>
          </View>

          <View class="ml-0 grid-rows-7 w-72">
            <View class="items-center horizontal bg-selected-purple-100" action="help">
              <Label class="w-16 h-full ml-0 text-xl text-center text-purple-700 bg-transparent border-transparent touch-enabled-false fas fa-question-circle" />
              <Label class="text-purple-700 touch-enabled-false" text="Help" />
            </View>
          </View>

          <View class="ml-0 grid-rows-7 w-72">
            <View class="items-center horizontal bg-selected-purple-100" action="settings">
              <Label class="w-16 h-full ml-0 text-xl text-center text-purple-700 bg-transparent border-transparent touch-enabled-false fas fa-cog" />
              <Label class="text-purple-700 touch-enabled-false" text="Settings" />
            </View>
          </View>

          <View class="ml-0 grid-rows-7 w-72">
            <View class="items-center horizontal bg-selected-purple-100" action="password">
              <Label class="w-16 h-full ml-0 text-xl text-center text-purple-700 bg-transparent border-transparent touch-enabled-false fas fa-lock" />
              <Label class="text-purple-700 touch-enabled-false" text="Password" />
            </View>
          </View>

          <View class="ml-0 grid-rows-7 w-72">
            <View class="items-center horizontal bg-selected-purple-100" action="sign-out">
              <Label class="w-16 h-full ml-0 text-xl text-center text-purple-700 bg-transparent border-transparent touch-enabled-false fas fa-sign-out-alt" />
              <Label class="text-purple-700 touch-enabled-false" text="Sign Out" />
            </View>
          </View>
        </View>
      </View>

      <Button id="sideBarChevron" class="w-10 h-10 text-xl text-purple-700 bg-white border-4 border-purple-700 fas rounded-10 fa-chevron-right mr-1.5" ios:onSingletap="sideBarClicked" android:onClick="sideBarClicked" />

      <Animation id="sideBarAnimation" module="purgetss.ui" class="duration-150 open:w-72 close:w-24" />
      <Animation id="sideBarAnimationChevron" module="purgetss.ui" class="duration-150 open:rotate-180 close:rotate-0" />
    </View>

    <!-- My Card -->
    <View id="myCard" class="w-8/12 h-24 mt-6 mr-6 rounded-lg shadow-lg">
      <View class="bg-white rounded-lg vertical">
        <View class="w-screen h-auto">
          <ImageView class="w-16 h-16 m-4 ml-4 rounded-16" image="https://randomuser.me/api/portraits/women/17.jpg" />

          <View class="h-auto ml-24 vertical">
            <Label class="ml-0 text-sm font-bold text-gray-800" text="Someone Famous" />
            <Label class="ml-0 text-xs font-bold text-gray-400" text="Website Designer" />
          </View>
        </View>

        <View class="w-screen mx-2 bg-gray-300 rounded-1 h-0.5" />

        <View class="h-48 grid-flow-row mt-2" ios:onSingletap="doAction" android:onClick="doAction">
          <View class="grid-rows-5 ml-0 w-72">
            <View class="items-center horizontal bg-selected-purple-100" action="profile">
              <Label class="h-full ml-0 text-xl text-center text-purple-700 bg-transparent border-transparent touch-enabled-false w-14 fas fa-user" />
              <Label class="text-sm text-purple-700 touch-enabled-false" text="Edit Profile" />
            </View>
          </View>

          <View class="grid-rows-5 ml-0 w-72">
            <View class="items-center horizontal bg-selected-purple-100" action="inbox">
              <Label class="h-full ml-0 text-xl text-center text-purple-700 bg-transparent border-transparent touch-enabled-false w-14 fas fa-inbox" />
              <Label class="text-sm text-purple-700 touch-enabled-false" text="Inbox" />
            </View>
          </View>

          <View class="grid-rows-5 ml-0 w-72">
            <View class="items-center horizontal bg-selected-purple-100" action="settings">
              <Label class="h-full ml-0 text-xl text-center text-purple-700 bg-transparent border-transparent touch-enabled-false w-14 fas fa-cog" />
              <Label class="text-sm text-purple-700 touch-enabled-false" text="Settings" />
            </View>
          </View>

          <View class="grid-rows-5 ml-0 w-72">
            <View class="items-center horizontal bg-selected-purple-100" action="support">
              <Label class="h-full ml-0 text-xl text-center text-purple-700 bg-transparent border-transparent touch-enabled-false w-14 fas fa-question-circle" />
              <Label class="text-sm text-purple-700 touch-enabled-false" text="Support" />
            </View>
          </View>

          <View class="grid-rows-5 ml-0 w-72">
            <View class="items-center horizontal bg-selected-purple-100" action="sign-out">
              <Label class="h-full ml-0 text-xl text-center text-purple-700 bg-transparent border-transparent touch-enabled-false w-14 fas fa-sign-out-alt" />
              <Label class="text-sm text-purple-700 touch-enabled-false" text="Sign Out" />
            </View>
          </View>
        </View>
      </View>

      <View class="w-8 h-8 mb-0 mr-0 bg-blue-400 rounded-tl-br-md">
        <Button id="myCardChevron" class="text-white bg-transparent border-transparent fas fa-chevron-down" ios:onSingletap="myCardClicked" android:onClick="myCardClicked" />
      </View>

      <Animation id="myCardAnimation" module="purgetss.ui" class="duration-150 open:h-(298) close:h-24" />
      <Animation id="myCardAnimationChevron" module="purgetss.ui" class="duration-150 open:rotate-180 close:rotate-0" />
    </View>

    <Label id="action" class="w-screen h-10 mx-4 mb-6 text-sm font-bold bg-purple-800 rounded-lg text-purple-50" />

    <Animation id="draggableAnimation" module="purgetss.ui" class="bounds:m-4 bounds:mb-20" />
  </Window>
</Alloy>

index.js

$.index.open();

$.draggableAnimation.draggable($.myCard);

function sideBarClicked(e) {
  $.sideBarAnimation.play($.sideBar);
  $.sideBarAnimationChevron.play($.sideBarChevron);
}

function myCardClicked() {
  $.myCardAnimation.play($.myCard);
  $.myCardAnimationChevron.play($.myCardChevron);
}

function doAction(e) {
  if (e.source.action) $.action.text = `   Action: ${e.source.action}`;
}

* low framerate gif