This thread contains a patchset. You're looking at the original emails,
but you may wish to use the patch review UI.
Review patch
[PATCH v3 0/3] alps theme: add remaining CalDAV pages
Updated per addition of time field for event creation
Drew DeVault (3):
alps theme: add layout for calendar event update
alps theme: unify create/update styles
alps theme: add event page layout
plugins/caldav/routes.go | 2 +
themes/alps/assets/style.css | 73 +++++++++++++++-----------
themes/alps/compose.html | 2 +-
themes/alps/event.html | 59 +++++++++++++++++++++
themes/alps/update-address-object.html | 2 +-
themes/alps/update-event.html | 47 +++++++++++++++++
6 files changed, 151 insertions(+), 34 deletions(-)
create mode 100644 themes/alps/event.html
create mode 100644 themes/alps/update-event.html
--
2.26.2
[PATCH v3 1/3] alps theme: add layout for calendar event update
---
plugins/caldav/routes.go | 2 ++
themes/alps/assets/style.css | 34 +++++++++++++++++++---------
themes/alps/update-event.html | 42 +++++++++++++++++++++++++++++++++++
3 files changed, 67 insertions(+), 11 deletions(-)
create mode 100644 themes/alps/update-event.html
diff --git a/plugins/caldav/routes.go b/plugins/caldav/routes.go
index f9e6bd5..fd3b219 100644
--- a/plugins/caldav/routes.go
+++ b/plugins/caldav/routes.go
@@ -38,6 +38,7 @@ type EventRenderData struct {
type UpdateEventRenderData struct {
alps.BaseRenderData
+ Calendar *caldav.Calendar
CalendarObject *caldav.CalendarObject // nil if creating a new contact
Event *ical.Event
}
@@ -313,6 +314,7 @@ func registerRoutes(p *alps.GoPlugin, u *url.URL) {
return ctx.Render(http.StatusOK, "update-event.html", &UpdateEventRenderData{
BaseRenderData: *alps.NewBaseRenderData(ctx),
+ Calendar: calendar,
CalendarObject: co,
Event: event,
})
diff --git a/themes/alps/assets/style.css b/themes/alps/assets/style.css
index 5225b9d..789e04c 100644
--- a/themes/alps/assets/style.css
+++ b/themes/alps/assets/style.css
@@ -158,30 +158,38 @@ aside a.new.active {
aside a.new.active,
main.compose,
-main.new-contact {
+main.new-contact,
+main.new-event {
background-color: #f6fff6;
}
main.compose,
-main.new-contact { flex: 1 auto; padding: 1rem; }
+main.new-contact,
+main.new-event{ flex: 1 auto; padding: 1rem; }
main.compose form,
-main.new-contact form { flex: 1 auto; display: flex; flex-direction: column; }
+main.new-contact form,
+main.new-event form{ flex: 1 auto; display: flex; flex-direction: column; }
main.compose form label,
-main.new-contact form label { margin-top: 5px; }
+main.new-contact form label,
+main.new-event form label{ margin-top: 5px; }
main.compose form label span,
/* TODO: CSS grid this */
-main.new-contact form label span { display: inline-block; font-weight: bold; min-width: 150px; }
+main.new-contact form label span,
+main.new-event form label span { display: inline-block; font-weight: bold; min-width: 150px; }
main.compose form input,
-main.new-contact form input { width: 80%; }
+main.new-contact form input,
+main.new-event form input { width: 80%; }
main.compose form textarea,
-main.new-contact form textarea { flex: 1 auto; resize: none; margin-top: 1rem; }
+main.new-contact form textarea,
+main.new-event form textarea { flex: 1 auto; resize: none; margin-top: 1rem; }
-main.compose h1 { margin: 0; }
+main.compose h1,
+main.new-event h1 { margin: 0; }
main table { border-collapse: collapse; width: 100%; border: 1px solid #eee; }
main table td { white-space: nowrap; padding: 0.3rem; color: #757373;
@@ -239,7 +247,8 @@ main.contact dl {
}
main.compose .actions,
-main.new-contact .actions {
+main.new-contact .actions
+main.new-event .actions {
display: flex;
flex-direction: row;
align-items: center;
@@ -251,13 +260,16 @@ main.new-contact .actions {
main.compose .actions button,
main.compose .actions .button-link,
main.new-contact .actions button,
-main.new-contact .actions .button-link {
+main.new-contact .actions .button-link,
+main.new-event .actions button,
+main.new-event .actions .button-link {
padding: 0.4rem 1rem 0.35rem;
font-weight: bold;
}
main.compose .actions > *:not(:last-child),
-main.new-contact .actions > *:not(:last-child) {
+main.new-contact .actions > *:not(:last-child),
+main.new-event .actions > *:not(:last-child) {
margin-right: 1rem;
}
diff --git a/themes/alps/update-event.html b/themes/alps/update-event.html
new file mode 100644
index 0000000..7672a7b
--- /dev/null
+++ b/themes/alps/update-event.html
@@ -0,0 +1,42 @@
+{{template "head.html" .}}
+{{template "nav.html" .}}
+
+<div class="page-wrap">
+ <aside>
+ <a href="/calendar/create" class="new active">New event</a>
+ <!-- TODO: fetch list of address books -->
+ <a href="#">{{.Calendar.Name}}</a>
+ <a href="#">Personal</a>
+ </aside>
+
+ <div class="container">
+ <main class="new-event">
+ <form method="post">
+ <label>
+ <span>Event name</span>
+ <input type="text" name="summary" id="summary" value="{{.Event.Props.Text "SUMMARY"}}">
+ </label>
+
+ <label>
+ <!-- TODO: inputs with time -->
+ <span>Start date</span>
+ <input type="date" name="start" id="start" value="{{.Event.DateTimeStart nil | ornow | formatinputdate}}"/>
+ </label>
+
+ <label>
+ <span>End date</span>
+ <input type="date" name="end" id="end" value="{{.Event.DateTimeEnd nil | ornow | formatinputdate}}"/>
+ </label>
+
+ <textarea name="description" id="description">{{.Event.Props.Text "DESCRIPTION"}}</textarea>
+
+ <div class="actions">
+ <button type="submit">Save</button>
+ <a class="button-link" href="/calendar">Cancel</a>
+ </div>
+ </form>
+ </main>
+ </div>
+</div>
+
+{{template "foot.html"}}
--
2.26.2
[PATCH v3 2/3] alps theme: unify create/update styles
---
themes/alps/assets/style.css | 55 ++++++++------------------
themes/alps/compose.html | 2 +-
themes/alps/update-address-object.html | 2 +-
themes/alps/update-event.html | 6 ++-
4 files changed, 23 insertions(+), 42 deletions(-)
diff --git a/themes/alps/assets/style.css b/themes/alps/assets/style.css
index 789e04c..b8b7f64 100644
--- a/themes/alps/assets/style.css
+++ b/themes/alps/assets/style.css
@@ -157,39 +157,24 @@ aside a.new.active {
}
aside a.new.active,
-main.compose,
-main.new-contact,
-main.new-event {
+main.create-update {
background-color: #f6fff6;
}
-main.compose,
-main.new-contact,
-main.new-event{ flex: 1 auto; padding: 1rem; }
+main.create-update { flex: 1 auto; padding: 1rem; }
+main.create-update form { flex: 1 auto; display: flex; flex-direction: column; }
+main.create-update form label { margin-top: 5px; }
-main.compose form,
-main.new-contact form,
-main.new-event form{ flex: 1 auto; display: flex; flex-direction: column; }
-
-main.compose form label,
-main.new-contact form label,
-main.new-event form label{ margin-top: 5px; }
-
-main.compose form label span,
/* TODO: CSS grid this */
-main.new-contact form label span,
-main.new-event form label span { display: inline-block; font-weight: bold; min-width: 150px; }
-
-main.compose form input,
-main.new-contact form input,
-main.new-event form input { width: 80%; }
-
-main.compose form textarea,
-main.new-contact form textarea,
-main.new-event form textarea { flex: 1 auto; resize: none; margin-top: 1rem; }
+main.create-update form label span {
+ display: inline-block;
+ font-weight: bold;
+ min-width: 150px;
+}
-main.compose h1,
-main.new-event h1 { margin: 0; }
+main.create-update form input { width: 80%; }
+main.create-update form textarea { flex: 1 auto; resize: none; margin-top: 1rem; }
+main.create-update h1 { margin: 0; }
main table { border-collapse: collapse; width: 100%; border: 1px solid #eee; }
main table td { white-space: nowrap; padding: 0.3rem; color: #757373;
@@ -246,9 +231,7 @@ main.contact dl {
grid-gap: 1rem;
}
-main.compose .actions,
-main.new-contact .actions
-main.new-event .actions {
+main.create-update .actions {
display: flex;
flex-direction: row;
align-items: center;
@@ -257,19 +240,13 @@ main.new-event .actions {
margin-top: 0.3rem;
}
-main.compose .actions button,
-main.compose .actions .button-link,
-main.new-contact .actions button,
-main.new-contact .actions .button-link,
-main.new-event .actions button,
-main.new-event .actions .button-link {
+main.create-update .actions button,
+main.create-update .actions .button-link {
padding: 0.4rem 1rem 0.35rem;
font-weight: bold;
}
-main.compose .actions > *:not(:last-child),
-main.new-contact .actions > *:not(:last-child),
-main.new-event .actions > *:not(:last-child) {
+main.create-update .actions > *:not(:last-child) {
margin-right: 1rem;
}
diff --git a/themes/alps/compose.html b/themes/alps/compose.html
index 0975aad..0342c29 100644
--- a/themes/alps/compose.html
+++ b/themes/alps/compose.html
@@ -15,7 +15,7 @@
</aside>
<div class="container">
- <main class="compose">
+ <main class="create-update">
<form method="post" action="" enctype="multipart/form-data">
<input type="hidden" name="in_reply_to" value="{{.Message.InReplyTo}}">
diff --git a/themes/alps/update-address-object.html b/themes/alps/update-address-object.html
index 52644d0..1b73600 100644
--- a/themes/alps/update-address-object.html
+++ b/themes/alps/update-address-object.html
@@ -10,7 +10,7 @@
</aside>
<div class="container">
- <main class="new-contact">
+ <main class="create-update">
<form method="post">
<h2>
{{if .Card}}Edit{{else}}Create{{end}} contact
diff --git a/themes/alps/update-event.html b/themes/alps/update-event.html
index 7672a7b..7e7c1eb 100644
--- a/themes/alps/update-event.html
+++ b/themes/alps/update-event.html
@@ -10,7 +10,11 @@
</aside>
<div class="container">
- <main class="new-event">
+ <main class="create-update">
+ <h2>
+ {{if .CalendarObject}}Edit{{else}}Create{{end}} event
+ </h2>
+
<form method="post">
<label>
<span>Event name</span>
--
2.26.2
[PATCH v3 3/3] alps theme: add event page layout
---
themes/alps/assets/style.css | 30 +++++++++++++++---
themes/alps/event.html | 59 +++++++++++++++++++++++++++++++++++
themes/alps/update-event.html | 15 ++++-----
3 files changed, 92 insertions(+), 12 deletions(-)
create mode 100644 themes/alps/event.html
diff --git a/themes/alps/assets/style.css b/themes/alps/assets/style.css
index b8b7f64..9d51f45 100644
--- a/themes/alps/assets/style.css
+++ b/themes/alps/assets/style.css
@@ -85,6 +85,9 @@ input[type="text"],
input[type="email"],
input[type="password"],
input[type="file"],
+input[type="number"],
+input[type="date"],
+input[type="time"],
textarea {
margin: 0;
border: none;
@@ -188,13 +191,17 @@ main table td a { text-decoration: none; }
main table td a:hover { text-decoration: underline; }
-main.message table { background-color: white; }
-main.message th { width: 5%;}
-main.message h1 { font-size: 1.2rem; padding: 0.5rem;}
+main.message table,
+main.event table { background-color: white; }
+main.message th,
+main.event th { width: 5%;}
+main.message h1,
+main.event h1 { font-size: 1.2rem; padding: 0.5rem;}
main.message pre,
main.message iframe,
-main.contact .details {
+main.contact .details,
+main.event pre {
flex: 1 auto;
padding: 1rem;
margin: 0.3rem 0 0 0;
@@ -203,7 +210,8 @@ main.contact .details {
max-width: 100%;
}
-main.message pre {
+main.message pre,
+main.event pre {
white-space: pre-wrap;
word-break: break-all;
}
@@ -250,6 +258,18 @@ main.create-update .actions > *:not(:last-child) {
margin-right: 1rem;
}
+main.create-update .event-date {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+}
+
+main.create-update .event-date input {
+ width: inherit;
+ flex-grow: 1;
+ margin-left: 0.3rem;
+}
+
.actions h3 {
align-self: center;
margin: 0 1.3rem 0 1rem;
diff --git a/themes/alps/event.html b/themes/alps/event.html
new file mode 100644
index 0000000..52b7fa4
--- /dev/null
+++ b/themes/alps/event.html
@@ -0,0 +1,59 @@
+{{template "head.html" .}}
+{{template "nav.html" .}}
+
+<div class="page-wrap">
+ <aside>
+ <a href="/calendar/create" class="new">New event</a>
+ <!-- TODO: fetch list of address books -->
+ <a href="#" class="active">{{.Calendar.Name}}</a>
+ <a href="#">Personal</a>
+ </aside>
+
+ <div class="container">
+ <main class="event">
+ <section class="actions">
+ <div class="actions-wrap">
+ <div class="actions-message">
+ <div class="action-group">
+ <a href="/calendar" class="button-link">« Back</a>
+ </div>
+ <div class="action-group">
+ <a href="{{.Event.URL}}/update" class="button-link">Edit</a>
+ </div>
+ <form
+ class="action-group"
+ action="{{.Event.URL}}/delete"
+ method="post"
+ >
+ <input type="submit" value="Delete">
+ </form>
+ <!-- TODO: Invite attendees -->
+ </div>
+ </div>
+ </section>
+
+ <section class="details">
+ {{$event := index .Event.Data.Events 0}}
+ <table>
+ <tr>
+ <th colspan="2">
+ <h1>{{$event.Props.Text "SUMMARY"}}</h1>
+ </th>
+ </tr>
+ <tr>
+ <th>Start date:</th>
+ <td>{{$event.DateTimeStart nil | formatdate}}</td>
+ </tr>
+ <tr>
+ <th>End date:</th>
+ <td>{{$event.DateTimeEnd nil | formatdate}}</td>
+ </tr>
+ <!-- TODO: List of attendees, room -->
+ </table>
+ <pre>{{$event.Props.Text "DESCRIPTION"}}</pre>
+ </section>
+ </main>
+ </div>
+</div>
+
+{{template "foot.html"}}
diff --git a/themes/alps/update-event.html b/themes/alps/update-event.html
index 7e7c1eb..17c6e16 100644
--- a/themes/alps/update-event.html
+++ b/themes/alps/update-event.html
@@ -21,15 +21,16 @@
<input type="text" name="summary" id="summary" value="{{.Event.Props.Text "SUMMARY"}}">
</label>
- <label>
- <!-- TODO: inputs with time -->
- <span>Start date</span>
- <input type="date" name="start" id="start" value="{{.Event.DateTimeStart nil | ornow | formatinputdate}}"/>
+ <label class="event-date">
+ <span>Starts at</span>
+ <input type="date" name="start" id="start" value="{{.Event.DateTimeStart nil | formatinputdate}}"/>
+ <input type="time" name="start-time" id="start-time" value="{{.Event.DateTimeStart nil | formatinputtime}}"/>
</label>
- <label>
- <span>End date</span>
- <input type="date" name="end" id="end" value="{{.Event.DateTimeEnd nil | ornow | formatinputdate}}"/>
+ <label class="event-date">
+ <span>Ends at</span>
+ <input type="date" name="end" id="end" value="{{.Event.DateTimeEnd nil | formatinputdate}}"/>
+ <input type="time" name="end-time" id="end-time" value="{{.Event.DateTimeEnd nil | formatinputtime}}"/>
</label>
<textarea name="description" id="description">{{.Event.Props.Text "DESCRIPTION"}}</textarea>
--
2.26.2
Re: [PATCH v3 3/3] alps theme: add event page layout
This patches series LGTM, pushed. Thanks!