ソースを参照

Add edit button, improve text wrapping and table behavior

tags/v1.1.0
Skylar Ittner 10ヶ月前
コミット
93287f8ef8
3個のファイルの変更53行の追加3行の削除
  1. 41
    1
      www/css/notecards.css
  2. 8
    1
      www/js/home.js
  3. 4
    1
      www/pages/home.html

+ 41
- 1
www/css/notecards.css ファイルの表示

@@ -20,11 +20,51 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
position: absolute;
top: 0;
right: 0;
padding: 1em;
padding: 0.5em;
padding-top: 1em;
cursor: pointer;
z-index: 99999;
}

.notecard .editbtn {
position: absolute;
top: 0;
right: 2.5em;
padding: 0.5em;
padding-top: 1em;
cursor: pointer;
z-index: 99999;
}

.notecard .btnswrapthing {
height: 2.5em;
width: 4.5em;
float: right;
}

.notecard .card-content {
word-wrap: break-word;
}

.notecard table {
border-spacing: 0px;
border-collapse: collapse;
table-layout: fixed;
width: 100%;
margin-bottom: 1em;
}

.notecard table th, .notecard table td {
border: 1px solid;
padding: 2px 4px;
border-spacing: 0px;
word-wrap: break-word;
}

.notecard table tbody tr:nth-child(odd) {
background-color: rgba(255,255,255,0.15);
}

.notecard {
min-height: 4em;
}

+ 8
- 1
www/js/home.js ファイルの表示

@@ -23,10 +23,13 @@ function loadCards(callback) {
var note = notes[n];
$("#notecards-bin").append('<div class="col-100 tablet-50 desktop-33 notecard-col" id="notecard-col-' + note.noteid + '">'
+ '<div class="card notecard" id="notecard-' + note.noteid + '" data-id="' + note.noteid + '" data-bg="' + note.color + '" data-fg="' + note.textcolor + '" style="background-color: #' + note.color + '; color: #' + note.textcolor + ';">'
+ '<div class="editbtn">'
+ '<i class="material-icons">edit</i>'
+ '</div>'
+ '<div class="menubtn">'
+ '<i class="material-icons">more_vert</i>'
+ '</div>'
+ '<div class="card-content card-content-padding">' + note.html + '</div>'
+ '<div class="card-content card-content-padding"><div class="btnswrapthing"></div>' + note.html + '</div>'
+ '</div>'
+ '</div>');
}
@@ -194,6 +197,10 @@ $(".view-main").on("click", ".notecard .menubtn", function () {
return openNoteActionMenu($(this).parent());
});

$(".view-main").on("click", ".notecard .editbtn", function () {
editNote($(this).parent().data("id"));
});

$(".view-main").on("contextmenu", ".notecard", function () {
return openNoteActionMenu($(this));
});

+ 4
- 1
www/pages/home.html ファイルの表示

@@ -43,10 +43,13 @@
{{#each notecards}}
<div class="col-100 tablet-50 desktop-33 notecard-col" id="notecard-col-{{noteid}}">
<div class="card notecard" id="notecard-{{noteid}}" data-id="{{noteid}}" data-bg="{{color}}" data-fg="{{textcolor}}" style="background-color: #{{color}}; color: #{{textcolor}};">
<div class="editbtn">
<i class="material-icons">edit</i>
</div>
<div class="menubtn">
<i class="material-icons">more_vert</i>
</div>
<div class="card-content card-content-padding">{{html}}</div>
<div class="card-content card-content-padding"><div class="btnswrapthing"></div>{{html}}</div>
</div>
</div>
{{/each}}

読み込み中…
キャンセル
保存