Skip to content

Commit

Permalink
Movwd editor tools to submenu.
Browse files Browse the repository at this point in the history
  • Loading branch information
@imolorhe
imolorhe committed Dec 18, 2018
1 parent 29299f1 commit 044a98c
Show file tree
Hide file tree
Showing 2 changed files with 93 additions and 48 deletions.
89 changes: 48 additions & 41 deletions src/app/containers/app/app.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,47 +48,6 @@

<div class="app-side-menu">
<div class="side-menu__main">
<a class="side-menu-item" (click)="prettifyCode()" attr.aria-label="{{ 'PRETTIFY_BUTTON' | translate }}" track-id="prettify">
<div class="side-menu-item-icon">
<clr-icon shape="wand"></clr-icon>
</div>
<div class="side-menu-item-label">
{{ 'PRETTIFY_BUTTON' | translate }}
</div>
</a>
<a class="side-menu-item" (click)="compressQuery()" attr.aria-label="{{ 'COMPRESS_QUERY_BUTTON' | translate }}" track-id="compress_query">
<div class="side-menu-item-icon">
<clr-icon shape="shrink"></clr-icon>
</div>
<div class="side-menu-item-label">
{{ 'COMPRESS_QUERY_BUTTON' | translate }}
</div>
</a>
<a class="side-menu-item" (click)="clearEditor()" attr.aria-label="{{ 'CLEAR_BUTTON' | translate }}" track-id="clear">
<div class="side-menu-item-icon">
<clr-icon shape="trash"></clr-icon>
</div>
<div class="side-menu-item-label">
{{ 'CLEAR_BUTTON' | translate }}
</div>
</a>
<a class="side-menu-item" (click)="copyAsCurl()" attr.aria-label="{{ 'COPY_AS_CURL_BUTTON' | translate }}" track-id="copy_as_curl">
<div class="side-menu-item-icon">
<clr-icon shape="file-share"></clr-icon>
</div>
<div class="side-menu-item-label">
{{ 'COPY_AS_CURL_BUTTON' | translate }}
</div>
</a>
<a class="side-menu-item" (click)="convertToNamedQuery()" attr.aria-label="{{ 'CONVERT_TO_NAMED_QUERY_BUTTON' | translate }}" track-id="convert_to_named_query">
<div class="side-menu-item-icon">
<clr-icon shape="container"></clr-icon>
</div>
<div class="side-menu-item-label">
{{ 'CONVERT_TO_NAMED_QUERY_BUTTON' | translate }}
</div>
</a>
<div class="side-menu-divider"></div>
<a class="side-menu-item" (click)="toggleHeader(true)" attr.aria-label="{{ 'SET_HEADERS_BUTTON' | translate }}" track-id="show_set_headers">
<div class="side-menu-item-icon">
<clr-icon shape="asterisk"></clr-icon>
Expand Down Expand Up @@ -122,6 +81,54 @@
</div>
</a>
<div class="side-menu-divider"></div>
<div class="side-menu-item">
<div class="side-menu-item-icon">
<clr-icon shape="tools"></clr-icon>
</div>
<div class="side-menu-item-submenu">
<a class="submenu-item" (click)="prettifyCode()" attr.aria-label="{{ 'PRETTIFY_BUTTON' | translate }}" track-id="prettify">
<div class="submenu-item-icon">
<clr-icon shape="wand"></clr-icon>
</div>
<div class="submenu-item-label">
{{ 'PRETTIFY_BUTTON' | translate }}
</div>
</a>
<a class="submenu-item" (click)="compressQuery()" attr.aria-label="{{ 'COMPRESS_QUERY_BUTTON' | translate }}" track-id="compress_query">
<div class="submenu-item-icon">
<clr-icon shape="shrink"></clr-icon>
</div>
<div class="submenu-item-label">
{{ 'COMPRESS_QUERY_BUTTON' | translate }}
</div>
</a>
<a class="submenu-item" (click)="clearEditor()" attr.aria-label="{{ 'CLEAR_BUTTON' | translate }}" track-id="clear">
<div class="submenu-item-icon">
<clr-icon shape="trash"></clr-icon>
</div>
<div class="submenu-item-label">
{{ 'CLEAR_BUTTON' | translate }}
</div>
</a>
<a class="submenu-item" (click)="copyAsCurl()" attr.aria-label="{{ 'COPY_AS_CURL_BUTTON' | translate }}" track-id="copy_as_curl">
<div class="submenu-item-icon">
<clr-icon shape="file-share"></clr-icon>
</div>
<div class="submenu-item-label">
{{ 'COPY_AS_CURL_BUTTON' | translate }}
</div>
</a>
<a class="submenu-item" (click)="convertToNamedQuery()" attr.aria-label="{{ 'CONVERT_TO_NAMED_QUERY_BUTTON' | translate }}" track-id="convert_to_named_query">
<div class="submenu-item-icon">
<clr-icon shape="container"></clr-icon>
</div>
<div class="submenu-item-label">
{{ 'CONVERT_TO_NAMED_QUERY_BUTTON' | translate }}
</div>
</a>
</div>
</div>
<div class="side-menu-divider"></div>
<a class="side-menu-item" (click)="exportWindowData()" attr.aria-label="{{ 'EXPORT_WINDOW_TEXT' | translate }}" track-id="export_window">
<div class="side-menu-item-icon">
<clr-icon shape="export"></clr-icon>
Expand Down
52 changes: 45 additions & 7 deletions src/scss/components/_side-menu.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
order: -1;
display: flex;
flex-direction: row;
will-change: width;
}
.side-menu__main {
flex: 1 1 auto;
Expand All @@ -28,27 +27,37 @@
text-align: center;
cursor: pointer;
color: var(--theme-font-color);
opacity: .5;
// opacity: .5;
transition: all .3s ease;
&:hover {
opacity: 1;
// opacity: 1;
color: var(--theme-font-color);
.side-menu-item-icon {
color: var(--primary-color);
}
.side-menu-item-label {
// max-width: 300px;
max-width: 300px;
opacity: 1;
color: var(--theme-font-color);
}
.side-menu-item-submenu {
display: block;
}
}
&--active {
opacity: 1;
color: var(--primary-color);
}
}
.side-menu-item-icon {
transition: all .3s ease;
}
.side-menu-item-label {
position: absolute;
top: 0;
left: 45px;
z-index: 4;
z-index: 10;
background: var(--theme-bg-color);
// max-width: 0;
max-width: 0;
opacity: 0;
white-space: nowrap;
overflow: hidden;
Expand All @@ -60,3 +69,32 @@
margin: 10px 0;
opacity: .5;
}

.side-menu-item-submenu {
display: none;
position: absolute;
top: 10px;
left: 100%;
z-index: 10;
min-width: 100px;
width: max-content;
background: var(--theme-bg-color);
text-align: left;
line-height: 1;
box-shadow: 1px 2px 10px var(--shadow-bg);
.submenu-item {
display: block;
color: var(--theme-font-color);
padding: 10px;
transition: all .3s ease;
&:hover {
color: var(--theme-font-color);
background: var(--theme-off-bg-color);
text-decoration: none;
}
}
.submenu-item-icon, .submenu-item-label {
display: inline-block;
vertical-align: middle;
}
}

0 comments on commit 044a98c

Please sign in to comment.