Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Transition system + Stack container + ImageGallery component #95

Open
wants to merge 13 commits into
base: master
Choose a base branch
from

Conversation

aW4KeNiNG
Copy link
Member

@aW4KeNiNG aW4KeNiNG commented Jan 29, 2017

Initial implementation for Stack container.

It adds a transition system. A transition is a collection of "in" animations and "out" animations.

An example with a video here:

https://www.dropbox.com/s/5y2h5pffyr62hu6/stack-component.mp4?dl=0

image

The code (it requires the PR #94 and #91):
feature_stack.zip

<?xml version="1.0" encoding="utf-8"?>
<vbox id="main">
    <style source="../css/main.css" />

    <script>

        function onTransitionModeChange() {
            stack.transitionMode = transitionMode.selectedItem.value;
        }

    </script>

    <stack id="stack">

        <image resource="img/1.jpg" styleNames="imageStack"/>
        <image resource="img/2.jpg" styleNames="imageStack"/>
        <image resource="img/3.jpg" styleNames="imageStack"/>
        <image resource="img/4.jpg" styleNames="imageStack"/>
        <image resource="img/5.jpg" styleNames="imageStack"/>
        <image resource="img/6.jpg" styleNames="imageStack"/>
        <image resource="img/7.jpg" styleNames="imageStack"/>
        <image resource="img/8.jpg" styleNames="imageStack"/>

    </stack>

    <hbuttonbar id="bar"
                styleNames="buttonSelector"/>

    <spacer height="20"/>

    <hbox>
        <label text="Transition Mode:"
               styleNames="infoLabel"/>
        <dropdown id="transitionMode"
                  requireSelection="true"
                  onchange="onTransitionModeChange()"
                  styleNames="infoDropdown">
            <data>
                <item value="none"/>
                <item value="horizontal-slide"/>
                <item value="horizontal-slide-from-left"/>
                <item value="horizontal-slide-from-right"/>
                <item value="vertical-slide"/>
                <item value="vertical-slide-from-top"/>
                <item value="vertical-slide-from-bottom"/>
                <item value="fade"/>
            </data>
        </dropdown>
    </hbox>

</vbox>
#main {
    padding: 0.6rem;
}

.buttonSelector {
    horizontal-align: center;
    spacing: 1rem;
}

.buttonSelector .buttonbar-button {
    background-color: #939393;
    border: none;
    border-radius: 1rem;
    margin: 0;
    padding: 0;
    spacing: 0;
    height: 1rem;
    width: 1rem;
}

.buttonSelector .buttonbar-button:down {
    background-color: #237eac;
}

.infoLabel {
    text-align: right;
    vertical-align: center;
    width: 150px;
}

.infoDropdown {
    width: 200px;
}

.imageStack {
    scale-mode: fit-outside;
    height: 100%;
    width: 100%;
}

.stack {
    border: 1px solid #CCCCCC;
    padding: 0.6rem;
    height: 400px;
    width: 400px;
}

@aW4KeNiNG
Copy link
Member Author

aW4KeNiNG commented Jan 30, 2017

Added ImageGallery component based in the Stack. You can touch/move to change the current image. It needs a 20% of size to change, but you can configure it with percentToChange.
It works in horizontal and vertical (it depends of transitionMode).

Here the example:

https://www.dropbox.com/s/a5tcv7mbla6baqx/imagegallery.mp4?dl=0

feature_gallery.zip

@aW4KeNiNG aW4KeNiNG changed the title Transition system + Stack container Transition system + Stack container + ImageGallery component Jan 30, 2017
@ianharrigan
Copy link
Member

Hey Pablo - i really like this component - however, i do wonder if it should go in haxeui core? Ive been toying with the idea of an "extended" component lib. Something like "haxeui-ext" (different name suggestions more that welcome!), that would have things like this in it, as well as a property grid (used in the builder), and things like that. Thoughts?

@aW4KeNiNG
Copy link
Member Author

Yes, maybe the ImageGallery component, but Transition system and the Stack component I think that it should go in the core.

# Conflicts:
#	haxe/ui/parsers/modules/Module.hx
#	haxe/ui/parsers/modules/XMLParser.hx
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants