1
0
mirror of https://github.com/nerzhul/ocsms.git synced 2025-06-08 16:36:25 +00:00

Reorganize the view

This commit is contained in:
Loic Blot 2018-11-10 19:05:18 +01:00
parent 3efb879496
commit 6152b22596
No known key found for this signature in database
GPG Key ID: EFAA458E8C153987
2 changed files with 71 additions and 66 deletions

View File

@ -3,19 +3,21 @@
width: 100%; width: 100%;
} }
/* Navigation: folder like structure */ #app-navigation {
#app-mailbox-peers {
min-width: 20em; min-width: 20em;
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
padding-bottom: 44px; padding-bottom: 44px;
border-left: 1px solid #ddd; border-left: 1px solid #ddd;
border-right: 1px solid #ddd; border-right: 1px solid #ddd;
resize: horizontal;
}
/* Navigation: folder like structure */
#app-mailbox-peers {
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
resize: horizontal;
overflow-x: auto; overflow-x: auto;
flex: 1; flex: 1;
} }
@ -236,7 +238,7 @@
} }
#app-settings { #app-settings {
width: 20%; width: 100%;
} }
#app-settings-header, #app-settings-content { #app-settings-header, #app-settings-content {

View File

@ -15,7 +15,8 @@ use \OCA\OcSms\Lib\CountryCodes;
\OCP\Util::addStyle('ocsms', 'style'); \OCP\Util::addStyle('ocsms', 'style');
?> ?>
<script type="text/x-template" id="modal-template"> <script type="text/x-template" id="modal-template" xmlns:v-on="http://www.w3.org/1999/xhtml"
xmlns:v-bind="http://www.w3.org/1999/xhtml">
<transition name="modal" v-if="show"> <transition name="modal" v-if="show">
<div class="modal-mask"> <div class="modal-mask">
<div class="modal-wrapper"> <div class="modal-wrapper">
@ -41,11 +42,12 @@ use \OCA\OcSms\Lib\CountryCodes;
</script> </script>
<div id="app"> <div id="app">
<div id="app-navigation">
<div id="app-mailbox-peers"> <div id="app-mailbox-peers">
<div id="app-contacts-loader" class="icon-loading" v-if="isContactsLoading"> <div id="app-contacts-loader" class="icon-loading" v-if="isContactsLoading">
</div> </div>
<div v-if="!isContactsLoading"> <div v-if="!isContactsLoading">
<div class="contact-list-no-contact" v-if="orderedContacts.length == 0"> <div cl ass="contact-list-no-contact" v-if="orderedContacts.length == 0">
<?php p($l->t('No contact found.'));?> <?php p($l->t('No contact found.'));?>
</div> </div>
<div v-if="orderedContacts.length > 0"> <div v-if="orderedContacts.length > 0">
@ -97,7 +99,7 @@ use \OCA\OcSms\Lib\CountryCodes;
<option value="0"><?php p($l->t('Disable'));?></option> <option value="0"><?php p($l->t('Disable'));?></option>
</select> </select>
</div> </div>
<!-- <div v-if="!isContactListEmpty()">--> <!-- <div v-if="!isContactListEmpty()">-->
<div> <div>
<button class="crit-button primary" <button class="crit-button primary"
v-confirm="['<?php p($l->t('Are you sure you want to wipe all your messages ?'));?>', wipeAllMessages]"> v-confirm="['<?php p($l->t('Are you sure you want to wipe all your messages ?'));?>', wipeAllMessages]">
@ -106,10 +108,11 @@ use \OCA\OcSms\Lib\CountryCodes;
</div> </div>
</div> <!-- app-settings-content --> </div> <!-- app-settings-content -->
</div> </div>
</div>
<div id="app-conversation"> <div id="app-conversation">
<div id="app-content-loader" class="icon-loading" v-if="isConvLoading"></div> <div id="app-content-loader" class="icon-loading" v-if="isConvLoading"></div>
<div id="app-content-header" v-if="!isConvLoading && messages.length > 0" <div id="app-content-header" v-if="!isConvLoading && messages.length > 0" v-bind:style="{backgroundColor: getContactColor(selectedContact.uid) }">
v-bind:style="{'backgroundColor': getContactColor(selectedContact.uid) }">
<div id="ocsms-contact-avatar"> <div id="ocsms-contact-avatar">
<img class="ocsms-plavatar-big" v-if="selectedContact.avatar !== undefined" :src="selectedContact.avatar" /> <img class="ocsms-plavatar-big" v-if="selectedContact.avatar !== undefined" :src="selectedContact.avatar" />
<div class="ocsms-plavatar-big" v-if="selectedContact.avatar === undefined">{{ selectedContact.label | firstCharacter }}</div> <div class="ocsms-plavatar-big" v-if="selectedContact.avatar === undefined">{{ selectedContact.label | firstCharacter }}</div>