github onebox template + css for chat
This commit is contained in:
parent
68a912952c
commit
e203b96d58
|
@ -0,0 +1,106 @@
|
|||
.github-onebox {
|
||||
//add this line when implementing, will scope to chat while not restricting the component to be used elsewhere later on
|
||||
// .main-chat-outlet & {
|
||||
border: 2px solid var(--primary-low);
|
||||
padding: 0.75rem 1rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
&__repo-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__repo-details {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
flex-wrap: wrap;
|
||||
white-space: nowrap;
|
||||
}
|
||||
&__author-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
&__text {
|
||||
color: var(--primary-high);
|
||||
}
|
||||
|
||||
.d-icon-fab-github {
|
||||
color: var(--github);
|
||||
}
|
||||
|
||||
&__repo-status {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: wrap-reverse;
|
||||
gap: 0.5rem;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
&__repo_tag {
|
||||
border-radius: 1rem;
|
||||
padding: 0.15rem 0.5rem;
|
||||
color: #fff;
|
||||
font-size: var(--font-down-1-rem);
|
||||
|
||||
&.--open {
|
||||
background-color: #1f883d;
|
||||
}
|
||||
|
||||
&.--draft {
|
||||
background-color: #6e7781;
|
||||
}
|
||||
|
||||
&.--closed {
|
||||
background-color: #cf222e;
|
||||
}
|
||||
|
||||
&.--merged {
|
||||
background-color: #7f32da;
|
||||
}
|
||||
}
|
||||
|
||||
&__repo-changes {
|
||||
font-size: var(--font-down-1-rem);
|
||||
}
|
||||
|
||||
&__repo-added {
|
||||
color: #1f883d;
|
||||
font-weight: bold;
|
||||
}
|
||||
&__repo-removed {
|
||||
color: #cf222e;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&__repo-change-divider {
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
|
||||
&__title {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
&__link {
|
||||
font-size: var(--font-up-1-rem);
|
||||
font-weight: bold;
|
||||
display: -webkit-inline-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__expand-button {
|
||||
height: var(--font-up-2-rem);
|
||||
}
|
||||
|
||||
&__description {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// }
|
||||
}
|
|
@ -18,6 +18,7 @@
|
|||
@import "chat-emoji-picker";
|
||||
@import "chat-form";
|
||||
@import "chat-index";
|
||||
@import "chat-github-onebox";
|
||||
@import "chat-mention-warnings";
|
||||
@import "chat-message-actions";
|
||||
@import "chat-message-collapser";
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
.github-onebox {
|
||||
&__repo-details {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
|
@ -3,6 +3,7 @@
|
|||
@import "chat-composer-uploads";
|
||||
@import "chat-index-drawer";
|
||||
@import "chat-index-full-page";
|
||||
@import "chat-github-onebox";
|
||||
@import "chat-message-actions";
|
||||
@import "chat-message";
|
||||
@import "chat-channel-info";
|
||||
|
|
|
@ -15,6 +15,48 @@
|
|||
</section>
|
||||
|
||||
<section class="styleguide-contents">
|
||||
<div class="github-onebox">
|
||||
<div class="github-onebox__repo-info">
|
||||
<div class="github-onebox__repo-details">
|
||||
<div class="github-onebox__author">
|
||||
{{d-icon "user"}}
|
||||
<span class="github-onebox__author-name">Charlie</span>
|
||||
</div>
|
||||
<div class="github-onebox__text">contributed to</div>
|
||||
<div class="github-onebox__repo">
|
||||
{{d-icon "fab-github"}}
|
||||
<span class="github-onebox__repo-name">discourse/discourse</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="github-onebox__repo-status">
|
||||
<span class="github-onebox__repo_changes">
|
||||
<span class="github-onebox__repo-added">+400</span>
|
||||
<span class="github-onebox__repo-change-divider">/</span>
|
||||
<span class="github-onebox__repo-removed">-212</span>
|
||||
</span>
|
||||
<span class="github-onebox__repo_tag --merged">merged</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="github-onebox__content">
|
||||
<div class="github-onebox__title">
|
||||
<a
|
||||
class="github-onebox__link"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>FIX: correct online indicator for non interactive</a>
|
||||
<DButton
|
||||
@class="github-onebox__expand-button"
|
||||
@icon="chevron-down"
|
||||
@title=""
|
||||
@action=""
|
||||
/>
|
||||
</div>
|
||||
<div class="github-onebox__description">In addition, the code syntax
|
||||
highlighting and copy buttons were broken in fullscreen because of
|
||||
modal changes over time. It is not the things themselves that disturb
|
||||
people but the judgements they make about these things.</div>
|
||||
</div>
|
||||
</div>
|
||||
{{outlet}}
|
||||
</section>
|
||||
</section>
|
Loading…
Reference in New Issue