Notebook toolbar UI improvement (#5282)

Fixed  #5236
- Change the icon to blue image. Existing icons are not deleted. We will use them when the icons are - - moved as the secondary actions.
- Change the font size to 13px
- Change the height to 21px
- Move Add actions to the left
This commit is contained in:
Yurong He
2019-04-30 16:18:48 -07:00
committed by GitHub
parent 97cab22e00
commit f9af34b103
17 changed files with 133 additions and 20 deletions

View File

@@ -24,6 +24,7 @@
.notebookEditor .actionbar-container .monaco-action-bar > ul.actions-container {
padding-top: 4px;
padding-bottom: 4px;
min-height: 21px;
}
.notebookEditor .actions-container .action-item .notebook-button {
@@ -35,57 +36,61 @@
padding-left: 18px;
background-size: 13px;
margin-right: 20px;
font-size: 11px;
font-size: 13px;
height: 21px;
}
.notebookEditor .labelOnLeftContainer {
min-width: 100px;
margin-right: 20px;
font-size: 13px;
text-align: center;
vertical-align: bottom;
}
.notebookEditor .notebook-button.icon-add{
background-image: url("./media/light/add.svg");
background-image: url("./media/light/add_blue.svg");
}
.vs-dark .notebookEditor .notebook-button.icon-add,
.hc-black .notebookEditor .notebook-button.icon-add{
background-image: url("./media/dark/add_inverse.svg");
background-image: url("./media/dark/add_blue_inverse.svg");
}
.notebookEditor .notebook-button.icon-run-cells{
background-image: url("./media/light/run_cells.svg");
background-image: url("./media/light/run_cells_blue.svg");
}
.vs-dark .notebookEditor .notebook-button.icon-run-cells,
.hc-black .notebookEditor .notebook-button.icon-run-cells{
background-image: url("./media/dark/run_cells_inverse.svg");
background-image: url("./media/dark/run_cells_blue_inverse.svg");
}
.notebookEditor .notebook-button.icon-trusted{
background-image: url("./media/light/trusted.svg");
background-image: url("./media/light/trusted_blue.svg");
}
.vs-dark .notebookEditor .notebook-button.icon-trusted,
.hc-black .notebookEditor .notebook-button.icon-trusted{
background-image: url("./media/dark/trusted_inverse.svg");
background-image: url("./media/dark/trusted_blue_inverse.svg");
}
.notebookEditor .notebook-button.icon-notTrusted{
background-image: url("./media/light/nottrusted.svg");
background-image: url("./media/light/nottrusted_blue.svg");
}
.vs-dark .notebookEditor .notebook-button.icon-notTrusted,
.hc-black .notebookEditor .notebook-button.icon-notTrusted{
background-image: url("./media/dark/nottrusted_inverse.svg");
background-image: url("./media/dark/nottrusted_blue_inverse.svg");
}
.notebookEditor .notebook-button.icon-clear-results{
background-image: url("./media/light/clear_results.svg");
background-image: url("./media/light/clear_results_blue.svg");
}
.vs-dark .notebookEditor .notebook-button.icon-clear-results,
.hc-black .notebookEditor .notebook-button.icon-clear-results{
background-image: url("./media/dark/clear_results_inverse.svg");
background-image: url("./media/dark/clear_results_blue_inverse.svg");
}
.moreActions .action-label.icon.toggle-more {