thegamer/Cable-Desktop
2
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Put debug log in a modal

Browse source 
Also dedupe close-button style

// FREEBIE
This commit is contained in:
lilia 2016-02-19 11:26:32 -08:00
parent 78603259c1
commit 636c0f2a60
5 changed files with 73 additions and 108 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
background.html
View file

@ -307,22 +307,24 @@
<button class='close'>&times;</button>
</script>
<script type='text/x-tmpl-mustache' id='debug-log'>
<a class='x close'>&times;</a>
<h1>{{ title }}</h1>
<p> {{ debugLogExplanation }}</p>
<form>
<textarea rows='5'></textarea>
<input class='submit' type='submit' value='{{ submit }}' />
<button class='close'>{{ cancel }}</button>
</form>
<div class='result'>
<a target='_blank'></a>
<div><button class='close'>{{ close }}</button></div>
<div class='content'>
<a class='x close'>&times;</a>
<h1>{{ title }}</h1>
<p> {{ debugLogExplanation }}</p>
<form>
<textarea rows='5'></textarea>
<input class='submit' type='submit' value='{{ submit }}' />
<button class='close'>{{ cancel }}</button>
</form>
<div class='result'>
<a target='_blank'></a>
<div><button class='close'>{{ close }}</button></div>
</div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='settings'>
<div class='content'>
<div class='close'>x</div>
<a class='x close'>&times;</a>
<h3>Notifications</h3>
<div>
<input type='radio' name='notifications' id='notification-setting-message' value='message'>

2
js/views/debug_log_view.js
View file

@ -7,7 +7,7 @@
Whisper.DebugLogView = Whisper.View.extend({
templateName: 'debug-log',
className: 'debug-log',
className: 'debug-log modal',
initialize: function() {
this.render();
this.$('textarea').val(console.get());

48
stylesheets/_global.scss
View file

@ -414,32 +414,12 @@ $avatar-size: 44px;
}
.debug-log {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
padding: 1em;
background: $grey_l;
z-index: 1;
overflow-y: auto;
&.modal .content {
max-width: 90%;
}
a.x {
display: inline-block;
float: right;
cursor: pointer;
font-family: sans-serif;
color: white;
border-radius: 50%;
width: 20px;
height: 20px;
padding: 0px;
background: #666;
color: #fff;
text-align: center;
font-size: 19px;
::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.15);
}
textarea {
@ -490,4 +470,22 @@ $avatar-size: 44px;
overflow: auto;
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);
}
a.x {
display: inline-block;
float: right;
cursor: pointer;
font-family: sans-serif;
color: white;
border-radius: 50%;
width: 20px;
height: 20px;
padding: 0px;
background: #666;
color: #fff;
text-align: center;
font-size: 19px;
}
}

16
stylesheets/_index.scss
View file

@ -262,19 +262,3 @@ input.search {
top: -30px;
}
}
.settings {
.close {
float: right;
font-family: sans-serif;
color: white;
cursor: pointer;
border-radius: 50%;
width: 20px;
height: 20px;
padding: 0px;
background: #666;
color: #fff;
text-align: center;
}
}

89
stylesheets/manifest.css
View file

@ -328,50 +328,30 @@ img.emoji {
@keyframes rotate {
to {
transform: rotate(360deg); } }
.debug-log {
position: absolute;
.debug-log.modal .content {
max-width: 90%; }
.debug-log ::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.15); }
.debug-log textarea {
width: 100%;
height: 100%;
top: 0;
left: 0;
resize: vertical; }
.debug-log button, .debug-log input[type=submit] {
border-radius: 4px;
border: solid 1px #ccc;
cursor: pointer;
margin: 1em auto;
padding: 1em;
font-family: inherit;
color: #616161;
background: #f3f3f3;
z-index: 1;
overflow-y: auto; }
.debug-log a.x {
display: inline-block;
float: right;
cursor: pointer;
font-family: sans-serif;
color: white;
border-radius: 50%;
width: 20px;
height: 20px;
padding: 0px;
background: #666;
color: #fff;
text-align: center;
font-size: 19px; }
.debug-log textarea {
width: 100%;
resize: vertical; }
.debug-log button, .debug-log input[type=submit] {
border-radius: 4px;
border: solid 1px #ccc;
cursor: pointer;
margin: 1em auto;
padding: 1em;
font-family: inherit;
color: #616161;
background: #f3f3f3;
box-shadow: 0 0 10px -5px rgba(97, 97, 97, 0.5); }
.debug-log button:hover, .debug-log input[type=submit]:hover {
color: black;
box-shadow: 0 0 10px -3px rgba(97, 97, 97, 0.7); }
.debug-log .result {
display: none;
text-align: center;
-webkit-user-select: text; }
box-shadow: 0 0 10px -5px rgba(97, 97, 97, 0.5); }
.debug-log button:hover, .debug-log input[type=submit]:hover {
color: black;
box-shadow: 0 0 10px -3px rgba(97, 97, 97, 0.7); }
.debug-log .result {
display: none;
text-align: center;
-webkit-user-select: text; }
.modal {
position: absolute;
@ -391,6 +371,20 @@ img.emoji {
border-radius: 10px;
overflow: auto;
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2); }
.modal a.x {
display: inline-block;
float: right;
cursor: pointer;
font-family: sans-serif;
color: white;
border-radius: 50%;
width: 20px;
height: 20px;
padding: 0px;
background: #666;
color: #fff;
text-align: center;
font-size: 19px; }
.gutter {
padding: 36px 0 0; }
@ -593,19 +587,6 @@ input.search {
border-color: transparent transparent #2eace0 transparent;
top: -30px; }
.settings .close {
float: right;
font-family: sans-serif;
color: white;
cursor: pointer;
border-radius: 50%;
width: 20px;
height: 20px;
padding: 0px;
background: #666;
color: #fff;
text-align: center; }
.conversation-title {
display: block;
line-height: 36px;