relita

an encrypted, decentralized, peer-to-peer social network
Log | Files | Refs | README | LICENSE | git clone https://git.ne02ptzero.me/git/relita

commit 649b76a5e5d0af63d33e6c356145f27088b71368
parent ba9cf9a67caebdc16f353dc9b00ffcdb471f14a3
Author: Ne02ptzero <louis@ne02ptzero.me>
Date:   Mon, 10 Apr 2017 05:31:12 +0200

Add(UI): New menu, new UI for adding a post

Diffstat:
Mcss/main.css | 196+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Mindex.html | 48++++++++++++++++++++++++++++++++++++++++++++----
Mjs/renderer.js | 73+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------
Mmain.js | 1+
4 files changed, 308 insertions(+), 10 deletions(-)

diff --git a/css/main.css b/css/main.css @@ -24,6 +24,16 @@ html, body { color: #F2F2F2; } +body { + margin-left: 102px; + width: -webkit-calc(100% - 102px); + +} + +input:focus { + outline:none; +} + .title { height: 90%; width: 100%; @@ -52,6 +62,118 @@ html, body { .add_post { display: none; + width: 100%; + border: 0; + height: 6.2%; + background: rgba(126, 130, 122, 0.21); +} + +.add_post .placeholder { + height: 100%; + font-size: 2em; + padding-left: 10px; + font-weight: lighter; + font-family: "Inconsolata"; + width: -webkit-calc(100% - 10px); + padding-top: 10px; +} + +.add_post .tabs { + display: none; +} + +.add_post .tabs ul { + list-style: none; + display: inline; +} + +.add_post .tabs ul li { + display: block; + float: left; + width: 16.66%; + text-align: center; + padding-top: 4px; + padding-bottom: 4px; + background: #141415; + transition-property: all; + transition-duration: 0.2s; +} + +.add_post .tabs ul li:hover { + background: transparent; + cursor: pointer; +} + +.add_post .tabs ul .active { + background: transparent; +} + +.add_post .tabs ul li i { + padding-right: 7px; +} + +.add_post .buttons { + display: none; + margin-left: 8px; +} + +.add_post .buttons ul { + display: inline; + list-style: none; +} + +.add_post .buttons ul li { + float: left; + text-align: center; + border: 1px solid transparent; +} + +.add_post .buttons ul .padding { + width: 68.5%; + display: block; +} + +.add_post .buttons ul .cancel { + width: 15%; + border: 1px solid white; + padding: 5px 0 5px 0; + transition-property: all; + transition-duration: 0.3s; +} + +.add_post .buttons ul .cancel:hover { + border-color: red; + cursor: pointer; +} + +.add_post .buttons ul .publish { + width: 15%; + border: 1px solid white; + padding: 5px 0 5px 0; + background: white; + color: black; + transition-property: all; + transition-duration: 0.3s; +} + +.add_post .buttons ul .publish:hover { + border-color: green; + cursor: pointer; +} + +.add_post .content_edition div { + display: none; +} + +.add_post .content_edition .post textarea { + width: -webkit-calc(100% - 2px); + height: 180px; + border: 0; + padding-left: 2px; + resize: none; + margin-bottom: 5px; + background: white; + font-family: "Inconsolata"; } .register { @@ -129,3 +251,77 @@ html, body { font-family: "Inconsolata"; background: #8C8979; } + +.menu { + position: absolute; + width: 100px; + height: 100%; + left: 0; + top: 0; + text-align: center; + background: #2F343B; + border-right: 3px solid rgba(0, 0, 0, 0.19); + display: none; +} + +.menu ul { + list-style: none; +} + +.menu ul li { + display: block; + border-bottom: 3px solid rgba(0, 0, 0, 0.12); + transition-property: all; + transition-duration: 0.3s; + padding-bottom: 5px; + padding-top: 5px; +} + +.menu ul li:hover { + background: #232527; + cursor: pointer; + color: white; +} + +.menu ul .main { + height: 10%; + background: #703030; + font-size: 3em; + font-weight: bold; + border-bottom: 3px solid rgb(80, 56, 56); +} + +.menu ul .last { + border-bottom: 0; +} + +.menu ul .my_profile { + position: absolute; + border-bottom: 0; + bottom: 5%; +} + +.menu ul .my_profile:hover { + cursor: pointer; + background: transparent; +} + +.menu ul .my_profile img { + width: 50%; +} + +.menu ul li i { + font-size: 2em; + color: #e8dfce; + margin-top: 15px; + margin-bottom: 15px; +} + +.round_image { + border-radius: 50%; +} + +.posts_list { + display: none; + margin-top: 15px; +} diff --git a/index.html b/index.html @@ -6,6 +6,20 @@ <link rel="stylesheet" href="./css/font-awesome/css/font-awesome.min.css"> </head> <body> + <div class='menu'> + <ul> + <li class='main'>R</li> + <li class='search'><i class="fa fa-search"></i></li> + <li class='feed'><i class="fa fa-feed"></i></li> + <li class='chat'><i class="fa fa-comment"></i></li> + <li class='music'><i class="fa fa-music"></i></li> + <li class='files'><i class="fa fa-file"></i></li> + <li class='settings last'><i class="fa fa-cog"></i></li> + <li class="my_profile"> + <img src="https://avatars1.githubusercontent.com/u/6032832?v=3&s=460" class="round_image"/> + </li> + </ul> + </div> <div class='title'> <ul> <li><h1>Relita</h1></li> @@ -14,10 +28,36 @@ </ul> </div> <div class='add_post'> - <input type='text' placeholder="Say Hi !"/> - <button class='submit_post'>Send !</button> - <div> - <div class='posts_list'></div> + <div class='tabs'> + <ul> + <li class='active' value="1"><i class="fa fa-file-text-o"></i>Post</li> + <li value="2"><i class="fa fa-newspaper-o"></i>Article</li> + <li value="3"><i class="fa fa-link"></i>Link</li> + <li value="4"><i class="fa fa-video-camera"></i>Video</li> + <li value="5"><i class="fa fa-music"></i>Music</li> + <li value="6"><i class="fa fa-camera"></i>Picture</li> + </ul> + </div> + <div class='content_edition'> + <div class='post 1'> + <textarea></textarea> + </div> + <div class='article 2'> + <span>Sup ?</span> + </div> + + </div> + <div class="placeholder">Link, share, write something !</div> + <div class='buttons'> + <ul> + <li class='cancel'>Cancel</li> + <li class='padding'>&nbsp;</li> + <li class='publish'>Publish</li> + </ul> + </div> + </div> + </div> + <div class='posts_list'></div> </body> <script>window.$ = window.jQuery = require('./js/jquery.min.js');</script> diff --git a/js/renderer.js b/js/renderer.js @@ -1,11 +1,19 @@ $(function() { const {ipcRenderer} = require('electron') + const id_to_post_type = [ + "post" + ] + ipcRenderer.on('connect_client', (event, arg) => { $(".title .status").html("Connection established. ("+ arg +")") $(".title i").fadeOut(600, function() { $(".title").fadeOut(500, function() { - $(".add_post").fadeIn(100); + $(".menu").fadeIn(300, function() { + $(".add_post").fadeIn(200, function () { + $(".posts_list").fadeIn(200); + }); + }); }); }) }) @@ -23,18 +31,71 @@ $(function() { }) ipcRenderer.on('new_entry', (event, arg) => { - if (arg.sync === true || arg.value.content.type != "post") + if (arg.sync === true) return ; - $(".posts_list").append("<strong>"+ arg.value.author + "</strong>: "+ arg.value.content.value + "<br />") + console.log(arg) + if (arg.value.content.sub_type === "post") + add_post_to_page(arg) }) ipcRenderer.send('connect_client', null); - $(".add_post button").click(function() { - val = $(".add_post input").val() + function get_content(id) { + if (id === 1) { + return {text: $(".add_post .1 textarea").val()} + } + } + + function remove_add_post() { + $(".add_post").animate({height: "6.2%"}, 200); + $(".add_post .placeholder").fadeIn(200); + $(".add_post .tabs").fadeOut(200); + $(".add_post .buttons").fadeOut(200); + $(".add_post .content_edition").fadeOut(0); + window.setTimeout(function() { + is_adding_post = false; + current_post_type = 1 + }, 50) + } + + function add_post_to_page(arg) { + if (arg.value.content.sub_type === "post") { + $(".posts_list").append("<strong>"+ arg.value.author + "</strong>: "+ arg.value.content.value.text + "<br />") + } + } + + $(".add_post .publish").click(function() { + val = get_content(current_post_type) + val.type = id_to_post_type[current_post_type - 1] if (val === "") return ; ipcRenderer.send('add_post', val); - $(".add_post input").val("") + remove_add_post(); + }) + + var is_adding_post = false; + var current_post_type = 1; + + $(".add_post").on('click', function() { + if (is_adding_post == true) + return ; + $(".add_post").animate({height: "25%"}, 200); + $(".add_post .placeholder").fadeOut(200); + $(".add_post .tabs").fadeIn(200); + $(".add_post .buttons").fadeIn(200); + $(".add_post .content_edition").fadeIn(0); + $(".add_post .content_edition ."+current_post_type).fadeIn(0); + is_adding_post = true; + }) + + $(".add_post .buttons .cancel").on("click", function() { + remove_add_post(); + }) + $(".add_post .tabs ul li").on("click", function () { + $(".add_post .tabs ul li").removeClass("active"); + $(this).addClass("active"); + current_post_type = $(this).val() + $(".add_post .content_edition div").fadeOut(0); + $(".add_post .content_edition ."+current_post_type).fadeIn(0); }) }) diff --git a/main.js b/main.js @@ -126,6 +126,7 @@ ipcMain.on('add_post', (event, arg) => { console.log("Adding new post, content is: "+ arg) sbot_client.publish({ type: 'post', + sub_type: arg.type, value: arg, }, function (err, msg) {