diff options
5 files changed, 105 insertions, 93 deletions
diff --git a/main/app/sprinkles/admin/src/Controller/PostController.php b/main/app/sprinkles/admin/src/Controller/PostController.php index cab87cd..f4a1905 100644 --- a/main/app/sprinkles/admin/src/Controller/PostController.php +++ b/main/app/sprinkles/admin/src/Controller/PostController.php @@ -67,9 +67,11 @@ class PostController extends SimpleController foreach ($ImagesFromFriends as $ImageFromFriend) {
$ImageFromFriend->image_url = $config["site.uri.public"] . "/image/" . $ImageFromFriend->image_id;
if ($ImageFromFriend->user_id == $user->id) { // UPLOADED FROM HIMSELF
+ $ImageFromFriend->username = $user->user_name;
$ImageFromFriend->full_name = $user->full_name; // ADD USERNAME TO IMAGE ID
$ImageFromFriend->avatar = $user->avatar;
} else { // UPLOADED FROM ANOTHER USER
+ $ImageFromFriend->username = $UsersFriendInformation[0]->user_name;
$ImageFromFriend->full_name = $UsersFriendInformation[0]->full_name; // ADD USERNAME TO IMAGE ID
$ImageFromFriend->avatar = $UsersFriendInformation[0]->avatar;
}
diff --git a/main/app/sprinkles/core/assets/SiteAssets/css/main.css b/main/app/sprinkles/core/assets/SiteAssets/css/main.css index ca85727..47076cd 100644 --- a/main/app/sprinkles/core/assets/SiteAssets/css/main.css +++ b/main/app/sprinkles/core/assets/SiteAssets/css/main.css @@ -64,6 +64,35 @@ img { height: 100%;
}
+/**************
+USER SELECT ROW
+**************/
+.UserSelector {
+ display: grid;
+ grid-template-columns: 10% 20% auto 10%;
+ overflow-y: auto;
+ max-height: 45%;
+ width: 100%;
+ z-index: 9999;
+}
+
+.UserSelector .Avatar {
+ grid-column-start: 2;
+ justify-self: center;
+ align-self: center;
+ height: 50px;
+ width: 50px;
+ -webkit-border-radius: 100%;
+ -moz-border-radius: 100%;
+ border-radius: 100%;
+}
+
+.UserSelector .UsersFullName {
+ grid-column-start: 3;
+ justify-self: center; /* OR start */
+ align-self: center;
+}
+
/*******
SWIPEABLE
*******/
@@ -175,31 +204,6 @@ EXPLORE WINDOW border-radius: 25px;
}
-.SearchResults {
- display: grid;
- grid-template-columns: 10% 20% auto 10%;
- overflow-y: auto;
- max-height: 45%;
- width: 100%;
-}
-
-.SearchResults .Avatar {
- grid-column-start: 2;
- justify-self: center;
- align-self: center;
- height: 50px;
- width: 50px;
- -webkit-border-radius: 100%;
- -moz-border-radius: 100%;
- border-radius: 100%;
-}
-
-.SearchResults .UsersFullName {
- grid-column-start: 3;
- justify-self: center; /* OR start */
- align-self: center;
-}
-
/**********
CHAT WINDOW
**********/
@@ -213,33 +217,6 @@ hr.ChatHeaderDivider { margin-bottom: 0.6em; /* cause of symmetry things */
}
-/* receiver select window */
-.SelectReceiver .ReceiverSelector {
- display: grid;
- grid-template-columns: 10% 20% auto 10%;
- overflow-y: auto;
- max-height: 45%;
- width: 100%;
- z-index: 9999;
-}
-
-.SelectReceiver .ReceiverSelector .Avatar {
- grid-column-start: 2;
- justify-self: center;
- align-self: center;
- height: 50px;
- width: 50px;
- -webkit-border-radius: 100%;
- -moz-border-radius: 100%;
- border-radius: 100%;
-}
-
-.SelectReceiver .ReceiverSelector .UsersFullName {
- grid-column-start: 3;
- justify-self: center; /* OR start */
- align-self: center;
-}
-
/* main chat */
.SelectedReceiver {
display: none;
@@ -402,31 +379,6 @@ FRIEND TAB margin: 5px;
}
-.FriendList {
- display: grid;
- grid-template-columns: 10% 20% auto 10%;
- overflow-y: auto;
- max-height: 45%;
- width: 100%;
-}
-
-.FriendList .Avatar {
- grid-column-start: 2;
- justify-self: center;
- align-self: center;
- height: 50px;
- width: 50px;
- -webkit-border-radius: 100%;
- -moz-border-radius: 100%;
- border-radius: 100%;
-}
-
-.FriendList .FriendName {
- grid-column-start: 3;
- justify-self: center; /* OR start */
- align-self: center;
-}
-
/***********
PERSONAL TAB
***********/
@@ -475,6 +427,16 @@ PERSONAL TAB margin-bottom: var(--navbar-margin-height);
}
+/****************
+USER PROFILE PAGE
+****************/
+.UserProfilePage {
+ position: relative;
+ overflow: auto;
+ margin: 5px;
+}
+
+
/*****
NAVBAR
*****/
diff --git a/main/app/sprinkles/core/assets/SiteAssets/js/chat.js b/main/app/sprinkles/core/assets/SiteAssets/js/chat.js index 0989860..d3f443a 100644 --- a/main/app/sprinkles/core/assets/SiteAssets/js/chat.js +++ b/main/app/sprinkles/core/assets/SiteAssets/js/chat.js @@ -308,9 +308,9 @@ function InitializeChatServer() { });
// SET RECEIVER
- $(document).on("click", ".ReceiverSelector", function () {
+ $(document).on("click", ".SelectReceiver .UserSelector", function () {
ReceiversUsername = $(this).attr("data-username");
- ReceiversId = $(this).attr("data-id");
+ ReceiversId = $(this).attr("data-user-id");
ChatSocket.send(JSON.stringify({
ClientMessageType: "SetReceiver",
ReceiversId: ReceiversId,
diff --git a/main/app/sprinkles/core/assets/SiteAssets/js/main.js b/main/app/sprinkles/core/assets/SiteAssets/js/main.js index 136f188..87b9b2c 100644 --- a/main/app/sprinkles/core/assets/SiteAssets/js/main.js +++ b/main/app/sprinkles/core/assets/SiteAssets/js/main.js @@ -13,6 +13,18 @@ const ExploreData = $("#ExploreData"); /**
+ * To get HTML for user selector
+ *
+ * @param User
+ * @returns {string}
+ * @constructor
+ */
+function GetUserSelectorHTML(User) {
+ return "<div class='UserSelector' data-username='" + User.username + "' data-user-id='" + User.id + "'><img class='Avatar' src='" + User.avatar + "'/><div class='UsersFullName'>" + User.full_name + "</div></div><hr class='ShorterLine'>"
+}
+
+
+/**
* CACHE IMAGES
* @type {*|jQueryImageCaching|jQuery}
*/
@@ -121,11 +133,11 @@ $("#ImageUploadButton").on("click", function () { swal({
title: 'Choose an image to upload!',
html: "<form id='ImageUploadForm'>" +
- "<input formenctype='multipart/form-data' type='file' name='image' />" +
- "<input formenctype='multipart/form-data' type='submit' value='Upload!' />" +
- "<input type='hidden' name='" + site.csrf.keys.name + "' value='" + site.csrf.name + "' />" +
- "<input type='hidden' name='" + site.csrf.keys.value + "' value='" + site.csrf.value + "' />" +
- "</form>"
+ "<input formenctype='multipart/form-data' type='file' name='image' />" +
+ "<input formenctype='multipart/form-data' type='submit' value='Upload!' />" +
+ "<input type='hidden' name='" + site.csrf.keys.name + "' value='" + site.csrf.name + "' />" +
+ "<input type='hidden' name='" + site.csrf.keys.value + "' value='" + site.csrf.value + "' />" +
+ "</form>"
});
$(".swal2-confirm").text("Close");
@@ -153,13 +165,13 @@ UserSearchBar.keypress(function () { url: site.uri.public + "/api/search/user/" + RequestedUser,
success: function (UserArray) {
SearchResults.empty();
- UserArray.forEach(function(User) {
+ UserArray.forEach(function (User) {
console.log("%c[SEARCH LOGGER] User " + RequestedUser + " was found!", "color: green");
//var GifUrls = ["https://media.giphy.com/media/xUPGcg01dIAot4zyZG/giphy.gif", "https://media.giphy.com/media/IS9LfP9oSLdcY/giphy.gif", "https://media.giphy.com/media/5wWf7H0WTquIU1DFY4g/giphy.gif"];
//var RandomGif = Math.floor((Math.random() * GifUrls.length));
//var RandomGifUrl = GifUrls[RandomGif];
//console.image(RandomGifUrl, 0.5);
- SearchResults.append("<img class='Avatar' src='" + User.avatar + "'/><div class='UsersFullName'>" + User.full_name + "</div>");
+ SearchResults.append(GetUserSelectorHTML(User));
})
},
error: function () {
@@ -181,11 +193,11 @@ $(document).ready(function () { $.ajax({ // CHAT RECEIVERS -- more in chat.js
url: site.uri.public + "/api/users/u/" + current_username + "/friends",
success: function (receivers) {
- receivers.forEach(function (receiversInfo) {
- SelectReceiver.append("<div class='ReceiverSelector' data-username='" + receiversInfo.username + "' data-id='" + receiversInfo.id + "'><img class='Avatar' src='" + receiversInfo.avatar + "'/><div class='UsersFullName'>" + receiversInfo.full_name + "</div></div><hr class='ShorterLine'>");
- SelectedReceiver.prepend("<div style='display: none;' id='ChatMessages' class='ChatMessages' data-username='" + receiversInfo.username + "'></div>");
+ receivers.forEach(function (User) {
+ SelectReceiver.append(GetUserSelectorHTML(User));
+ SelectedReceiver.prepend("<div style='display: none;' id='ChatMessages' class='ChatMessages' data-username='" + User.username + "'></div>");
- FriendList.append("<img class='Avatar' src='" + receiversInfo.avatar + "'><a class='FriendName' href='" + site.uri.public + "/users/u/" + receiversInfo.username + "'>" + receiversInfo.full_name + "</a><br>");
+ FriendList.append(GetUserSelectorHTML(User));
})
},
error: function () {
@@ -200,14 +212,24 @@ $(document).ready(function () { images.forEach(function (imageInfo) {
FeedTabWindow.append("" +
"<div data-image-id='" + imageInfo.image_id + "' class='FeedImageWrapper'>" +
- "<div class='UploaderInfo'>" +
+ "<div data-username='" + imageInfo.username + "' data-id='" + imageInfo.user_id + "' class='UploaderInfo'>" +
"<img class='UploaderAvatar' src='" + imageInfo.avatar + "'>" +
"<div class='UploaderName'>" + imageInfo.full_name + "</div>" +
"</div>" +
"<img class='FeedImage' src='" + imageInfo.image_url + "'>" +
"</div>" +
"<hr>");
- })
+ });
+
+ /**
+ * USER PROFILE PAGE SHOW/RENDER -- needs to be initialized after ajax load
+ */
+ $("[data-username]").on("click", function () {
+ console.log(1);
+ $(".main > *").hide(); // TODO: Improve -- maybe move out of success ajax
+ $(".main").prepend(GetProfilePageHTML($(this).attr("data-username")));
+ });
+
},
error: function () {
console.log("%c[FEED LOGGER] No images in feed!", "color: red");
diff --git a/main/app/sprinkles/core/templates/pages/index.html.twig b/main/app/sprinkles/core/templates/pages/index.html.twig index 6eec2cc..54b891d 100644 --- a/main/app/sprinkles/core/templates/pages/index.html.twig +++ b/main/app/sprinkles/core/templates/pages/index.html.twig @@ -124,7 +124,8 @@ <p class="EditFieldText">{{ current_user.email }}</p><br>
<p class="EditFieldLabel">{{ translate('LOCALE') }}</p>
- <p class="EditFieldText">{{ site.locales.available[current_user.locale] }}</p><br> {# more in admin/templates/forms/user.html.twig #}
+ <p class="EditFieldText">{{ site.locales.available[current_user.locale] }}</p> {# more in admin/templates/forms/user.html.twig #}
+ <br>
<p class="EditFieldLabel">{{ translate('THEME') }}</p>
<p class="EditFieldText">{{ current_user.theme }}</p>
@@ -133,6 +134,31 @@ </div>
</div>
+
+ {# it's here so it's easier to find #}
+ <script>
+ /**
+ * @returns {string}
+ * @constructor
+ */
+ function GetProfilePageHTML(Username) {
+ return `
+ <div class="UserProfilePage">
+ <div class="headerWrap">
+ <div class="header">
+ <span class="LeftButtonHeader"><i class="fas fa-bars"></i></span>
+ <span class="HeaderCaption TabCaption">${Username}</span>
+ <span class="RightButtonHeader"><i class="fas fa-bell"></i></span>
+ </div>
+ <hr>
+ </div>
+ <div class="MainInTab UserProfilePageWindow">
+ </div>
+ </div>
+ `
+ }
+ </script>
+
<div class="Navbar">
<span id="0" class="NavbarIconWrap">
<img src="{{ assets.url('assets://SiteAssets/icons/FriendFeedOutline.svg') }}">
|