commit 0019a16ac0581cb2a1bde6c5db93ede15f05a474
parent 5701e0bac909ad93a5a7fcbfc8c625d405173597
Author: Marcel <mtrnord1@gmail.com>
Date: Sun, 14 Jun 2020 17:26:02 +0200
Replace lightbox and icons with non js versions and use material icons and a full css3 lightbox.
Took 44 minutes
Diffstat:
8 files changed, 237 insertions(+), 33 deletions(-)
diff --git a/Cargo.toml b/Cargo.toml
@@ -40,6 +40,9 @@ 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"]}
+# Used for lightboxes
+rand = "0.7"
+
[dependencies.web-sys]
version = "0.3"
features = [
diff --git a/src/app/components/event_list.rs b/src/app/components/event_list.rs
@@ -175,7 +175,7 @@ impl Component for EventList {
})>
<div>
<div class="uk-inline" style="display: block !important;">
- <span class="uk-form-icon" uk-icon="icon: pencil"></span>
+ <span class="material-icons" id="ma-icon">{"create"}</span>
<input class="uk-input" type="text"
value=&self.state.message.as_ref().unwrap_or(&"".to_string())
oninput=self.link.callback(|e: InputData| Msg::SetMessage(e.value))
diff --git a/src/app/components/events/image.rs b/src/app/components/events/image.rs
@@ -4,6 +4,7 @@ use matrix_sdk::{
Room,
};
use yew::prelude::*;
+use rand::random;
pub(crate) struct Image {
props: Props,
@@ -58,11 +59,6 @@ impl Component for Image {
"".to_string()
};
- let caption = format!(
- "{}: {}",
- sender_displayname,
- self.props.image_event.as_ref().unwrap().body
- );
if self
.props
.image_event
@@ -93,24 +89,33 @@ impl Component for Image {
None => image_url.clone(),
Some(v) => v,
};
+ let lightbox_id: u8 = random();
+ let lightbox_id_full = format!("image_{}", lightbox_id);
+ let lightbox_href_full = format!("#image_{}", lightbox_id);
if new_user {
html! {
- <>
+ <div>
<p><displayname>{sender_displayname}{": "}</displayname></p>
- <div uk-lightbox="">
- <a class="uk-inline" href=image_url data-caption=caption >
- <img src=thumbnail alt=caption />
- </a>
- </div>
- </>
+ <a href={lightbox_href_full.clone()}><img src=thumbnail/></a>
+ <div class="lightbox short-animate" id={lightbox_id_full.clone()}>
+ <img class="long-animate" src=image_url/>
+ </div>
+ <div id="lightbox-controls" class="short-animate">
+ <a id="close-lightbox" class="long-animate" href="#!">{"Close Lightbox"}</a>
+ </div>
+ </div>
}
} else {
html! {
- <div uk-lightbox="">
- <a class="uk-inline" href=image_url data-caption=caption >
- <img src=thumbnail alt=caption />
- </a>
- </div>
+ <div>
+ <a href={lightbox_href_full.clone()}><img src=thumbnail/></a>
+ <div class="lightbox short-animate" id={lightbox_id_full.clone()}>
+ <img class="long-animate" src=image_url/>
+ </div>
+ <div id="lightbox-controls" class="short-animate">
+ <a id="close-lightbox" class="long-animate" href="#!">{"Close Lightbox"}</a>
+ </div>
+ </div>
}
}
} else {
diff --git a/src/app/components/events/video.rs b/src/app/components/events/video.rs
@@ -4,6 +4,7 @@ use matrix_sdk::{
Room,
};
use yew::prelude::*;
+use rand::random;
pub(crate) struct Video {
props: Props,
@@ -93,24 +94,39 @@ impl Component for Video {
None => video_url.clone(),
Some(v) => v,
};
+ let lightbox_id: u8 = random();
+ let lightbox_id_full = format!("video_{}", lightbox_id);
+ let lightbox_href_full = format!("#video_{}", lightbox_id);
if new_user {
html! {
- <>
+ <div>
<p><displayname>{sender_displayname}{": "}</displayname></p>
- <div uk-lightbox="">
- <a class="uk-inline" href=video_url data-caption=caption data-poster=thumbnail >
- <img src=thumbnail alt=caption />
- </a>
- </div>
- </>
+ <a href={lightbox_href_full.clone()}><img src=thumbnail/></a>
+ <div class="lightbox short-animate" id={lightbox_id_full.clone()}>
+ <video class="long-animate" controls=true>
+ <source src=video_url type="video/mp4"/>
+ {"Your browser does not support the video tag."}
+ </video>
+ </div>
+ <div id="lightbox-controls" class="short-animate">
+ <a id="close-lightbox" class="long-animate" href="#!">{"Close Lightbox"}</a>
+ </div>
+ </div>
}
} else {
html! {
- <div uk-lightbox="">
- <a class="uk-inline" href=video_url data-caption=caption data-poster=thumbnail >
- <img src=thumbnail alt=caption />
- </a>
- </div>
+ <div>
+ <a href={lightbox_href_full.clone()}><img src=thumbnail/></a>
+ <div class="lightbox short-animate" id={lightbox_id_full.clone()}>
+ <video class="long-animate" controls=true>
+ <source src=video_url type="video/mp4"/>
+ {"Your browser does not support the video tag."}
+ </video>
+ </div>
+ <div id="lightbox-controls" class="short-animate">
+ <a id="close-lightbox" class="long-animate" href="#!">{"Close Lightbox"}</a>
+ </div>
+ </div>
}
}
} else {
diff --git a/src/app/components/room_list.rs b/src/app/components/room_list.rs
@@ -153,7 +153,7 @@ impl Component for RoomList {
<div class="container roomlist uk-flex uk-flex-column uk-width-1-6" style="height: 100%">
<div class="uk-padding uk-padding-remove-bottom" style="height: 50px">
<form class="uk-search uk-search-default">
- <span uk-search-icon=""></span>
+ <span class="material-icons" id ="ma-icon">{"search"}</span>
<input
class="uk-search-input"
type="search"
diff --git a/static/custom-css.scss b/static/custom-css.scss
@@ -94,4 +94,49 @@ em {
min-width: 260px;
}
+.uk-search, .uk-inline {
+ position: relative;
+}
+
+.uk-search input, .uk-inline input {
+ text-indent: 30px;
+}
+
+.uk-search #ma-icon, .uk-inline #ma-icon {
+ position: absolute;
+ top: 14px;
+ left: 13px;
+ font-size: 18px;
+}
+
+ul {
+ list-style: none;
+}
+
+ul > li > a:hover {
+ text-decoration: none !important;
+}
+
+ul > li > a {
+ padding: 5px 0;
+}
+
+.uk-nav-header {
+ padding: 5px 0;
+ text-transform: uppercase;
+ font-size: .875rem;
+}
+
+ul > li > a {
+ display: block;
+ text-decoration: none;
+}
+
+li {
+ display: list-item;
+ text-align: -webkit-match-parent;
+}
+
+
@import "sun-loading-animation.scss";
+@import "lightbox.scss";
diff --git a/static/index.html b/static/index.html
@@ -5,10 +5,9 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="Description" content="A Matrix Client written in Rust using WebAssembly.">
+ <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<title>Daydream</title>
</head>
<body>
- <script async defer src="js/uikit.min.js"></script>
- <script async defer src="js/uikit-icons.min.js"></script>
</body>
</html>
diff --git a/static/lightbox.scss b/static/lightbox.scss
@@ -0,0 +1,136 @@
+.short-animate {
+ -webkit-transition:.5s ease-in-out;
+ -moz-transition:.5s ease-in-out;
+ -ms-transition:.5s ease-in-out;
+ -o-transition:.5s ease-in-out;
+ transition:.5s ease-in-out;
+}
+
+.long-animate {
+ -webkit-transition: .5s .5s ease-in-out;
+ -moz-transition: .5s .5s ease-in-out;
+ -ms-transition: .5s .5s ease-in-out;
+ -o-transition:.5s .5s ease-in-out;
+ transition:.5s .5s ease-in-out;
+}
+
+.lightbox {
+ position:fixed;
+ top:-100%;
+ bottom:100%;
+ left:0;
+ right:0;
+ background: rgba(161, 161, 161, 0.8);
+ z-index:501;
+ opacity:0;
+}
+
+.lightbox img {
+ position:absolute;
+ margin:auto;
+ top:0;
+ left:0;
+ right:0;
+ bottom:0;
+ max-width:0%;
+ max-height:0%;
+}
+
+
+.lightbox video {
+ position:absolute;
+ margin:auto;
+ top:0;
+ left:0;
+ right:0;
+ bottom:0;
+ max-width:0%;
+ max-height:0%;
+}
+
+#lightbox-controls {
+ position:fixed;
+ height:70px;
+ width:70px;
+ top:-70px;
+ right:0;
+ z-index:502;
+ background:rgba(0,0,0,.1);
+}
+
+#close-lightbox {
+ display:block;
+ position:absolute;
+ overflow:hidden;
+ height:50px;
+ width:50px;
+ text-indent:-5000px;
+ right:10px;
+ top:10px;
+ -webkit-transform:rotate(45deg);
+ -moz-transform:rotate(45deg);
+ -ms-transform:rotate(45deg);
+ -o-transform:rotate(45deg);
+ transform:rotate(45deg);
+}
+
+#close-lightbox:before {
+ content:'';
+ display:block;
+ position:absolute;
+ height:0px;
+ width:3px;
+ left:24px;
+ top:0;
+ background:white;
+ border-radius:2px;
+ -webkit-transition: .5s .5s ease-in-out;
+ -moz-transition: .5s .5s ease-in-out;
+ -ms-transition: .5s .5s ease-in-out;
+ -o-transition:.5s .5s ease-in-out;
+ transition:.5s .5s ease-in-out;
+}
+
+#close-lightbox:after {
+ content:'';
+ display:block;
+ position:absolute;
+ width:0px;
+ height:3px;
+ top:24px;
+ left:0;
+ background:white;
+ border-radius:2px;
+ -webkit-transition: .5s 1s ease-in-out;
+ -moz-transition: .5s 1s ease-in-out;
+ -ms-transition: .5s 1s ease-in-out;
+ -o-transition:.5s 1s ease-in-out;
+ transition:.5s 1s ease-in-out;
+}
+
+.lightbox:target {
+ top:0%;
+ bottom:0%;
+ opacity:1;
+}
+
+.lightbox:target img {
+ max-width:100%;
+ max-height:100%;
+}
+.lightbox:target video {
+ max-width:100%;
+ max-height:100%;
+}
+
+.lightbox:target ~ #lightbox-controls {
+ top:0px;
+}
+
+.lightbox:target ~ #lightbox-controls #close-lightbox:after {
+ width:50px;
+}
+
+.lightbox:target ~ #lightbox-controls #close-lightbox:before {
+ height:50px;
+}
