Start with sidebar

Signed-off-by: Joas Schilling <coding@schilljs.com>

css/style.css

@@ -610,3 +610,17 @@ video {
 #body-public #app-content:not(.participants-1) #guestName {
     color: rgba(255, 255, 255, 0.7);
 }
+
+/**
+ * Sidebar
+ */
+
+#app-sidebar .detailCallInfoContainer {
+	padding: 15px;
+	clear: both;
+}
+
+.tabHeaders,
+#app-sidebar .icon {
+	display: inline-block;
+}

templates/index.php

@@ -34,8 +34,72 @@ script(
 		</ul>
 	</div>
 
-	<div id="app-content" class="participants-1">
+	<div id="app-content" class="participants-1 with-app-sidebar">
 
+		<div id="app-sidebar" class="detailsView scroll-container">
+			<div class="detailCallInfoContainer">
+				<h3>Call name <span class="icon icon-rename"></span></h3>
+
+				<div class="oneline">
+					<label for="linkText" class="hidden-visually">Link</label>
+					<input id="linkText" class="linkText" readonly value="https://nextcloud13.local/index.php/s/LRDYjaFrAw2oBp7">
+					<a class="clipboardButton icon icon-clippy" data-clipboard-target="#linkText" data-original-title="" title=""></a>
+				</div>
+
+				<input name="shareLink" id="shareLink" class="checkbox" value="1" type="checkbox">
+				<label for="shareLink"><?php p($l->t('Allow guests'));?></label><br>
+
+				<button><?php p($l->t('Start/stop webinary'));?></button>
+			</div>
+
+			<ul class="tabHeaders">
+				<li class="tabHeader selected" data-tabid="participantTabView" data-tabindex="0">
+					<a href="#"><?php p($l->t('Participants'));?></a>
+				</li>
+				<li class="tabHeader" data-tabid="schedulingTabView" data-tabindex="1">
+					<a href="#"><?php p($l->t('Scheduling'));?></a>
+				</li>
+			</ul>
+
+			<div class="tabsContainer">
+				<div id="shareTabView" class="tab shareTabView">
+					<div class="shareeListView subView">
+						<ul id="shareWithList" class="shareWithList">
+							<li data-share-id="2" data-share-type="0" data-share-with="test1">
+								<div class="avatar " data-username="test1" data-displayname="User One" style="height: 32px; width: 32px; background-color: rgb(213, 231, 116); color: rgb(255, 255, 255); font-weight: normal; text-align: center; line-height: 32px; font-size: 17.6px;">U</div>
+								<span class="username" title="">
+									User One
+									<span class="is-currently-online">*</span>
+								</span>
+
+								<span class="sharingOptionsGroup">
+									<a href="#"><span class="icon icon-more"></span></a>
+
+									<div class="popovermenu bubble hidden menu">
+										<ul>
+											<li>
+												<span class="shareOption menuitem">
+													<input id="canShare-view17-test1" name="share" class="permissions checkbox" checked="checked" data-permissions="16" type="checkbox">
+													<label for="canShare-view17-test1">Promote to/Demote from moderator</label>
+												</span>
+											</li>
+											<li>
+												<span class="shareOption menuitem">
+													<input id="canShare-view17-test1" name="share" class="permissions checkbox" checked="checked" data-permissions="16" type="checkbox">
+													<label for="canShare-view17-test1">Remove participant from call</label>
+												</span>
+											</li>
+										</ul>
+									</div>
+								</span>
+							</li>
+						</ul>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div id="app-content-wrapper">
 		<button id="video-fullscreen" class="icon-fullscreen-white" data-placement="bottom" data-toggle="tooltip" data-original-title="<?php p($l->t('Fullscreen')) ?>"></button>
 
 		<div id="video-speaking">
@@ -82,5 +146,7 @@ script(
 				<div id="shareRoomClipboardButton" class="shareRoomClipboard icon-clippy hidden" data-clipboard-target="#shareRoomInput"></div>
 			</div>
 		</div>
+
+		</div>
 	</div>
 </div>