[HTML] Adjust embed color to theme

pull/241/head
Alexey Golub 5 years ago
parent 0d2ae8b5db
commit cc1bb924e7

@ -14,8 +14,7 @@ namespace DiscordChatExporter.Core.Models
public DateTimeOffset? Timestamp { get; } public DateTimeOffset? Timestamp { get; }
// TODO: this should be nullable and default color should be set in CSS public Color? Color { get; }
public Color Color { get; }
public EmbedAuthor? Author { get; } public EmbedAuthor? Author { get; }
@ -29,7 +28,7 @@ namespace DiscordChatExporter.Core.Models
public EmbedFooter? Footer { get; } public EmbedFooter? Footer { get; }
public Embed(string? title, string? url, DateTimeOffset? timestamp, Color color, EmbedAuthor? author, string? description, public Embed(string? title, string? url, DateTimeOffset? timestamp, Color? color, EmbedAuthor? author, string? description,
IReadOnlyList<EmbedField> fields, EmbedImage? thumbnail, EmbedImage? image, EmbedFooter? footer) IReadOnlyList<EmbedField> fields, EmbedImage? thumbnail, EmbedImage? image, EmbedFooter? footer)
{ {
Title = title; Title = title;

@ -70,6 +70,10 @@ a {
color: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.2);
} }
.chatlog__embed-color-pill--default {
background-color: rgba(79, 84, 92, 1);
}
.chatlog__embed-content-container { .chatlog__embed-content-container {
background-color: rgba(46, 48, 54, 0.3); background-color: rgba(46, 48, 54, 0.3);
border-color: rgba(46, 48, 54, 0.6); border-color: rgba(46, 48, 54, 0.6);

@ -73,6 +73,10 @@ a {
color: #747f8d; color: #747f8d;
} }
.chatlog__embed-color-pill--default {
background-color: rgba(227, 229, 232, 1);
}
.chatlog__embed-content-container { .chatlog__embed-content-container {
background-color: rgba(249, 249, 249, 0.3); background-color: rgba(249, 249, 249, 0.3);
border-color: rgba(204, 204, 204, 0.3); border-color: rgba(204, 204, 204, 0.3);

@ -15,12 +15,23 @@
{{ ThemeStyleSheet }} {{ ThemeStyleSheet }}
</style> </style>
{{~ # Syntax highlighting ~}}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/{{HighlightJsStyleName}}.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.pre--multiline').forEach((block) => {
hljs.highlightBlock(block);
});
});
</script>
{{~ # Local scripts ~}} {{~ # Local scripts ~}}
<script> <script>
function scrollToMessage(event, id) { function scrollToMessage(event, id) {
var element = document.getElementById('message-' + id); var element = document.getElementById('message-' + id);
if (element !== null && element !== undefined) { if (element) {
event.preventDefault(); event.preventDefault();
element.classList.add('chatlog__message--highlighted'); element.classList.add('chatlog__message--highlighted');
@ -36,17 +47,6 @@
} }
} }
</script> </script>
{{~ # Syntax highlighting ~}}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/{{HighlightJsStyleName}}.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.pre--multiline').forEach((block) => {
hljs.highlightBlock(block);
});
});
</script>
</head> </head>
<body> <body>
@ -130,107 +130,111 @@
{{~ # Embeds ~}} {{~ # Embeds ~}}
{{~ for embed in message.Embeds ~}} {{~ for embed in message.Embeds ~}}
<div class="chatlog__embed"> <div class="chatlog__embed">
<div class="chatlog__embed-color-pill" style="background-color: rgba({{ embed.Color.R }},{{ embed.Color.G }},{{ embed.Color.B }},{{ embed.Color.A }})"></div> {{~ if embed.Color ~}}
<div class="chatlog__embed-content-container"> <div class="chatlog__embed-color-pill" style="background-color: rgba({{ embed.Color.R }},{{ embed.Color.G }},{{ embed.Color.B }},{{ embed.Color.A }})"></div>
<div class="chatlog__embed-content"> {{~ else ~}}
<div class="chatlog__embed-text"> <div class="chatlog__embed-color-pill chatlog__embed-color-pill--default"></div>
{{~ # Author ~}} {{~ end ~}}
{{~ if embed.Author ~}} <div class="chatlog__embed-content-container">
<div class="chatlog__embed-author"> <div class="chatlog__embed-content">
{{~ if embed.Author.IconUrl ~}} <div class="chatlog__embed-text">
<img class="chatlog__embed-author-icon" src="{{ embed.Author.IconUrl }}" /> {{~ # Author ~}}
{{~ end ~}} {{~ if embed.Author ~}}
<div class="chatlog__embed-author">
{{~ if embed.Author.Name ~}} {{~ if embed.Author.IconUrl ~}}
<span class="chatlog__embed-author-name"> <img class="chatlog__embed-author-icon" src="{{ embed.Author.IconUrl }}" />
{{~ if embed.Author.Url ~}}
<a class="chatlog__embed-author-name-link" href="{{ embed.Author.Url }}">{{ embed.Author.Name | html.escape }}</a>
{{~ else ~}}
{{ embed.Author.Name | html.escape }}
{{~ end ~}}
</span>
{{~ end ~}}
</div>
{{~ end ~}}
{{~ # Title ~}}
{{~ if embed.Title ~}}
<div class="chatlog__embed-title">
{{~ if embed.Url ~}}
<a class="chatlog__embed-title-link" href="{{ embed.Url }}"><span class="markdown">{{ embed.Title | FormatMarkdown }}</span></a>
{{~ else ~}}
<span class="markdown">{{ embed.Title | FormatMarkdown }}</span>
{{~ end ~}}
</div>
{{~ end ~}} {{~ end ~}}
{{~ # Description ~}} {{~ if embed.Author.Name ~}}
{{~ if embed.Description ~}} <span class="chatlog__embed-author-name">
<div class="chatlog__embed-description"><span class="markdown">{{ embed.Description | FormatMarkdown }}</span></div> {{~ if embed.Author.Url ~}}
<a class="chatlog__embed-author-name-link" href="{{ embed.Author.Url }}">{{ embed.Author.Name | html.escape }}</a>
{{~ else ~}}
{{ embed.Author.Name | html.escape }}
{{~ end ~}}
</span>
{{~ end ~}} {{~ end ~}}
</div>
{{~ end ~}}
{{~ # Fields ~}} {{~ # Title ~}}
{{~ if embed.Fields | array.size > 0 ~}} {{~ if embed.Title ~}}
<div class="chatlog__embed-fields"> <div class="chatlog__embed-title">
{{~ for field in embed.Fields ~}} {{~ if embed.Url ~}}
<div class="chatlog__embed-field {{ if field.IsInline }} chatlog__embed-field--inline {{ end }}"> <a class="chatlog__embed-title-link" href="{{ embed.Url }}"><span class="markdown">{{ embed.Title | FormatMarkdown }}</span></a>
{{~ if field.Name ~}} {{~ else ~}}
<div class="chatlog__embed-field-name"><span class="markdown">{{ field.Name | FormatMarkdown }}</span></div> <span class="markdown">{{ embed.Title | FormatMarkdown }}</span>
{{~ end ~}}
{{~ if field.Value ~}}
<div class="chatlog__embed-field-value"><span class="markdown">{{ field.Value | FormatMarkdown }}</span></div>
{{~ end ~}}
</div>
{{~ end ~}}
</div>
{{~ end ~}} {{~ end ~}}
</div> </div>
{{~ end ~}}
{{~ # Description ~}}
{{~ if embed.Description ~}}
<div class="chatlog__embed-description"><span class="markdown">{{ embed.Description | FormatMarkdown }}</span></div>
{{~ end ~}}
{{~ # Thumbnail ~}} {{~ # Fields ~}}
{{~ if embed.Thumbnail ~}} {{~ if embed.Fields | array.size > 0 ~}}
<div class="chatlog__embed-thumbnail-container"> <div class="chatlog__embed-fields">
<a class="chatlog__embed-thumbnail-link" href="{{ embed.Thumbnail.Url }}"> {{~ for field in embed.Fields ~}}
<img class="chatlog__embed-thumbnail" src="{{ embed.Thumbnail.Url }}" /> <div class="chatlog__embed-field {{ if field.IsInline }} chatlog__embed-field--inline {{ end }}">
</a> {{~ if field.Name ~}}
<div class="chatlog__embed-field-name"><span class="markdown">{{ field.Name | FormatMarkdown }}</span></div>
{{~ end ~}}
{{~ if field.Value ~}}
<div class="chatlog__embed-field-value"><span class="markdown">{{ field.Value | FormatMarkdown }}</span></div>
{{~ end ~}}
</div> </div>
{{~ end ~}}
</div>
{{~ end ~}} {{~ end ~}}
</div> </div>
{{~ # Image ~}} {{~ # Thumbnail ~}}
{{~ if embed.Image ~}} {{~ if embed.Thumbnail ~}}
<div class="chatlog__embed-image-container"> <div class="chatlog__embed-thumbnail-container">
<a class="chatlog__embed-image-link" href="{{ embed.Image.Url }}"> <a class="chatlog__embed-thumbnail-link" href="{{ embed.Thumbnail.Url }}">
<img class="chatlog__embed-image" src="{{ embed.Image.Url }}" /> <img class="chatlog__embed-thumbnail" src="{{ embed.Thumbnail.Url }}" />
</a> </a>
</div> </div>
{{~ end ~}} {{~ end ~}}
</div>
{{~ # Footer ~}} {{~ # Image ~}}
{{~ if embed.Footer || embed.Timestamp ~}} {{~ if embed.Image ~}}
<div class="chatlog__embed-footer"> <div class="chatlog__embed-image-container">
{{~ if embed.Footer ~}} <a class="chatlog__embed-image-link" href="{{ embed.Image.Url }}">
{{~ if embed.Footer.Text && embed.Footer.IconUrl ~}} <img class="chatlog__embed-image" src="{{ embed.Image.Url }}" />
<img class="chatlog__embed-footer-icon" src="{{ embed.Footer.IconUrl }}" /> </a>
{{~ end ~}} </div>
{{~ end ~}} {{~ end ~}}
<span class="chatlog__embed-footer-text">
{{~ if embed.Footer ~}}
{{~ if embed.Footer.Text ~}}
{{ embed.Footer.Text | html.escape }}
{{ if embed.Timestamp }} • {{ end }}
{{~ end ~}}
{{~ end ~}}
{{~ if embed.Timestamp ~}} {{~ # Footer ~}}
{{ embed.Timestamp | FormatDate | html.escape }} {{~ if embed.Footer || embed.Timestamp ~}}
{{~ end ~}} <div class="chatlog__embed-footer">
</span> {{~ if embed.Footer ~}}
</div> {{~ if embed.Footer.Text && embed.Footer.IconUrl ~}}
<img class="chatlog__embed-footer-icon" src="{{ embed.Footer.IconUrl }}" />
{{~ end ~}}
{{~ end ~}} {{~ end ~}}
<span class="chatlog__embed-footer-text">
{{~ if embed.Footer ~}}
{{~ if embed.Footer.Text ~}}
{{ embed.Footer.Text | html.escape }}
{{ if embed.Timestamp }} • {{ end }}
{{~ end ~}}
{{~ end ~}}
{{~ if embed.Timestamp ~}}
{{ embed.Timestamp | FormatDate | html.escape }}
{{~ end ~}}
</span>
</div> </div>
{{~ end ~}}
</div> </div>
</div>
{{~ end ~}} {{~ end ~}}
{{~ # Reactions ~}} {{~ # Reactions ~}}

@ -123,7 +123,7 @@ namespace DiscordChatExporter.Core.Services
// Get color // Get color
var color = json["color"] != null var color = json["color"] != null
? Color.FromArgb(json["color"]!.Value<int>()).ResetAlpha() ? Color.FromArgb(json["color"]!.Value<int>()).ResetAlpha()
: Color.FromArgb(79, 84, 92); // default color : default(Color?);
// Get author // Get author
var author = json["author"] != null ? ParseEmbedAuthor(json["author"]!) : null; var author = json["author"] != null ? ParseEmbedAuthor(json["author"]!) : null;

Loading…
Cancel
Save