-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path__FeedbackButton.cshtml
137 lines (119 loc) · 4.32 KB
/
__FeedbackButton.cshtml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
@inherits Custom.Hybrid.Razor14
@* This inherits statement gets you features like App, CmsContext, Data etc. - you can delete this comment *@
@using ToSic.Sxc.Services; @* Make it easier to use https://r.2sxc.org/services *@
@using ToSic.Razor.Blade;
@{
var title = Page.Title;
var user = CmsContext.User.Username;
var url = Request.Url.AbsoluteUri;
var tabId = CmsContext.Page.Id;
var parameters = CmsContext.Page.Parameters.ToString();
var uiSvgIconColored = new {
Icon = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M256 32C114.6 32 0 125.1 0 240c0 47.6 19.9 91.2 52.9 126.3C38 405.7 7 439.1 6.5 439.5c-6.6 7-8.4 17.2-4.6 26S14.4 480 24 480c61.5 0 110-25.7 139.1-46.3C192 442.8 223.2 448 256 448c141.4 0 256-93.1 256-208S397.4 32 256 32zm0 368c-26.7 0-53.1-4.1-78.4-12.1l-22.7-7.2-19.5 13.8c-14.3 10.1-33.9 21.4-57.5 29 7.3-12.1 14.4-25.7 19.9-40.2l10.6-28.1-20.6-21.8C69.7 314.1 48 282.2 48 240c0-88.2 93.3-160 208-160s208 71.8 208 160-93.3 160-208 160z'/></svg>",
color = "var(--magenta)"
};
var toolbar = Kit.Toolbar.Empty()
.New("Feedback", ui: uiSvgIconColored, prefill: "PageTitle="+title+"&Page="+url+"&User="+user+"&PageId="+tabId+"&=Parameters="+parameters)
.Settings(show: "always").AsTag();
var toolbarFeedback = Kit.Toolbar.Empty().Edit().Settings(show: "always").AsTag();
// Fetch all Comments for this Site
var feedbackQuery = App.Query["FeedbackByPageId"];
feedbackQuery.Params("PageId", tabId.ToString());
var feedbacks = AsList(feedbackQuery["Default"] as object);
}
<div id="feedback">
<aside id="feedback__details" class="feedback__details--hide mb-2">
@foreach(var feedback in feedbacks) {
<article class="feedback__detail">
<div>
<header>@feedback.EntityTitle</header>
@Html.Raw(feedback.Description)
</div>
<div>
@toolbarFeedback.For(feedback)
</div>
</article>
}
</aside>
@if(feedbacks.Count() > 0 ) {
<div class="feedback__button mb-1" onclick="toogleDetails()">@feedbacks.Count()</div>
}
<div @toolbar> Test</div>
</div>
<aside>
<img id="result"/>
</aside>
<script>
toogleDetails = function() {
var details = document.getElementById("feedback__details");
details.classList.toggle('feedback__details--hide');
}
const capture = () => {
const screenshotTarget = document.body;
html2canvas(screenshotTarget).then((canvas) => {
const base64image = canvas.toDataURL("image/png");
setResult(base64image);
});
}
const setResult = (image) => {
document.getElementById('result').src = image;
}
capture();
</script>
<script src="@App.Path/dist/html2canvas.min.js" @Kit.Page.AssetAttributes()></script>
<style>
#feedback {
position: fixed;
right: 20px;
bottom: 20px;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
z-index: 2000;
}
#feedback .sc-menu a div,
.feedback__button {
height: 48px !important;
width: 48px !important;
border-radius: 24px;
font-size: 20px;
background-color: var(--magenta);
box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
}
.feedback__button {
display: flex;
justify-content: center;
align-items: center;
color: white;
cursor: pointer;
}
#feedback__details {
width: 25vw;
padding: 20px;
background-color: white;
box-shadow: 5px 5px 5px #ccc;
display: flex;
flex-direction: column;
gap: 20px;
transition: transform 0.5s;
}
.feedback__details--hide {
transform: translateX(calc(25vw + 10px));
}
.feedback__detail {
display: grid;
grid-template-columns: 1fr 48px;
gap:20px;
}
#feedback .sc-menu .feedback__detail a div {
height: 28px !important;
width: 28px !important;
border-radius: 14px;
font-size: 15px;
background-color: var(--blue);
}
.feedback__detail header{
font-weight: bold;
}
</style>