ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-20 01:25:37 -05:00
Code Issues Packages Projects Releases Wiki Activity

Welcome responsive container (#9946) (#9870)

Browse Source 
* adds responsiveness to the left navigation pane

* fixes style

* removes color from css

* updates style
This commit is contained in:
v-bbrady
2020-04-16 12:49:38 -07:00
committed by GitHub
parent 8435dc468e
commit e8bc6f8f6b
3 changed files with 569 additions and 402 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/sql/workbench/contrib/welcome/page/browser/az_data_welcome_page.ts
View File

@@ -34,9 +34,11 @@ export default () => `
<div class="row start">
<div class="header_top_nav">
<div class="flex">
<div class="icon"></div>
<div class="icon sm"></div>
<div class="title">
<h1 class="caption"></h1>
<div class="caption_container">
<span class="icon xs"></span><h1 class="caption"></h1>
</div>
<div class="flex btn_container">
<div>
<button id="dropdown_btn" class="btn btn_primary dropdown" role="navigation" aria-haspopup="true" aria-controls="dropdown">
@@ -67,7 +69,7 @@ export default () => `
<div class="row header_bottom_nav_tiles ads_grid">
<div class="col">
<a class="header_bottom_nav_tile_link" href="command:registeredServers.addConnection">
<div class="header_bottom_nav_tile tile tile_connection content">
<div class="header_bottom_nav_tile tile tile_connection">
<h3>${escape(localize('welcomePage.createConnection', "Create a connection"))}</h3>
<p>${escape(localize('welcomePage.createConnectionBody', "Connect to a database instance through the connection dialog."))}</p>
<div class="icon connection"></div>
@@ -77,7 +79,7 @@ export default () => `
<div class="col">
<a class="header_bottom_nav_tile_link"
href="command:workbench.action.files.newUntitledFile">
<div class="header_bottom_nav_tile tile tile_query content">
<div class="header_bottom_nav_tile tile tile_query">
<h3>${escape(localize('welcomePage.runQuery', "Run a query"))}</h3>
<p>${escape(localize('welcomePage.runQueryBody', "Interact with data through a query editor."))}</p>
<div class="icon query"></div>
@@ -86,7 +88,7 @@ export default () => `
</div>
<div class="col">
<a class="header_bottom_nav_tile_link" href="command:notebook.command.new">
<div class="header_bottom_nav_tile tile tile_notebook content">
<div class="header_bottom_nav_tile tile tile_notebook">
<h3>${escape(localize('welcomePage.createNotebook', "Create a notebook"))}</h3>
<p>${escape(localize('welcomePage.createNotebookBody', "Build a new notebook using a native notebook editor."))}</p>
<div class="icon notebook"></div>
@@ -95,7 +97,7 @@ export default () => `
</div>
<div class="col">
<a class="header_bottom_nav_tile_link" href="command:azdata.resource.deploy">
<div class="header_bottom_nav_tile tile tile_server content">
<div class="header_bottom_nav_tile tile tile_server">
<h3>${escape(localize('welcomePage.deployServer', "Deploy a server"))}</h3>
<p>${escape(localize('welcomePage.deployServerBody', "Create a new instance of SQL Server on the platform of your choice."))}</p>
<div class="icon server"></div>
@@ -133,7 +135,7 @@ export default () => `
</div>
</div>
<p class="showOnStartup"><input type="checkbox" id="showOnStartup" class="checkbox">
<label class="caption" for="showOnStartup">${escape(localize('welcomePage.showOnStartup', "Show welcome page on startup"))}</label>
<label for="showOnStartup">${escape(localize('welcomePage.showOnStartup', "Show welcome page on startup"))}</label>
</p>
</div>
<div class="getting_started_container">
@@ -160,7 +162,7 @@ export default () => `
<div class="videos_container row">
<h2>Videos</h2>
<div class="flex flex_d_row">
<div class="flex flex_container_video">
<div class="videos_container_video">
<a href="https://www.youtube.com/watch?v=Orv7fptVoUA" class="video overview">
<img id="video_overview" />

917
src/sql/workbench/contrib/welcome/page/browser/welcomePage.css
View File

File diff suppressed because it is too large Load Diff

36
src/sql/workbench/contrib/welcome/page/browser/welcomePage.ts
View File

@@ -245,6 +245,42 @@ class WelcomePage extends Disposable {
if (prodName) {
prodName.innerHTML = this.productService.nameLong;
}
const welcomeContainerContainer = document.querySelector('.welcomePageContainer').parentElement as HTMLElement;
const adsHomepage = document.querySelector('.ads_homepage') as HTMLElement;
adsHomepage.classList.add('responsive-container');
const observer = new MutationObserver(parseMutations);
observer.observe(welcomeContainerContainer, {
attributes: true,
attributeFilter: ['style']
});
const defaultBreakpoints = { SM: 480, MD: 640, LG: 1024, XL: 1365 };
const startingWidth = parseInt(welcomeContainerContainer.style.width);
adsHomepage.classList.add('XS');
Object.keys(defaultBreakpoints).forEach(function (breakpoint) {
let minWidth = defaultBreakpoints[breakpoint];
if (startingWidth >= minWidth) {
adsHomepage.classList.add(breakpoint);
}
else {
adsHomepage.classList.remove(breakpoint);
}
});
function parseMutations() {
const width = parseInt(welcomeContainerContainer.style.width);
Object.keys(defaultBreakpoints).forEach(function (breakpoint) {
let minWidth = defaultBreakpoints[breakpoint];
if (width >= minWidth) {
adsHomepage.classList.add(breakpoint);
}
else {
adsHomepage.classList.remove(breakpoint);
}
});
}
recentlyOpened.then(async ({ workspaces }) => {
// Filter out the current workspace
workspaces = workspaces.filter(recent => !this.contextService.isCurrentWorkspace(isRecentWorkspace(recent) ? recent.workspace : recent.folderUri));