Skip to content

Commit

Permalink
use button groups in node editor, tweak dracula theme
Browse files Browse the repository at this point in the history
  • Loading branch information
@blurymind
blurymind committed Aug 10, 2024
1 parent 285d220 commit 6a2f95a
Show file tree
Hide file tree
Showing 3 changed files with 68 additions and 41 deletions.
91 changes: 54 additions & 37 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -256,36 +256,46 @@
<span class="hide-when-narrow">&nbsp;</span>
<span class="hide-when-narrow bbcode-button-separator">||</span>
<span class="hide-when-narrow">&nbsp;</span>
<button class="bbcode-button" onclick="app.richTextFormatter.insertTag('b')" title="Bold">
<svg class="icon icon-bold icon-lg icon-fw"><use xlink:href="public/icons.svg#icon-bold"></use></svg>
</button>
<button class="bbcode-button" onclick="app.richTextFormatter.insertTag('i')" title="Italic">
<svg class="icon icon-italic icon-lg icon-fw"><use xlink:href="public/icons.svg#icon-italic"></use></svg>
</button>
<button class="bbcode-button" onclick="app.richTextFormatter.insertTag('u')" title="Underlined">
<svg class="icon icon-underline icon-lg icon-fw"><use xlink:href="public/icons.svg#icon-underline"></use></svg>
</button>
<div class="button-group-rounded">
<button class="bbcode-button" onclick="app.richTextFormatter.insertTag('b')" title="Bold">
<svg class="icon icon-bold icon-lg icon-fw"><use xlink:href="public/icons.svg#icon-bold"></use></svg>
</button>
<button class="bbcode-button" onclick="app.richTextFormatter.insertTag('i')" title="Italic">
<svg class="icon icon-italic icon-lg icon-fw"><use xlink:href="public/icons.svg#icon-italic"></use></svg>
</button>
<button class="bbcode-button" onclick="app.richTextFormatter.insertTag('u')" title="Underlined">
<svg class="icon icon-underline icon-lg icon-fw"><use xlink:href="public/icons.svg#icon-underline"></use></svg>
</button>
</div>

<span class="hide-when-narrow">&nbsp;</span>
<span class="hide-when-narrow bbcode-button-separator">||</span>
<span class="hide-when-narrow">&nbsp;</span>
<button class="bbcode-button" onclick="app.richTextFormatter.insertTag('cmd')" title="Command">
<svg class="icon icon-angle-double-left icon-lg icon-fw"><use xlink:href="public/icons.svg#icon-angle-double-left"></use></svg>
</button>
<button class="bbcode-button" onclick="app.richTextFormatter.insertTag('opt')" title="Choice/Link">
<svg class="icon icon-link icon-lg icon-fw"><use xlink:href="public/icons.svg#icon-link"></use></svg>
</button>

<div class="button-group-rounded">
<button class="bbcode-button" onclick="app.richTextFormatter.insertTag('cmd')" title="Command">
<svg class="icon icon-angle-double-left icon-lg icon-fw"><use xlink:href="public/icons.svg#icon-angle-double-left"></use></svg>
</button>
<button class="bbcode-button" onclick="app.richTextFormatter.insertTag('opt')" title="Choice/Link">
<svg class="icon icon-link icon-lg icon-fw"><use xlink:href="public/icons.svg#icon-link"></use></svg>
</button>
</div>

<span class="hide-when-narrow">&nbsp;</span>
<span class="hide-when-narrow bbcode-button-separator">||</span>
<span class="hide-when-narrow">&nbsp;</span>
<button class="hide-when-narrow bbcode-button" onclick="app.richTextFormatter.insertTag('img')" title="Image">
<svg class="icon icon-image icon-lg icon-fw"><use xlink:href="public/icons.svg#icon-image"></use></svg>
</button>
<button class="bbcode-button" onclick="app.richTextFormatter.insertTag('color')" title="Color Picker">
<svg class="icon icon-palette icon-lg icon-fw"><use xlink:href="public/icons.svg#icon-palette"></use></svg>
</button>
<button class="bbcode-button hide-when-narrow" onclick="app.insertEmoji()" title="Emoji">
<svg class="icon icon-sweat-emoji icon-lg icon-fw"><use xlink:href="public/icons.svg#icon-sweat-emoji"></use></svg>
</button>

<div class="button-group-rounded">
<button class="hide-when-narrow bbcode-button" onclick="app.richTextFormatter.insertTag('img')" title="Image">
<svg class="icon icon-image icon-lg icon-fw"><use xlink:href="public/icons.svg#icon-image"></use></svg>
</button>
<button class="bbcode-button" onclick="app.richTextFormatter.insertTag('color')" title="Color Picker">
<svg class="icon icon-palette icon-lg icon-fw"><use xlink:href="public/icons.svg#icon-palette"></use></svg>
</button>
<button class="bbcode-button hide-when-narrow" onclick="app.insertEmoji()" title="Emoji">
<svg class="icon icon-sweat-emoji icon-lg icon-fw"><use xlink:href="public/icons.svg#icon-sweat-emoji"></use></svg>
</button>
</div>

<!-- ko if:app.usingVisualStudioCodeExtension() -->
<button class="bbcode-button" id="edit-node-in-vscode" onclick="app.editNodeInVisualStudioCodeEditor(app.editing())">🛠️ Edit in Visual Studio Code Text Editor</button>
Expand All @@ -300,15 +310,18 @@
<label for="togleAutoCloseTags" title="Auto Close tags"><svg class="icon icon-tag icon-fw icon-lg"><use xlink:href="public/icons.svg#icon-tag"></use></svg></label>
</span>

<button id="exit-editor" class="bbcode-button bbcode-button-right hide-when-narrow hidden" data-bind="click: function() {app.saveNode(); app.closeEditor()}" title="Close Editor">
<svg class="icon icon-exit icon-lg icon-fw"><use xlink:href="public/icons.svg#icon-exit"></use></svg>
</button>
<button id="snap-editor-button" class="bbcode-button bbcode-button-right hide-when-narrow hidden" onclick="app.editorSnapToggle()" title="Snap to Other Side">
<svg class="icon icon-snap-document icon-lg icon-fw"><use xlink:href="public/icons.svg#icon-snap-document"></use></svg>
</button>
<button id="full-size-editor-button" class="bbcode-button bbcode-button-right hide-when-narrow hidden" onclick="app.toggleEditorView()" title="Full Size Editor">
<svg class="icon icon-no-columns icon-lg icon-fw"><use xlink:href="public/icons.svg#icon-no-columns"></use></svg>
</button>
<div class="button-group-rounded">
<button id="exit-editor" class="bbcode-button bbcode-button-right hide-when-narrow hidden" data-bind="click: function() {app.saveNode(); app.closeEditor()}" title="Close Editor">
<svg class="icon icon-exit icon-lg icon-fw"><use xlink:href="public/icons.svg#icon-exit"></use></svg>
</button>
<button id="snap-editor-button" class="bbcode-button bbcode-button-right hide-when-narrow hidden" onclick="app.editorSnapToggle()" title="Snap to Other Side">
<svg class="icon icon-snap-document icon-lg icon-fw"><use xlink:href="public/icons.svg#icon-snap-document"></use></svg>
</button>
<button id="full-size-editor-button" class="bbcode-button bbcode-button-right hide-when-narrow hidden" onclick="app.toggleEditorView()" title="Full Size Editor">
<svg class="icon icon-no-columns icon-lg icon-fw"><use xlink:href="public/icons.svg#icon-no-columns"></use></svg>
</button>
</div>

<span id="split-button-separator" class="hidden">
<span class="hide-when-narrow float-right">&nbsp;</span>
<span class="hide-when-narrow bbcode-button-separator bbcode-button-separator-float-right">||</span>
Expand All @@ -317,10 +330,14 @@
<span class="hide-when-narrow float-right">&nbsp;</span>
<span class="hide-when-narrow bbcode-button-separator bbcode-button-separator-float-right">||</span>
<span class="hide-when-narrow float-right">&nbsp;</span>
<button class="bbcode-button bbcode-button-right" onclick="app.searchTextInEditor()" title="Search (Ctrl+f)"><svg class="icon icon-search icon-lg icon-fw"><use xlink:href="public/icons.svg#icon-search"></use></svg></button>
<button id="split-editor-button" class="bbcode-button bbcode-button-right hide-when-narrow" onclick="app.toggleEditorView()" title="Split View">
<svg class="icon icon-columns icon-lg icon-fw"><use xlink:href="public/icons.svg#icon-columns"></use></svg>
</button>

<div class="button-group-rounded">
<button class="bbcode-button bbcode-button-right" onclick="app.searchTextInEditor()" title="Search (Ctrl+f)"><svg class="icon icon-search icon-lg icon-fw"><use xlink:href="public/icons.svg#icon-search"></use></svg></button>
<button id="split-editor-button" class="bbcode-button bbcode-button-right hide-when-narrow" onclick="app.toggleEditorView()" title="Split View">
<svg class="icon icon-columns icon-lg icon-fw"><use xlink:href="public/icons.svg#icon-columns"></use></svg>
</button>
</div>

<span class="hide-when-narrow float-right">&nbsp;</span>
<span class="hide-when-narrow bbcode-button-separator bbcode-button-separator-float-right">||</span>
<span class="hide-when-narrow float-right">&nbsp;</span>
Expand Down
6 changes: 5 additions & 1 deletion src/public/themes/dracula.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,11 @@
background-color: #343746;
}

.menu .dropdown .search-field{
color: #f8f8f2;
background: #282a36;
}

.app-menu .menu .dropdown .item:hover {
background: #44475a;
color: #f8f8f2;
Expand Down Expand Up @@ -474,7 +479,6 @@ input[type="text"] {
color: #f8f8f2;
background: #44475a;
border: none;
height: 22px;
line-height: 22px;
}

Expand Down
12 changes: 9 additions & 3 deletions src/scss/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -579,6 +579,8 @@ input#editorTitle {
}

.node-editor .form .bbcode-toolbar {
display: flex;
flex-wrap: wrap;
float: left;
width: 100%;
font-size: 0.8em;
Expand Down Expand Up @@ -651,7 +653,6 @@ input#editorTitle {

.bbcode-button-right {
float: right;
margin: 0 2px;
}

.bbcode-button-separator-float-right {
Expand Down Expand Up @@ -1044,6 +1045,7 @@ input:focus + span + .dropdown {
width: 100%;
padding: 10px;
text-align:center;
border-radius: 3px;
}

.item img {
Expand Down Expand Up @@ -1420,12 +1422,16 @@ input[type=search]::-webkit-search-cancel-button {
}

.button-group-rounded {
border-radius: 17px;
border-radius: 2rem;
gap: 0;
display: flex;
flex-wrap: wrap;
overflow: hidden;
font-size: 1.4rem;
/* font-size: 1.4rem; */
}
.button-group-rounded > :not(.active) {
opacity: 0.5;
}
.button-group-rounded > button {
border-radius: 0;
}

0 comments on commit 6a2f95a

Please sign in to comment.