commit 5701e0bac909ad93a5a7fcbfc8c625d405173597
parent d556c8ad31505287292cc0a8aed86fed6971e7de
Author: Marcel <mtrnord1@gmail.com>
Date: Sun, 14 Jun 2020 15:19:56 +0200
Replace loading animation
Took 27 minutes
Diffstat:
11 files changed, 157 insertions(+), 16 deletions(-)
diff --git a/Cargo.toml b/Cargo.toml
@@ -20,6 +20,8 @@ wasm-bindgen = "0.2"
wasm-bindgen-futures = "0.4.12"
wasm-logger = "0.2"
wee_alloc = "0.4"
+
+# Yew
yew = { git = "https://github.com/yewstack/yew" }
yew-router = { git = "https://github.com/yewstack/yew" }
yewtil = { git = "https://github.com/yewstack/yew" }
@@ -38,12 +40,6 @@ tr = { version = "0.1.3", default-features = false, features = ["gettext"]}
i18n-embed = { version = "0.4", features = ["web-sys-requester"] }
rust-embed = { version = "5", features = ["debug-embed", "compression"]}
-[dev-dependencies]
-reqwest = { version = "0.10", features = ["json"] }
-fantoccini = "0.13.1"
-tokio = { version = "0.2", features = ["full"] }
-
-
[dependencies.web-sys]
version = "0.3"
features = [
diff --git a/cypress/integration/login_spec.js b/cypress/integration/login_spec.js
@@ -17,9 +17,9 @@ describe('LoginPage', () => {
it('Does login', () => {
login()
// First show spinner
- cy.get('span[uk-spinner]').should('be.visible');
+ cy.get('svg#loading').should('be.visible');
// Now it should be gone and instead we see the roomlist
- cy.get('span[uk-spinner]').should('not.be.visible');
+ cy.get('svg#loading').should('not.be.visible');
cy.get('ul.scrollable').should('be.visible');
})
})
diff --git a/src/app/components/event_list.rs b/src/app/components/event_list.rs
@@ -1,10 +1,10 @@
-use std::collections::HashMap;
use log::*;
use matrix_sdk::{
events::room::message::{MessageEvent, MessageEventContent},
identifiers::RoomId,
Room,
};
+use std::collections::HashMap;
use yew::prelude::*;
use crate::app::components::events::{image::Image, notice::Notice, text::Text, video::Video};
diff --git a/src/app/components/mod.rs b/src/app/components/mod.rs
@@ -1,3 +1,4 @@
pub mod event_list;
pub mod events;
+pub mod raw_html;
pub mod room_list;
diff --git a/src/app/components/raw_html.rs b/src/app/components/raw_html.rs
@@ -0,0 +1,49 @@
+use web_sys::Element;
+use yew::{html, Component, ComponentLink, Html, NodeRef, Properties, ShouldRender};
+
+#[derive(Debug, Clone, Eq, PartialEq, Properties)]
+pub struct RawHTMLProps {
+ pub inner_html: String,
+}
+
+pub struct RawHTML {
+ props: RawHTMLProps,
+ node_ref: NodeRef,
+}
+
+impl Component for RawHTML {
+ type Message = ();
+ type Properties = RawHTMLProps;
+
+ fn create(props: Self::Properties, _: ComponentLink<Self>) -> Self {
+ Self {
+ props,
+ node_ref: NodeRef::default(),
+ }
+ }
+
+ fn update(&mut self, _: Self::Message) -> ShouldRender {
+ true
+ }
+
+ fn change(&mut self, props: Self::Properties) -> ShouldRender {
+ if self.props != props {
+ self.props = props;
+ true
+ } else {
+ false
+ }
+ }
+
+ fn view(&self) -> Html {
+ // create the parent element and store a reference to it
+ html! {
+ <div ref=self.node_ref.clone()/>
+ }
+ }
+
+ fn rendered(&mut self, _first_render: bool) {
+ let el = self.node_ref.cast::<Element>().unwrap();
+ el.set_inner_html(&self.props.inner_html);
+ }
+}
diff --git a/src/app/components/room_list.rs b/src/app/components/room_list.rs
@@ -1,4 +1,5 @@
use std::collections::HashMap;
+use std::include_str;
use matrix_sdk::{identifiers::RoomId, js_int::UInt, Room};
use serde::{Deserialize, Serialize};
@@ -11,6 +12,7 @@ use yewtil::NeqAssign;
use tr::tr;
+use crate::app::components::raw_html::RawHTML;
use crate::app::matrix::{MatrixAgent, Request, Response};
pub struct RoomList {
@@ -142,7 +144,7 @@ impl Component for RoomList {
html! {
<div class="container">
<div class="uk-position-center uk-padding">
- <span uk-spinner="ratio: 4.5"></span>
+ <RawHTML inner_html=include_str!("../svgs/loading_animation.svg")/>
</div>
</div>
}
diff --git a/src/app/matrix/sync.rs b/src/app/matrix/sync.rs
@@ -1,5 +1,8 @@
use std::time::Duration;
+use crate::app::matrix::types::{get_media_download_url, get_video_media_download_url};
+use crate::app::matrix::Response;
+use log::*;
use matrix_sdk::{
api::r0::sync::sync_events::Response as SyncResponse,
events::{collections::all::RoomEvent, room::message::MessageEventContent},
@@ -7,9 +10,6 @@ use matrix_sdk::{
Client, SyncSettings,
};
use yew::Callback;
-use log::*;
-use crate::app::matrix::types::{get_media_download_url, get_video_media_download_url};
-use crate::app::matrix::Response;
pub struct Sync {
pub(crate) matrix_client: Client,
diff --git a/src/app/svgs/loading_animation.svg b/src/app/svgs/loading_animation.svg
@@ -0,0 +1,29 @@
+<svg viewbox="-200 -150 400 300" id="loading">
+ <defs>
+ <line id="ray" x1="-5" x2="5"></line>
+ <clipPath id="cp">
+ <rect x="-200" y="-150" width="400" height="150"></rect>
+ </clipPath>
+ </defs>
+ <line id="line" x1="-76" x2="76"></line>
+ <text text-anchor="middle" y="45">Loading...</text>
+ <g id="sun" clip-path="url(#cp)">
+ <g id="mover">
+ <circle id="main" r="50"></circle>
+ <g id="eyes">
+ <circle r="3" cx="-13"></circle>
+ <circle r="3" cx="13"></circle>
+ </g>
+ <g id="rays">
+ <use xlink:href="#ray" transform="rotate(315) translate(70)"></use>
+ <use xlink:href="#ray" transform="rotate(270) translate(70)"></use>
+ <use xlink:href="#ray" transform="rotate(225) translate(70)"></use>
+ <use xlink:href="#ray" transform="rotate(180) translate(70)"></use>
+ <use xlink:href="#ray" transform="rotate(135) translate(70)"></use>
+ <use xlink:href="#ray" transform="rotate(90) translate(70)"></use>
+ <use xlink:href="#ray" transform="rotate(45) translate(70)"></use>
+ <use xlink:href="#ray" transform="rotate(0) translate(70)"></use>
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/src/app/views/login.rs b/src/app/views/login.rs
@@ -1,13 +1,16 @@
+use std::include_str;
+use std::thread::sleep;
+use std::time::Duration;
+
use log::*;
use serde::{Deserialize, Serialize};
use yew::prelude::*;
use tr::tr;
+use crate::app::components::raw_html::RawHTML;
use crate::app::matrix::{MatrixAgent, Request, Response};
use crate::errors::{Field, MatrixError};
-use wasm_bindgen::__rt::core::time::Duration;
-use wasm_bindgen::__rt::std::thread::sleep;
pub struct Login {
link: ComponentLink<Self>,
@@ -145,7 +148,7 @@ impl Component for Login {
html! {
<div class="container">
<div class="uk-position-center uk-padding">
- <span uk-spinner="ratio: 4.5"></span>
+ <RawHTML inner_html=include_str!("../svgs/loading_animation.svg")/>
</div>
</div>
}
diff --git a/static/custom-css.scss b/static/custom-css.scss
@@ -93,3 +93,5 @@ em {
.roomlist {
min-width: 260px;
}
+
+@import "sun-loading-animation.scss";
diff --git a/static/sun-loading-animation.scss b/static/sun-loading-animation.scss
@@ -0,0 +1,59 @@
+$c: #f4c042;
+$t: 5s;
+
+svg {
+ width: 400px; height: 300px;
+}
+
+svg * {
+ stroke: $c;
+ stroke-linecap: round;
+ vector-effect: non-scaling-stroke;
+}
+
+[id='line'] { stroke-width: 3; }
+
+svg text {
+ font: .875em century gothic, verdana, sans-serif;
+}
+
+[id='mover'] {
+ animation: sun-motion $t cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;
+}
+
+[id='main'] {
+ fill: transparent;
+ stroke-width: 7;
+}
+
+[id='eyes'] {
+ animation: eye-motion $t ease-out infinite;
+
+ circle { fill: $c; }
+}
+
+[id='ray'] {
+ stroke-width: 4;
+}
+
+[id='rays'] {
+ animation: rot $t linear infinite;
+}
+
+@keyframes rot {
+ to { transform: rotate(.25turn); }
+}
+
+@keyframes eye-motion {
+ 0%, 20%, 49%, 100% { transform: translate(-13px); }
+ 21%, 25%, 29%, 47% { transform: translate(13px) scaleY(1); }
+ 27% { transform: translate(13px) scaleY(0); }
+ 48% { transform: translate(0); }
+}
+
+@keyframes sun-motion {
+ 0%, 99%, 100% { transform: translateY(-16px); }
+ 50% { transform: translateY(-29px); }
+ 52%, 98% { transform: translate(4px) scaleY(1.25); }
+ 53%, 97% { transform: translateY(23px); }
+}
