From 029cc50d407eb9e5cfb5bcdc6e362f7a5280750c Mon Sep 17 00:00:00 2001 From: Matt Sullivan Date: Fri, 10 Nov 2017 10:47:07 -0800 Subject: [PATCH 1/4] Fix for broken Text widget example that now requires directionality to be defined --- widgets-intro.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/widgets-intro.md b/widgets-intro.md index 73008359b6..83e525d214 100644 --- a/widgets-intro.md +++ b/widgets-intro.md @@ -35,7 +35,8 @@ with a widget: import 'package:flutter/material.dart'; void main() { - runApp(new Center(child: new Text('Hello, world!'))); + runApp(new Center(child: + new Text('Hello, world!', textDirection: TextDirection.ltr))); } ``` @@ -48,7 +49,9 @@ of two widgets, the and its child, the [`Text`](https://docs.flutter.io/flutter/widgets/Text-class.html) widget. The framework forces the root widget to cover the screen, which means the text -"Hello, world" ends up centered on screen. +"Hello, world" ends up centered on screen. The text direction needs to be +specified in this instance; when the MaterialApp widget is used, this is taken +care of for you, as demonstrated later. When writing an app, you'll commonly author new widgets that are subclasses of either From 3f58d9983155ca0f40e6c645cc8cf0544464f294 Mon Sep 17 00:00:00 2001 From: Matt Sullivan Date: Tue, 12 Dec 2017 14:54:07 -0800 Subject: [PATCH 2/4] Added supported image formats --- assets-and-images.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets-and-images.md b/assets-and-images.md index ce0b7cc77d..79076a6237 100644 --- a/assets-and-images.md +++ b/assets-and-images.md @@ -14,7 +14,7 @@ Flutter apps can include both code and _assets_ (sometimes called resources). An asset is a file that is bundled and deployed with your app, and is accessible at runtime. Common types of assets include static data (for example, JSON files), configuration files, icons, and -images. +images (JPEG, WebP, GIF, animated GIF, PNG, BMP and WBMP). ## Specifying assets From 5395069765197beccbd2134fd3d33bdb7733f948 Mon Sep 17 00:00:00 2001 From: Matt Sullivan Date: Wed, 13 Dec 2017 14:23:04 -0800 Subject: [PATCH 3/4] Revised wording for image support and removed spurious clury brace from internationalization code snippet --- assets-and-images.md | 2 +- tutorials/international/index.md | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/assets-and-images.md b/assets-and-images.md index 79076a6237..e741a20d19 100644 --- a/assets-and-images.md +++ b/assets-and-images.md @@ -14,7 +14,7 @@ Flutter apps can include both code and _assets_ (sometimes called resources). An asset is a file that is bundled and deployed with your app, and is accessible at runtime. Common types of assets include static data (for example, JSON files), configuration files, icons, and -images (JPEG, WebP, GIF, animated GIF, PNG, BMP and WBMP). +images (JPEG, WebP, GIF, animated WebP/GIF, PNG, BMP, and WBMP). ## Specifying assets diff --git a/tutorials/international/index.md b/tutorials/international/index.md index 41c4ce8ee7..13978be9bb 100644 --- a/tutorials/international/index.md +++ b/tutorials/international/index.md @@ -364,7 +364,6 @@ class DemoLocalizations { return _localizedValues[locale.languageCode]['title']; } } -} {% endprettify %} In the minimal app the DemoLocalizationsDelegate is slightly From fe6d6b46becd9b4093e71378a0d57f8a66426887 Mon Sep 17 00:00:00 2001 From: Matt Sullivan Date: Mon, 12 Feb 2018 17:56:20 -0800 Subject: [PATCH 4/4] Added simple js tabbing support --- _layouts/default.html | 1 + _sass/_tabs.scss | 33 +++++++++++++++++++++++++++++++ css/main.scss | 3 ++- js/tabs.js | 38 ++++++++++++++++++++++++++++++++++++ tab-testing.md | 45 +++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 119 insertions(+), 1 deletion(-) create mode 100644 _sass/_tabs.scss create mode 100644 js/tabs.js create mode 100644 tab-testing.md diff --git a/_layouts/default.html b/_layouts/default.html index 0c8a6733ce..eb7bc27c4d 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -36,6 +36,7 @@ + diff --git a/_sass/_tabs.scss b/_sass/_tabs.scss new file mode 100644 index 0000000000..987f4cb413 --- /dev/null +++ b/_sass/_tabs.scss @@ -0,0 +1,33 @@ +// Tabs (e.g. in Getting Started, to select which OS to use for instruction) + +$tab-accent-color: $brand-color; + +ul.tabs__top-bar { + margin: 0; + padding: 0; + list-style: none; +} + +ul.tabs__top-bar li { + background: none; + color: $grey-color; + display: inline-block; + padding: 10px 15px; + cursor: pointer; +} + +ul.tabs__top-bar li.current{ + background: $tab-accent-color; + color: $background-color; +} + +.tabs__content{ + display: none; + border: 2px solid $tab-accent-color; + padding: 15px; + margin-bottom: 15px; +} + +.tabs__content.current{ + display: inherit; +} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index 741b759c8c..d79967f47e 100755 --- a/css/main.scss +++ b/css/main.scss @@ -61,7 +61,8 @@ $on-laptop: 800px; "code_pre", "catalog", "homepage", - "responsive_embeds" + "responsive_embeds", + "tabs" ; aside > :not(pre) > code[class*="language-"], aside > pre[class*="language-"] { diff --git a/js/tabs.js b/js/tabs.js new file mode 100644 index 0000000000..e1a58721b3 --- /dev/null +++ b/js/tabs.js @@ -0,0 +1,38 @@ +function setupTabs() { + var tabs = $('.tabs__top-bar li'); + var tabContents = $('.tabs__content'); + + function clearTabsCurrent() { + tabs.removeClass('current'); + tabContents.removeClass('current'); + } + + tabs.click(function () { + clearTabsCurrent(); + + var tab_id = $(this).attr('data-tab'); + + $(this).addClass('current'); + $("#" + tab_id).addClass('current'); + }); + + // The following selects the correct default tab in /guides/get-started + function selectOperatingSystemInTabs(osName) { + clearTabsCurrent(); + + $("li[data-tab='tab-sdk-install-" + osName + "']").addClass('current'); + $('#tab-sdk-install-' + osName).addClass('current'); + } + + if (window.navigator.userAgent.indexOf("Mac") != -1) { + selectOperatingSystemInTabs('mac'); + } else if (window.navigator.userAgent.indexOf("Linux") != -1 && + window.navigator.userAgent.indexOf("Android") == -1) { + // Doesn't auto-select the Linux tab when on Android. + selectOperatingSystemInTabs('linux'); + } +} + +$(document).ready(function () { + setupTabs(); +}); \ No newline at end of file diff --git a/tab-testing.md b/tab-testing.md new file mode 100644 index 0000000000..662981d4c7 --- /dev/null +++ b/tab-testing.md @@ -0,0 +1,45 @@ +--- +layout: page +title: Tab Testing +permalink: /tabs/ +--- + +This is a tab testing page; let's give js tabs shot: + +## Thar be Tab here + +Tabs below + +
    +
  • Windows
    • +
  • Linux
    • +
  • Mac
    • +
+ +
+This is where Windows install instructions live +
+ +
+This is where Linux install instructions live +
+ +
+This is where Mac install instructions live +
+ +End of tabs + + +## Which JSON serialization method is right for me? + +This article covers two general strategies for working with JSON: + +* Manual serialization and deserialization +* Automated serialization and deserialization via code generation + +Different projects come with different complexities and use cases. For smaller +proof-of-concept projects or quick prototypes, using code generators might be +overkill. For apps with several JSON models with more complexity, doing +serialization by hand can quickly become tedious, repetitive and lend itself to +lots of small errors.