Cable-Desktop/background.html
lilia e80fa187ba Upsize svg identicons
The chrome.notifications api renders iconUrls at full bleed, as opposed
to the Web Notifications api, which adds padding. This was causing our
identicons to look a bit over stretched.

Fixed by rendering them a bit larger and with some padding.

// FREEBIE
2015-09-14 13:49:19 -07:00

303 lines
12 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<script type='text/x-tmpl-mustache' id='two-column'>
<div class='title-bar' id='header'>
<div class='menu'>
<button class='hamburger'></button>
<ul class='menu-list'>
<li><a class='new-group'>Create Group</a></li>
<li><a class='settings'>Settings</a></li>
</ul>
</div>
<span class='title-text'>Signal</span>
<span class='socket-status'></span>
</div>
<div class='gutter'>
<div class='conversations scrollable'></div>
<span class='fab'></span>
</div>
<div class='conversation-stack'></div>
</script>
<script type='text/x-tmpl-mustache' id='conversation'>
<div class='conversation-header'>
<div class='conversation-menu menu'>
<button class='drop-down'></button>
<ul class='menu-list'>
{{#group}}
<li><a class='view-members'>Members</a></li>
<li><a class='update-group'>Update group</a></li>
<li><a class='leave-group'>Leave group</a></li>
{{/group}}
{{^group}}
<li><a class='end-session'>Reset Session</a></li>
<li><a class='verify-identity'>Verify Identity</a></li>
{{/group}}
<li><a class='destroy'>Delete messages</a></li>
</ul>
</div>
<span class='conversation-title'>{{ title }}</span>
</div>
<div class='discussion-container'></div>
<div class="bottom-bar" id='footer'>
<form class='send'>
<div class='attachments'>
<div class='paperclip thumbnail'></div>
<input type='file' class='file-input'>
</div>
<input class="send-btn" type='submit' value='' />
<textarea class='send-message' placeholder="Send a message" rows="1"></textarea>
</form>
</div>
</script>
<script type='text/x-tmpl-mustache' id='confirmation-dialog'>
<div class='message'>{{ message }}</div>
<div class='buttons'>
<button class='cancel'>Cancel</button>
<button class='ok'>OK</button>
</div>
</script>
<script type='text/x-tmpl-mustache' id='attachment-preview'>
<img src="{{ source }}" class="preview" />
<div class="close">x</div>
</script>
<script type='text/x-tmpl-mustache' id='message'>
<div class='sender'>{{ sender }}</div>
{{> avatar }}
<div class="bubble">
<div class='attachments'></div>
<p class="content">{{ message }}</p>
<div class='meta'>
<span class='timestamp'>{{ timestamp }}</span>
<span class='checkmark hide'></span>
</div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='new-group-update'>
<div class='conversation-header'>
<button class='back'></button>
<button class='send check'></button>
<span class='conversation-title'>Update group</span>
</div>
{{> group_info_input }}
<div class='container'>
<div class='scrollable'></div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='identicon-svg'>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<circle cx="50" cy="50" r="40" fill="{{ color }}" />
<text text-anchor="middle" fill="white" font-size="24px" x="50" y="50" baseline-shift="-8px">
{{ content }}
</text>
</svg>
</script>
<script type='text/x-tmpl-mustache' id='avatar'>
<span class='avatar'
style='background-image: url("{{ avatar.url }}"); background-color: {{ avatar.color }}'>
{{ avatar.content }}
</span>
</script>
<script type='text/x-tmpl-mustache' id='contact_pill'>
<span>{{ name }}</span><span class='remove'>x</span>
</script>
<script type='text/x-tmpl-mustache' id='contact_name_and_number'>
<h3 class='name'> {{ title }} </h3>
<div class='number'>{{ number }}</div>
</script>
<script type='text/x-tmpl-mustache' id='contact'>
{{> avatar }}
<div class='contact-details'> {{> contact_name_and_number }} </div>
</script>
<script type='text/x-tmpl-mustache' id='conversation-preview'>
{{> avatar }}
<div class='contact-details'>
{{> contact_name_and_number }}
<p class='last-message'> {{ last_message }} </p>
<span class='last-timestamp'> {{ last_message_timestamp }} </span>
</div>
</script>
<script type="text/x-tmpl-mustache" id="phone-number">
<div class="phone-input-form">
<div class="number-container">
<input type="tel" class="number" placeholder="Phone Number" />
</div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='file-size-modal'>
Sorry, the selected file exceeds message size
restrictions. ({{ limit }}kB)
</script>
<script type='text/x-tmpl-mustache' id='message-detail'>
<div class='conversation-header'>
<button class='back'></button>
<span class='conversation-title'>Message Detail</span>
</div>
<div class='container'>
<div class='message-container'></div>
<div class='info'>
<table>
<tr><td class='label'>Sent</td><td> {{ sent_at }}</td></tr>
<tr><td class='label'>Received</td><td> {{ received_at }}</td></tr>
<tr>
<td class='tofrom label'>{{ tofrom }}</td>
<td> <div class='contacts'></div> </td>
</tr>
</table>
</div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='group-member-list'>
<div class='conversation-header'>
<button class='back'></button>
<span class='conversation-title'>Members</span>
</div>
<div class='container'>
<div class='scrollable'></div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='key-verification'>
<div class='conversation-header'>
<button class='back'></button>
<span class='conversation-title'>Verify Identity</span>
</div>
<div class='container'>
<p> Their identity (they read): </p>
<div class='key'>
{{ #their_key }} <span>{{ . }}</span> {{ /their_key }}
</div>
<p> Your identity (you read): </p>
<div class='key'>
{{ #your_key }} <span>{{ . }}</span> {{ /your_key }}
</div>
</div>
</script>
<!-- index -->
<script type="text/x-tmpl-mustache" id="inbox">
<div class='title-bar' id='header'>
<div class='socket-status'></div>
</div>
<div class='gutter'>
<div class='conversations scrollable'></div>
<span class='fab'></span>
</div>
</script>
<script type='text/x-tmpl-mustache' id='group_info_input'>
<div class='group-info-input'>
<div class='group-avatar'>
<div class='thumbnail'> {{> avatar }} </div>
<input type='file' name='avatar' class='file-input'>
</div>
<input type='text' name='name' class='name' placeholder='Group Name' value="{{ name }}">
</div>
</script>
<script type='text/x-tmpl-mustache' id='new-conversation'>
<div class='conversation-header'>
<button class='back'></button>
<button class='create check hide'></button>
<span class='conversation-title'>New Message</span>
</div>
{{> group_info_input }}
<div class='container'>
<div class='scrollable'>
</div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='recipients-input'>
<div class='recipients-container'>
<span class='recipients'></span>
<input type='text' class='search' placeholder="{{ placeholder }}" />
</div>
<div class='results'>
<div class='new-contact contact hide'></div>
<div class='contacts'></div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='incoming-key-conflict'>
<p>
Received message with unknown identity key.
Click to process and display.
</p>
</script>
<script type='text/x-tmpl-mustache' id='outgoing-key-conflict'>
<p>
This contact's identity key has changed.
Click to process and display.
</p>
</script>
<script type='text/x-tmpl-mustache' id='generic-error'>
<p>{{ message }}</p>
</script>
<script type='text/x-tmpl-mustache' id='contact-detail'>
<div>
{{> avatar }}
<span class='name'>{{ name }}</span>
{{ #conflict }}
<button class='conflict'><span>Verify</span></button>
{{ /conflict }}
</div>
</script>
<script type='text/x-tmpl-mustache' id='key-conflict-dialogue'>
<div class='content'>
<p> {{ message }} </p>
<p>
You may wish to <span class='verify'>verify</span> this contact.
</p>
<p>
<button class='cancel'>Cancel</button>
<button class='resolve'>Accept new key</button>
</p>
</div>
</script>
<script type='text/x-tmpl-mustache' id='window-controls'>
<button class='minimize'>&minus;</button>
<button class='close'>&times;</button>
</script>
<script type="text/javascript" src="js/components.js"></script>
<script type="text/javascript" src="js/database.js"></script>
<script type="text/javascript" src="js/storage.js"></script>
<script type="text/javascript" src="js/axolotl_store.js"></script>
<script type="text/javascript" src="js/libtextsecure.js"></script>
<script type="text/javascript" src="js/notifications.js"></script>
<script type="text/javascript" src="js/libphonenumber-util.js"></script>
<script type="text/javascript" src="js/models/messages.js"></script>
<script type="text/javascript" src="js/models/conversations.js"></script>
<script type="text/javascript" src="js/chromium.js"></script>
<script type="text/javascript" src="js/bimap.js"></script>
<script type="text/javascript" src="js/panel_controller.js"></script>
<script type="text/javascript" src="js/views/whisper_view.js"></script>
<script type="text/javascript" src="js/views/toast_view.js"></script>
<script type="text/javascript" src="js/views/attachment_preview_view.js"></script>
<script type="text/javascript" src="js/views/file_input_view.js"></script>
<script type="text/javascript" src="js/views/list_view.js"></script>
<script type="text/javascript" src="js/views/conversation_list_item_view.js"></script>
<script type="text/javascript" src="js/views/conversation_list_view.js"></script>
<script type="text/javascript" src="js/views/contact_list_view.js"></script>
<script type="text/javascript" src="js/views/recipients_input_view.js"></script>
<script type="text/javascript" src="js/views/new_group_update_view.js"></script>
<script type="text/javascript" src="js/views/attachment_view.js"></script>
<script type="text/javascript" src="js/views/key_conflict_dialogue_view.js"></script>
<script type="text/javascript" src="js/views/error_view.js"></script>
<script type="text/javascript" src="js/views/message_view.js"></script>
<script type="text/javascript" src="js/views/key_verification_view.js"></script>
<script type="text/javascript" src="js/views/message_detail_view.js"></script>
<script type="text/javascript" src="js/views/message_list_view.js"></script>
<script type="text/javascript" src="js/views/group_member_list_view.js"></script>
<script type="text/javascript" src="js/views/conversation_view.js"></script>
<script type="text/javascript" src="js/views/new_conversation_view.js"></script>
<script type="text/javascript" src="js/views/window_controls_view.js"></script>
<script type="text/javascript" src="js/views/inbox_view.js"></script>
<script type="text/javascript" src="js/views/confirmation_dialog_view.js"></script>
<script type="text/javascript" src="js/views/identicon_svg_view.js"></script>
<script type="text/javascript" src="js/background.js"></script>
</head>
<body>
</body>
</html>