Skip to content

Commit 75a5f20

Browse files
devvaannshdevvaannsh
committed
refactor: add snippet UI
1 parent a00a776 commit 75a5f20

File tree

2 files changed

+248
-16
lines changed

2 files changed

+248
-16
lines changed

‎src/extensionsIntegrated/CustomSnippets/htmlContent/snippets-panel.html‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -68,14 +68,16 @@
6868

6969
<!--this view will open up when user clicks on add a new snippet button-->
7070
<div id="custom-snippets-add-new" class="custom-snippets-add-new hidden">
71-
<div id="abbr-box-wrapper">
72-
<label for="abbr-box">Abbreviation: </label>
73-
<input id="abbr-box" type="text" placeholder="clg" autocomplete="off" />
74-
</div>
71+
<div class="form-row">
72+
<div id="abbr-box-wrapper">
73+
<label for="abbr-box">Abbreviation: </label>
74+
<input id="abbr-box" type="text" placeholder="clg" autocomplete="off" />
75+
</div>
7576

76-
<div id="desc-box-wrapper">
77-
<label for="desc-box">Description: </label>
78-
<input id="desc-box" type="text" placeholder="console log shortcut" autocomplete="off" />
77+
<div id="desc-box-wrapper">
78+
<label for="desc-box">Description: </label>
79+
<input id="desc-box" type="text" placeholder="console log shortcut" autocomplete="off" />
80+
</div>
7981
</div>
8082

8183
<div id="template-text-box-wrapper">

‎src/styles/Extn-CustomSnippets.less‎

Lines changed: 239 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -368,19 +368,31 @@
368368
}
369369

370370
#abbreviation-error-message {
371-
color: #f44336;
371+
color: @bc-error;
372372
font-size: 12px;
373-
margin-top: 3px;
374-
margin-left: 5px;
375-
padding: 3px 5px;
376-
background-color: rgba(244, 67, 54, 0.1);
377-
border-radius: 3px;
373+
margin-top: 6px;
374+
margin-left: 0;
375+
padding: 6px 8px;
376+
background-color: rgba(247, 70, 135, 0.1);
377+
border: 1px solid @bc-error;
378+
border-radius: @bc-border-radius;
378379
animation: fadeIn 0.3s ease;
380+
381+
.dark & {
382+
color: @dark-bc-error;
383+
background-color: rgba(247, 70, 135, 0.15);
384+
border: 1px solid @dark-bc-error;
385+
}
379386
}
380387

381388
.error-input {
382-
border-color: #f44336 !important;
383-
box-shadow: 0 0 3px rgba(244, 67, 54, 0.5) !important;
389+
border-color: @bc-error !important;
390+
box-shadow: 0 0 0 1px @bc-error !important;
391+
392+
.dark & {
393+
border-color: @dark-bc-error !important;
394+
box-shadow: 0 0 0 1px @dark-bc-error !important;
395+
}
384396
}
385397

386398
@keyframes fadeIn {
@@ -396,11 +408,229 @@
396408
width: 100%;
397409
min-height: 150px;
398410
max-height: 150px;
399-
resize: none;
411+
resize: none !important;
400412
padding: 6px 8px;
401413
box-sizing: border-box;
402414
margin: 0;
403415
white-space: pre;
404416
overflow-wrap: normal;
405417
word-break: normal;
406418
}
419+
420+
#custom-snippets-add-new {
421+
padding: 8px;
422+
background-color: @bc-panel-bg;
423+
border-top: 1px solid @bc-panel-separator;
424+
425+
.dark & {
426+
background-color: @dark-bc-panel-bg;
427+
border-top: 1px solid @dark-bc-panel-separator;
428+
}
429+
430+
#abbr-box-wrapper,
431+
#desc-box-wrapper,
432+
#template-text-box-wrapper,
433+
#file-extn-box-wrapper {
434+
margin-bottom: 12px;
435+
436+
&:last-of-type {
437+
margin-bottom: 8px;
438+
}
439+
440+
label {
441+
display: block;
442+
margin-bottom: 6px;
443+
color: @bc-text;
444+
445+
.dark & {
446+
color: @dark-bc-text;
447+
}
448+
}
449+
450+
input,
451+
textarea {
452+
width: 100%;
453+
background-color: @bc-input-bg;
454+
border: 1px solid @bc-btn-border;
455+
color: @bc-text-thin;
456+
box-shadow: inset 0 1px 0 @bc-shadow-small;
457+
border-radius: @bc-border-radius;
458+
padding: 8px 10px;
459+
box-sizing: border-box;
460+
transition:
461+
border linear 180ms,
462+
box-shadow linear 180ms;
463+
464+
.dark & {
465+
background-color: @dark-bc-input-bg;
466+
border: 1px solid @dark-bc-btn-border;
467+
color: @dark-bc-text-thin;
468+
box-shadow: inset 0 1px 0 @dark-bc-shadow-small;
469+
}
470+
471+
&::-webkit-input-placeholder {
472+
color: @bc-text-thin-quiet;
473+
474+
.dark & {
475+
color: @dark-bc-text-thin-quiet;
476+
}
477+
}
478+
479+
&:focus {
480+
outline: none;
481+
background-color: @bc-input-bg;
482+
text-shadow: none;
483+
border: 1px solid @bc-btn-border-focused;
484+
box-shadow:
485+
inset 0 1px 0 @bc-shadow-small,
486+
0 0 0 1px @bc-btn-border-focused-glow;
487+
488+
.dark & {
489+
background-color: @dark-bc-input-bg;
490+
border: 1px solid @dark-bc-btn-border-focused;
491+
box-shadow:
492+
inset 0 1px 0 @dark-bc-shadow-small,
493+
0 0 0 1px @dark-bc-btn-border-focused-glow;
494+
}
495+
}
496+
497+
&:disabled {
498+
opacity: @bc-disabled-opacity;
499+
cursor: default;
500+
501+
.dark & {
502+
opacity: @dark-bc-disabled-opacity;
503+
}
504+
}
505+
}
506+
507+
input {
508+
padding: 4px 10px;
509+
height: 32px;
510+
}
511+
}
512+
513+
.form-row {
514+
display: flex;
515+
gap: 12px;
516+
margin-bottom: 12px;
517+
518+
#abbr-box-wrapper {
519+
flex: 0 0 35%;
520+
margin-bottom: 0;
521+
}
522+
523+
#desc-box-wrapper {
524+
flex: 0 0 63%;
525+
margin-bottom: 0;
526+
}
527+
}
528+
529+
#file-extn-box-wrapper {
530+
label {
531+
display: inline-block;
532+
margin-bottom: 0;
533+
margin-right: 8px;
534+
line-height: 40px;
535+
vertical-align: top;
536+
min-width: 100px;
537+
}
538+
539+
input {
540+
display: inline-block;
541+
width: 200px;
542+
vertical-align: top;
543+
}
544+
}
545+
546+
#template-text-box-wrapper {
547+
textarea {
548+
min-height: 100px;
549+
max-height: 180px;
550+
resize: vertical;
551+
line-height: 1.4;
552+
white-space: pre;
553+
overflow-wrap: normal;
554+
word-break: normal;
555+
}
556+
}
557+
558+
#save-custom-snippet-btn {
559+
margin-top: 12px;
560+
padding-top: 12px;
561+
border-top: 1px solid @bc-panel-separator;
562+
text-align: right;
563+
564+
.dark & {
565+
border-top: 1px solid @dark-bc-panel-separator;
566+
}
567+
568+
button {
569+
background-color: @bc-primary-btn-bg;
570+
border: 1px solid @bc-primary-btn-border;
571+
border-radius: @bc-border-radius;
572+
color: @bc-text-alt;
573+
padding: 8px 20px;
574+
cursor: pointer;
575+
transition: all 0.15s ease;
576+
box-shadow: inset 0 1px 0 @bc-highlight;
577+
min-width: 80px;
578+
font-weight: @font-weight-semibold;
579+
text-shadow: 0 -1px 0 @bc-shadow-small;
580+
581+
.dark & {
582+
background-color: @dark-bc-primary-btn-bg;
583+
border: 1px solid @dark-bc-primary-btn-border;
584+
color: @dark-bc-text-alt;
585+
box-shadow: inset 0 1px 0 @dark-bc-highlight;
586+
text-shadow: 0 -1px 0 @dark-bc-shadow-small;
587+
}
588+
589+
&:hover:not(:disabled) {
590+
background-color: lighten(@bc-primary-btn-bg, 10%);
591+
592+
.dark & {
593+
background-color: lighten(@dark-bc-primary-btn-bg, 10%);
594+
}
595+
}
596+
597+
&:focus {
598+
outline: none;
599+
border: 1px solid @bc-primary-btn-border;
600+
box-shadow:
601+
inset 0 1px 0 @bc-highlight,
602+
0 0 0 1px @bc-primary-btn-border-focused-glow;
603+
604+
.dark & {
605+
border: 1px solid @dark-bc-primary-btn-border;
606+
box-shadow:
607+
inset 0 1px 0 @dark-bc-highlight,
608+
0 0 0 1px @dark-bc-btn-border-focused-glow;
609+
}
610+
}
611+
612+
&:disabled {
613+
opacity: @bc-disabled-opacity;
614+
cursor: default;
615+
background-color: @bc-primary-btn-bg;
616+
box-shadow: inset 0 1px 0 @bc-highlight;
617+
618+
.dark & {
619+
opacity: @dark-bc-disabled-opacity;
620+
background-color: @dark-bc-primary-btn-bg;
621+
box-shadow: inset 0 1px 0 @dark-bc-highlight;
622+
}
623+
}
624+
625+
&:active:not(:disabled) {
626+
background-color: @bc-primary-btn-bg-down;
627+
box-shadow: inset 0 1px 0 @bc-shadow-small;
628+
629+
.dark & {
630+
background-color: @dark-bc-primary-btn-bg-down;
631+
box-shadow: inset 0 1px 0 @dark-bc-shadow-small;
632+
}
633+
}
634+
}
635+
}
636+
}

0 commit comments

Comments
 (0)