mirror of
https://github.com/nerzhul/ocsms.git
synced 2025-07-23 01:45:43 +00:00
Reorganize the view
This commit is contained in:
Loic Blot
parent
3efb879496
commit
6152b22596
@ -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 {
|
||||||
|
|||||||
@ -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,75 +42,77 @@ use \OCA\OcSms\Lib\CountryCodes;
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<div id="app-mailbox-peers">
|
<div id="app-navigation">
|
||||||
<div id="app-contacts-loader" class="icon-loading" v-if="isContactsLoading">
|
<div id="app-mailbox-peers">
|
||||||
</div>
|
<div id="app-contacts-loader" class="icon-loading" v-if="isContactsLoading">
|
||||||
<div v-if="!isContactsLoading">
|
|
||||||
<div class="contact-list-no-contact" v-if="orderedContacts.length == 0">
|
|
||||||
<?php p($l->t('No contact found.'));?>
|
|
||||||
</div>
|
</div>
|
||||||
<div v-if="orderedContacts.length > 0">
|
<div v-if="!isContactsLoading">
|
||||||
<ul class="contact-list">
|
<div cl ass="contact-list-no-contact" v-if="orderedContacts.length == 0">
|
||||||
<li v-for="contact in orderedContacts" peer-label="{{ contact.label }}" v-on:click="loadConversation(contact);" href="#">
|
<?php p($l->t('No contact found.'));?>
|
||||||
<img class="ocsms-plavatar" :src="contact.avatar" v-if="contact.avatar !== undefined" />
|
</div>
|
||||||
<div class="ocsms-plavatar" v-if="contact.avatar === undefined" v-bind:style="{'backgroundColor': getContactColor(contact.uid) }">{{ contact.label | firstCharacter }}</div>
|
<div v-if="orderedContacts.length > 0">
|
||||||
<a class="ocsms-plname" style="{{ contact.unread > 0 ? 'font-weight:bold;' : ''}}" mailbox-label="{{ contact.label }}" mailbox-navigation="{{ contact.nav }}">{{ contact.label }}{{ contact.unread > 0 ? ' (' + contact.unread + ') ' : '' }}</a>
|
<ul class="contact-list">
|
||||||
</li>
|
<li v-for="contact in orderedContacts" peer-label="{{ contact.label }}" v-on:click="loadConversation(contact);" href="#">
|
||||||
</ul>
|
<img class="ocsms-plavatar" :src="contact.avatar" v-if="contact.avatar !== undefined" />
|
||||||
|
<div class="ocsms-plavatar" v-if="contact.avatar === undefined" v-bind:style="{'backgroundColor': getContactColor(contact.uid) }">{{ contact.label | firstCharacter }}</div>
|
||||||
|
<a class="ocsms-plname" style="{{ contact.unread > 0 ? 'font-weight:bold;' : ''}}" mailbox-label="{{ contact.label }}" mailbox-navigation="{{ contact.nav }}">{{ contact.label }}{{ contact.unread > 0 ? ' (' + contact.unread + ') ' : '' }}</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div id="app-settings">
|
||||||
<div id="app-settings">
|
<div id="app-settings-header">
|
||||||
<div id="app-settings-header">
|
<button name="app settings" class="settings-button" data-apps-slide-toggle="#app-settings-content">
|
||||||
<button name="app settings" class="settings-button" data-apps-slide-toggle="#app-settings-content">
|
<?php p($l->t('Settings'));?>
|
||||||
<?php p($l->t('Settings'));?>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div id="app-settings-content">
|
|
||||||
<div><label for="setting_msg_per_page">Max messages to load per conversation</label>
|
|
||||||
<input type="number" min="10" max="10000" name="setting_msg_per_page" v-model="messageLimit" v-on:change="sendMessageLimit()" to-int />
|
|
||||||
<span class="label-invalid-input" v-if="messageLimit == null || messageLimit == undefined"><?php p($l->t('Invalid message limit'));?></span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div><label for="intl_phone"><?php p($l->t('Default country code'));?></label>
|
|
||||||
<select name="intl_phone" id="sel_intl_phone" v-model="country">
|
|
||||||
<?php foreach (CountryCodes::$codes as $code => $cval) { ?>
|
|
||||||
<option><?php p($l->t($code)); ?></option>
|
|
||||||
<?php } ?>
|
|
||||||
</select>
|
|
||||||
<button class="new-button primary icon-checkmark-white" v-on:click="sendCountry();"></button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="setting_contact_order"><?php p($l->t('Contact ordering'));?></label>
|
|
||||||
<select name="setting_contact_order" v-model="contactOrderBy" v-on:change="sendContactOrder()">
|
|
||||||
<option value="lastmsg"><?php p($l->t('Last message'));?></option>
|
|
||||||
<option value="label"><?php p($l->t('Label'));?></option>
|
|
||||||
</select>
|
|
||||||
<label for="setting_contact_order_reverse"><?php p($l->t('Reverse ?'));?></label>
|
|
||||||
<input type="checkbox" v-model="reverseContactOrder" v-on:change="sendContactOrder()" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="setting_notif"><?php p($l->t('Notification settings'));?></label>
|
|
||||||
<select name="setting_notif" v-model="enableNotifications" v-on:change="sendNotificationFlag()">
|
|
||||||
<option value="1"><?php p($l->t('Enable'));?></option>
|
|
||||||
<option value="0"><?php p($l->t('Disable'));?></option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<!-- <div v-if="!isContactListEmpty()">-->
|
|
||||||
<div>
|
|
||||||
<button class="crit-button primary"
|
|
||||||
v-confirm="['<?php p($l->t('Are you sure you want to wipe all your messages ?'));?>', wipeAllMessages]">
|
|
||||||
<?php p($l->t('Reset all messages'));?>
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div> <!-- app-settings-content -->
|
<div id="app-settings-content">
|
||||||
|
<div><label for="setting_msg_per_page">Max messages to load per conversation</label>
|
||||||
|
<input type="number" min="10" max="10000" name="setting_msg_per_page" v-model="messageLimit" v-on:change="sendMessageLimit()" to-int />
|
||||||
|
<span class="label-invalid-input" v-if="messageLimit == null || messageLimit == undefined"><?php p($l->t('Invalid message limit'));?></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div><label for="intl_phone"><?php p($l->t('Default country code'));?></label>
|
||||||
|
<select name="intl_phone" id="sel_intl_phone" v-model="country">
|
||||||
|
<?php foreach (CountryCodes::$codes as $code => $cval) { ?>
|
||||||
|
<option><?php p($l->t($code)); ?></option>
|
||||||
|
<?php } ?>
|
||||||
|
</select>
|
||||||
|
<button class="new-button primary icon-checkmark-white" v-on:click="sendCountry();"></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="setting_contact_order"><?php p($l->t('Contact ordering'));?></label>
|
||||||
|
<select name="setting_contact_order" v-model="contactOrderBy" v-on:change="sendContactOrder()">
|
||||||
|
<option value="lastmsg"><?php p($l->t('Last message'));?></option>
|
||||||
|
<option value="label"><?php p($l->t('Label'));?></option>
|
||||||
|
</select>
|
||||||
|
<label for="setting_contact_order_reverse"><?php p($l->t('Reverse ?'));?></label>
|
||||||
|
<input type="checkbox" v-model="reverseContactOrder" v-on:change="sendContactOrder()" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="setting_notif"><?php p($l->t('Notification settings'));?></label>
|
||||||
|
<select name="setting_notif" v-model="enableNotifications" v-on:change="sendNotificationFlag()">
|
||||||
|
<option value="1"><?php p($l->t('Enable'));?></option>
|
||||||
|
<option value="0"><?php p($l->t('Disable'));?></option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<!-- <div v-if="!isContactListEmpty()">-->
|
||||||
|
<div>
|
||||||
|
<button class="crit-button primary"
|
||||||
|
v-confirm="['<?php p($l->t('Are you sure you want to wipe all your messages ?'));?>', wipeAllMessages]">
|
||||||
|
<?php p($l->t('Reset all messages'));?>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user