ebd532b608
Added custom checkbox list for selecting users in group options Added buttons to invoke group options Hover on the 'more-options' (3-dot) button in the top-right corner to view group options Note : group options will only be displayed when user is either creator or admin of respective group
136 lines
4.8 KiB
HTML
136 lines
4.8 KiB
HTML
<html lang="en">
|
|
|
|
<head>
|
|
<title>FLO Whatsapp</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="styles.css">
|
|
<!-- Font Awesome File -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
|
|
<script type="text/javascript" src="init.js"></script>
|
|
<script type="text/javascript" src="kBucket.js"></script>
|
|
<script type="text/javascript" src="app.js"></script>
|
|
|
|
</head>
|
|
|
|
<body onload="userDataStartUp();">
|
|
|
|
<div id="overlay">
|
|
<div class="userChecklist-container">
|
|
<input type="text" class="grpName form-control" placeholder="Group Name">
|
|
<div class="row searchBox">
|
|
<div class="col-sm-12 searchBox-inner">
|
|
<div class="form-group has-feedback">
|
|
<input id="searchList" type="text" class="form-control" placeholder="Search">
|
|
<span class="glyphicon glyphicon-search form-control-feedback"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="userChecklist"></div>
|
|
<button class="ok btn btn-success">Ok</button>
|
|
<button class="cancel btn btn-default">Cancel</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container app">
|
|
<div class="row app-one">
|
|
|
|
<div class="col-sm-4 side">
|
|
<div class="side-one">
|
|
<!-- Heading -->
|
|
<div class="row heading">
|
|
<span class="name-meta"><b>FLO Whatsapp </b> </span>
|
|
<!--
|
|
<div class="col-sm-1 col-xs-1 heading-dot pull-right">
|
|
<i class="fa fa-ellipsis-v fa-2x pull-right" aria-hidden="true" onclick="min();"></i>
|
|
</div>
|
|
|
|
-->
|
|
<div class="col-sm-2 col-xs-2 heading-compose pull-right">
|
|
<i class="fa fa-comments fa-2x pull-right" aria-hidden="true" onclick="createGroup();"></i>
|
|
</div>
|
|
<br />
|
|
<span class="name-meta"><i>created by Ranchimall</i></span>
|
|
</div>
|
|
|
|
<!-- Heading End -->
|
|
|
|
<!-- SearchBox -->
|
|
<div class="row searchBox">
|
|
<div class="col-sm-12 searchBox-inner">
|
|
<div class="form-group has-feedback">
|
|
<input id="searchContact" type="text" class="form-control" placeholder="Search Contact/Group">
|
|
<span class="glyphicon glyphicon-search form-control-feedback"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search Box End -->
|
|
<!-- sideBar -->
|
|
<div class="row sideBar" id="contact-display"></div>
|
|
<!-- Sidebar End -->
|
|
</div>
|
|
<!-- Sidebar End -->
|
|
</div>
|
|
<!-- New Message Sidebar End -->
|
|
|
|
<!-- Conversation Start -->
|
|
<div class="col-sm-8 conversation">
|
|
<!-- Heading -->
|
|
<div class="row heading">
|
|
<div class="col-sm-8 col-xs-8 heading-name">
|
|
<span class="heading-name-meta"><span id="recipient-status">O</span> <span
|
|
id="recipient-floID">Select Contact</span>
|
|
</span>
|
|
</div>
|
|
<div class="col-sm-1 col-xs-1 heading-dot pull-right dropdown" id="groupOptions">
|
|
<i class="fa fa-ellipsis-v fa-2x pull-right" aria-hidden="true"></i>
|
|
<div class="dropdown-content">
|
|
<li onclick="addGroupMembers()">Add Members</li>
|
|
<li onclick="rmGroupMembers()">Remove Members</li>
|
|
<li onclick="addGroupAdmins()">Add Admins</li>
|
|
<li onclick="rmGroupAdmins()">Remove Admins</li>
|
|
<li onclick="deleteGroup()">Delete Group</li>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Heading End -->
|
|
|
|
<!-- Message Box -->
|
|
<div class="row message" id="conversation">
|
|
</div>
|
|
<!-- Message Box End -->
|
|
|
|
<!-- Reply Box -->
|
|
<div class="row reply">
|
|
<!--
|
|
<div class="col-sm-1 col-xs-1 reply-emojis">
|
|
<i class="fa fa-smile-o fa-2x"></i>
|
|
</div>
|
|
-->
|
|
<div class="col-sm-9 col-xs-9 reply-main">
|
|
<input class="form-control" rows="1" id="sendMsgInput" placeholder="Type message"
|
|
autocomplete="off"></input>
|
|
</div>
|
|
<!--
|
|
<div class="col-sm-1 col-xs-1 reply-recording">
|
|
<i class="fa fa-microphone fa-2x" aria-hidden="true"></i>
|
|
</div>
|
|
-->
|
|
<div class="col-sm-1 col-xs-1 reply-send" onclick="sendMsg()">
|
|
<i class="fa fa-send fa-2x" aria-hidden="true"></i>
|
|
</div>
|
|
</div>
|
|
<!-- Reply Box End -->
|
|
</div>
|
|
<!-- Conversation End -->
|
|
</div>
|
|
<!-- App One End -->
|
|
</div>
|
|
|
|
<!-- App End -->
|
|
</body>
|
|
|
|
</html> |