send message textarea + inverting sms list and scrolling (83fa00c9) · Commits · e / infra / ecloud / nextcloud-apps / Esms

css/style.css

+33 −11

Original line number	Diff line number	Diff line
		@@ -67,7 +67,8 @@

		#app-content-header {
		background-color: #E6E6E6;
		min-height: 100px;
		min-height: 48px;
		height: 48px;
		width: auto;
		top: 0px;
		position: -webkit-sticky;
		@@ -87,9 +88,9 @@

		#ocsms-contact-avatar {
		background-color: transparent;
		height: 75px;
		width: 75px;
		font-size: 2.5em;
		height: 30px;
		width: 30px;
		font-size: 20px;
		margin-right: 1rem;
		}

		@@ -195,8 +196,9 @@
		opacity: 1;
		}

		.ocsms-messages-container {
		.ocsms-conversation-container {
		width: 100%;
		height:100%
		}

		.msg-spacer {
		@@ -221,11 +223,11 @@
		}

		.ocsms-plavatar-big {
		height: 75px;
		min-height: 75px;
		width: 75px;
		min-width: 75px;
		line-height: 55px;
		height: 30px;
		min-height: 30px;
		width: 30px;
		min-width: 30px;
		line-height: 30px;
		}

		.ocsms-plname {
		@@ -370,3 +372,23 @@ Modal
		-webkit-transform: scale(1.1);
		transform: scale(1.1);
		}

		.app-ocsms{
		height:100%;
		}

		#ocsms-send-button{
		padding-left:20px;
		height: 25px;
		margin-bottom: 5px;
		}

		#ocsms-message{
		width:calc(100% - 55px);
		height: 30px;
		}

		#ocsms-messages-container {
		width: 100%;
		height:100%
		}

js/devel/conversation.js

+53 −14

Original line number	Diff line number	Diff line
		@@ -88,6 +88,7 @@ var Conversation = new Vue({
		}

		self.totalMessageCount = jsondata['msgCount'] !== undefined ? parseInt(jsondata['msgCount']) : 0;

		}
		);
		},
		@@ -140,6 +141,41 @@ var Conversation = new Vue({
		addConversationMessage: function (msg) {
		this.messages.push(msg);
		},
		sendMessage: function () {
		var self = this;
		var sms = {};
		sms['smsCount'] = 1;
		sms['smsDatas'] = [];
		sms['smsDatas'][0] = {};
		sms['smsDatas'][0]['date'] = Date.now();
		sms['smsDatas'][0]['type'] = 2;
		sms['smsDatas'][0]['_id'] = -1;
		sms['smsDatas'][0]['mbox'] = 1;
		sms['smsDatas'][0]['sent'] = "false";
		sms['smsDatas'][0]['read'] = "true";
		sms['smsDatas'][0]['seen'] = "true";
		sms['smsDatas'][0]['address'] = Conversation.selectedContact.nav;
		sms['smsDatas'][0]['card_number'] = "";
		sms['smsDatas'][0]['card_slot'] = 0;
		sms['smsDatas'][0]['icc_id'] = "";
		sms['smsDatas'][0]['carrier_name'] = "";
		sms['smsDatas'][0]['device_name'] = "";
		sms['smsDatas'][0]['body'] = $("#ocsms-message").val();
		$("#ocsms-message").val("");

		$.ajax({
		type: 'POST',
		url: Sms.generateURL('/push?format=json'),
		data: JSON.stringify(sms),
		dataType: "json",
		contentType: "application/json",
		success: function (data) {
		$("#ocsms-message").val("");
		self.refresh()
		}
		}
		);
		},
		removeConversationMessage: function (msgId) {
		const len = this.messages.length;
		let self = this;
		@@ -179,9 +215,12 @@ var Conversation = new Vue({
		this.refreshIntervalId = null;
		}
		},
		updated: function () {
		$('#ocsms-messages-container').scrollTop(1E10);
		},
		computed: {
		orderedMessages: function () {
		return _.orderBy(this.messages, ['date'], ['desc'])
		return _.orderBy(this.messages, ['date'], ['asc'])
		}
		}
		});
		No newline at end of file

templates/main.php

+12 −4

Original line number	Diff line number	Diff line
		@@ -118,16 +118,16 @@ use \OCA\OcSms\Lib\CountryCodes;
		<div id="ocsms-contact-details">
		<div id="ocsms-phone-label">{{ selectedContact.label }} </div>
		<div id="ocsms-phone-opt-number">{{ selectedContact.opt_numbers }}</div>
		<div id="ocsms-phone-msg-nb"><?php p($l->t('%s message(s) shown of %s message(s) stored in database.', array( '{{ messages.length }}', '{{ totalMessageCount }}')));?></div>
		</div>
		<div id="ocsms-contact-actions">
		<div id="ocsms-conversation-removal" class="icon-delete icon-delete-white svn delete action" v-on:click="removeConversation();"></div>
		</div>

		</div>
		<div id="app-content-wrapper" v-if="!isConvLoading">
		<div id="app-content-wrapper" v-if="!isConvLoading" style="height:calc(100% - 78px)">
		<div v-if="messages.length === 0" id="ocsms-empty-conversation"><?php p($l->t('Please select a conversation from the list to load it.'));?></div>
		<div v-if="messages.length > 0" class="ocsms-messages-container">
		<div v-if="messages.length > 0" class="ocsms-conversation-container">
		<div id="ocsms-messages-container" style="height:100%; overflow-y:auto;">
		<div v-for="message in orderedMessages">
		<div v-bind:class="['msg-'+ message.type]">
		<div v-html="message.content"></div>
		@@ -136,6 +136,14 @@ use \OCA\OcSms\Lib\CountryCodes;
		</div>
		<div class="msg-spacer"></div>
		</div>
		</div>
		<div>
		<textarea v-on:keydown.enter="sendMessage();return false;" id="ocsms-message">
		</textarea>
		<img v-on:click="sendMessage();" id="ocsms-send-button" src="<?php print_unescaped(image_path('ocsms', 'send.png')); ?>" />
		</div>


		<!-- <div id="searchresults"></div>-->
		</div>
		</div>