CODEWITHSUNDEEP
google-apps-scriptgoogle-sheetsgoogle-docs
Code Guy
Code Guy

Reputation: 3198

How to make HTML Tabs match Google's CSS spec for add-ons

Google Docs and Spreadsheet add-ons need definite rules to be followed as described in the CSS Package for Add-ons.

But specs like tabs aren't available that better match the look and feel of add-on shown here:

enter image description here

Moreover Google avoids use of materialization CSS to docs add-ons.

Upvotes: 1

Views: 1609

Answers (1)

Mogsdad
Mogsdad

Reputation: 45720

It's been a few years since I put together this "Googly" jQuery UI theme to address the same problem, specifically for jQuery UI components as in How to make a tab panel using HTML Service. It just needed a small tweak to work in sidebars.

To use, you can either copy the style info and embed it into your Stylsheet.html, or link in the CSS from cdn.rawgit.com, e.g. 

<link rel="stylesheet" href="https://cdn.rawgit.com/mogsdad/e13b618322ec87ca8d28/raw/f1f96f797dadf968276c63de4df0bb04fb80646f/googly-jquery-ui.css">

Example

Here's an example Spreadsheet Add-on. The code is based on the previously linked answer, which starts from the jQuery UI Tabs example.

Screenshot

Stylesheet.html

<!-- This CSS package applies Google styling; it should always be included. -->
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
<!-- "Googly" theme CSS -->
<link rel="stylesheet" href="https://cdn.rawgit.com/mogsdad/e13b618322ec87ca8d28/raw/f1f96f797dadf968276c63de4df0bb04fb80646f/googly-jquery-ui.css">

<!-- The rest is from the default file in the editor -->    
<style>
label {
  font-weight: bold;
}

.branding-below {
  bottom: 54px;
  top: 0;
}

.branding-text {
  left: 7px;
  position: relative;
  top: 3px;
}

.logo {
  vertical-align: middle;
}

.width-100 {
  width: 100%;
  box-sizing: border-box;
  -webkit-box-sizing : border-box;‌
  -moz-box-sizing : border-box;
}

#sidebar-value-block,
#dialog-elements {
  background-color: #eee;
  border-color: #eee;
  border-width: 5px;
  border-style: solid;
}

#sidebar-button-bar,
#dialog-button-bar {
  margin-bottom: 10px;
}
</style>

Sidebar.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <!-- Use a templated HTML printing scriptlet to import common stylesheet -->
    <?!= HtmlService.createHtmlOutputFromFile('Stylesheet').getContent(); ?>
  </head>
  <body>
    <!-- Use a templated HTML printing scriptlet to import JavaScript. -->
    <?!= HtmlService.createHtmlOutputFromFile('SidebarJavaScript').getContent(); ?>

    <div id="tabs">
      <ul>
        <li><a href="#tabs-1">One</a></li>
        <li><a href="#tabs-2">Two</a></li>
        <li><a href="#tabs-3">Three</a></li>
      </ul>
      <div id="tabs-1">
        <p>Content of tab 1.</p>
      </div>
      <div id="tabs-2">
        <p>Content of tab 2.</p>
      </div>
      <div id="tabs-3">
        <p>Content of tab 3.</p>
      </div>
    </div>
  </body>
</html>

SidebarJavaScript.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>

$(function() {
  $( "#tabs" ).tabs();
});

</script>

Code.gs

/**
 * @OnlyCurrentDoc  Limits the script to only accessing the current spreadsheet.
 */

var SIDEBAR_TITLE = 'Example Sidebar';

/**
 * Adds a custom menu with items to show the sidebar and dialog.
 *
 * @param {Object} e The event parameter for a simple onOpen trigger.
 */
function onOpen(e) {
  SpreadsheetApp.getUi()
      .createAddonMenu()
      .addItem('Show sidebar', 'showSidebar')
      .addToUi();
}

/**
 * Runs when the add-on is installed; calls onOpen() to ensure menu creation and
 * any other initializion work is done immediately.
 *
 * @param {Object} e The event parameter for a simple onInstall trigger.
 */
function onInstall(e) {
  onOpen(e);
}

/**
 * Opens a sidebar. The sidebar structure is described in the Sidebar.html
 * project file.
 */
function showSidebar() {
  var ui = HtmlService.createTemplateFromFile('Sidebar')
      .evaluate()
      .setTitle(SIDEBAR_TITLE)
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
  SpreadsheetApp.getUi().showSidebar(ui);
}

Upvotes: 2

Related Questions