Skip to content

Add transition effect #423

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.

Sign up for GitHub

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

Merged
martinRenou merged 12 commits into from
May 11, 2017
Merged

Add transition effect #423

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
78dc6ab
Add transition effect
martinRenou May 5, 2017
a6fa268
Switch from simple fade to slide-fade
martinRenou May 5, 2017
b380478
Replace the slide-fade transition by a fade transition
martinRenou May 8, 2017
1645faf
Merge branch 'switch_to_vue' into add_transitions
martinRenou May 8, 2017
a05e0ff
Add transitions for the list of applications
martinRenou May 8, 2017
b4fb56a
Merge branch 'switch_to_vue' into add_transitions
martinRenou May 8, 2017
0c5ab0e
Merge branch 'switch_to_vue' into add_transitions
martinRenou May 8, 2017
571c86b
Try to fix selenium tests
martinRenou May 8, 2017
7a2430d
Try to fix selenium tests 2
martinRenou May 8, 2017
c61f65a
Fix selenium tests
martinRenou May 9, 2017
15c537e
Merge branch 'switch_to_vue' into add_transitions
martinRenou May 10, 2017
eb96180
Remove useless method
martinRenou May 10, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions remoteappmanager/static/css/remoteappmanager.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,6 +156,29 @@ li a .stop-button:hover {
display: block;
}

/* transition effect */
.fade-enter-active {
transition: opacity .3s
}
.fade-leave-active {
transition: opacity 2.0s
}
.fade-enter, .fade-leave-to {
opacity: 0
}

.list-enter, .list-leave-to {
opacity: 0;
transform: translateX(-50px);
}
.list-enter-active, .list-leave-active {
transition: all 0.5s;
position: absolute;
}
.list-move {
transition: transform .5s;
}

.truncate {
overflow: hidden;
text-overflow: ellipsis;
Expand Down
8 changes: 5 additions & 3 deletions remoteappmanager/static/js/home/views/application_list_view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ define([
' <li class="header">APPLICATIONS</li>' +
'</ul>' +

'<ul id="applistentries" class="sidebar-menu">' +
'<ul class="sidebar-menu">' +
' <li v-show="!model.loading && model.app_list.length === 0">' +
' <a href="#">No applications found</a>' +
' </li>' +
Expand All @@ -28,9 +28,11 @@ define([
' <span>Loading</span>' +
' </a>' +
' </li>' +
'</ul>' +

' <!-- Application list -->' +
' <li v-for="app in visible_list"' +
'<transition-group name="list" tag="ul" id="applistentries" class="sidebar-menu">' +
' <li v-for="app in visible_list" v-bind:key="app"' +
' :class="{ active: index_of(app) === model.selected_index }"' +
' @click="model.selected_index = index_of(app); $emit(\'entry_clicked\');">' +

Expand All @@ -49,7 +51,7 @@ define([
' <span>{{ app.app_data.image | app_name }}</span>' +
' </a>' +
' </li>' +
'</ul>' +
'</transition-group>' +
'<!-- /.sidebar-menu -->' +
'</section>' +
'<!-- /.sidebar -->',
Expand Down
4 changes: 3 additions & 1 deletion remoteappmanager/static/js/home/views/application_view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ define([
' v-if="current_app !== null"' +
' :class="{ content: true, \'no-padding\': current_app.is_running() }">' +
' <!-- Start Form -->' +
' <div v-if="!current_app.is_running()" class="row">' +
' <transition name="fade" v-if="!current_app.is_running()">' +
' <div v-if="current_app.is_stopped()" class="row">' +
' <div class="col-md-offset-2 col-md-8">' +
' <div class="box box-primary">' +
' <div class="box-header with-border">' +
Expand Down Expand Up @@ -55,6 +56,7 @@ define([
' </div>' +
' </div>' +
' </div>' +
' </transition>' +

' <!-- Application View -->' +
' <iframe v-if="current_app.is_running()"' +
Expand Down
17 changes: 8 additions & 9 deletions selenium_tests/test_hide_application.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,22 @@
# -*- coding: utf-8 -*-
from selenium_tests.selenium_test_base import SeleniumTestBase
from selenium.webdriver.common.by import By


class TestHideApplication(SeleniumTestBase):
def test_hide_application(self):
driver = self.driver
with self.login():
self.wait_for(
lambda:
driver.find_element_by_css_selector(
"#applistentries > li > a > span").text != "Loading")
self.wait_for(lambda:
driver.find_element_by_css_selector(
"#loading-spinner").value_of_css_property(
'display') == "none")

# Click on the search box
search_box = driver.find_element_by_name("q")
search_box.clear()
search_box.send_keys('foobarheho')

self.wait_for(
lambda:
driver.find_element_by_css_selector(
"#applistentries > li").value_of_css_property(
'display') == "none")
self.wait_for(lambda:
not self.is_element_present(
By.CSS_SELECTOR, '#applistentries > li'))
5 changes: 3 additions & 2 deletions selenium_tests/test_start_stop_container.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,9 @@ def test_start_stop_container(self):
driver = self.driver
with self.login():
self.wait_for(lambda:
driver.find_element_by_css_selector(
"#applistentries > li > a > span").text != "Loading")
driver.find_element_by_css_selector(
"#loading-spinner").value_of_css_property(
'display') == "none")

self.click_by_css_selector("#applistentries > li > a > img")
self.click_by_css_selector(".start-button")
Expand Down