Add Preferences Pane, Third Party Icon toggle, link to policy

(re: #7040)

build_data.js

@@ -60,7 +60,8 @@ function buildData() {
     'fas-i-cursor': {},
     'fas-lock': {},
     'fas-long-arrow-alt-right': {},
-    'fas-th-list': {}
+    'fas-th-list': {},
+    'fas-user-cog': {}
   };
 
   // The Noun Project icons used

css/80_app.css

@@ -3100,17 +3100,6 @@ div.full-screen > button:hover {
 
 /* Background / Map Data / Help Pane buttons
 ------------------------------------------------------- */
-.help-control > button {
-    border-radius: 0 0 0 4px;
-}
-[dir='rtl'] .help-control > button {
-    border-radius: 0 0 4px 0;
-}
-
-.map-data-control button {
-    border-radius: 0;
-}
-
 .background-control > button {
     border-radius: 4px 0 0 0;
 }
@@ -3118,6 +3107,13 @@ div.full-screen > button:hover {
     border-radius: 0 4px 0 0;
 }
 
+.help-control > button {
+    border-radius: 0 0 0 4px;
+}
+[dir='rtl'] .help-control > button {
+    border-radius: 0 0 4px 0;
+}
+
 
 /* Background / Map Data Settings
 ------------------------------------------------------- */

data/core.yaml

@@ -731,6 +731,16 @@ en:
       url:
         instructions: "Enter a data file URL or vector tile URL template. Valid tokens are:\n   {zoom} or {z}, {x}, {y} for Z/X/Y tile scheme"
         placeholder: Enter a url
+  preferences:
+    title: Preferences
+    description: Preferences
+    key: P
+    privacy:
+      title: Privacy
+      privacy_link: View the iD privacy policy
+      third_party_icons:
+        description: Show Third Party Preset Icons
+        tooltip: Uncheck this box to avoid loading preset icons from third party sites such as Wikimedia Commons, Facebook, or Twitter.
   restore:
     heading: You have unsaved changes
     description: "Do you wish to restore unsaved changes from a previous editing session?"
@@ -1953,6 +1963,7 @@ en:
         background_switch: "Switch back to last background"
         map_data: "Toggle map data pane"
         issues: "Toggle validation issues pane"
+        preferences: "Toggle user preferences pane"
         fullscreen: "Enter full screen mode"
         sidebar: "Toggle sidebar"
         wireframe: "Toggle wireframe mode"

data/shortcuts.json

@@ -53,6 +53,10 @@
               "shortcuts": ["issues.key"],
               "text": "shortcuts.browsing.display_options.issues"
             },
+            {
+              "shortcuts": ["preferences.key"],
+              "text": "shortcuts.browsing.display_options.preferences"
+            },
             {
               "modifiers": ["⌃", "⌘"],
               "shortcuts": ["F", "F11"],

dist/locales/en.json

@@ -925,6 +925,19 @@
                 }
             }
         },
+        "preferences": {
+            "title": "Preferences",
+            "description": "Preferences",
+            "key": "P",
+            "privacy": {
+                "title": "Privacy",
+                "privacy_link": "View the iD privacy policy",
+                "third_party_icons": {
+                    "description": "Show Third Party Preset Icons",
+                    "tooltip": "Uncheck this box to avoid loading preset icons from third party sites such as Wikimedia Commons, Facebook, or Twitter."
+                }
+            }
+        },
         "restore": {
             "heading": "You have unsaved changes",
             "description": "Do you wish to restore unsaved changes from a previous editing session?",
@@ -2405,6 +2418,7 @@
                     "background_switch": "Switch back to last background",
                     "map_data": "Toggle map data pane",
                     "issues": "Toggle validation issues pane",
+                    "preferences": "Toggle user preferences pane",
                     "fullscreen": "Enter full screen mode",
                     "sidebar": "Toggle sidebar",
                     "wireframe": "Toggle wireframe mode",

modules/ui/index.js

@@ -48,6 +48,7 @@ export { uiNoteComments } from './note_comments';
 export { uiNoteEditor } from './note_editor';
 export { uiNoteHeader } from './note_header';
 export { uiNoteReport } from './note_report';
+export { uiPreferences } from './preferences';
 export { uiPresetEditor } from './preset_editor';
 export { uiPresetIcon } from './preset_icon';
 export { uiPresetList } from './preset_list';

modules/ui/init.js

@@ -29,6 +29,7 @@ import { uiMapData } from './map_data';
 import { uiMapInMap } from './map_in_map';
 import { uiNotice } from './notice';
 import { uiPhotoviewer } from './photoviewer';
+import { uiPreferences } from './preferences';
 import { uiRestore } from './restore';
 import { uiScale } from './scale';
 import { uiShortcuts } from './shortcuts';
@@ -123,6 +124,12 @@ export function uiInit(context) {
             .attr('class', 'map-control map-issues-control')
             .call(issues.renderToggleButton);
 
+        var preferences = uiPreferences(context);
+        controls
+            .append('div')
+            .attr('class', 'map-control preferences-control')
+            .call(preferences.renderToggleButton);
+
         var help = uiHelp(context);
         controls
             .append('div')
@@ -249,6 +256,7 @@ export function uiInit(context) {
             .call(background.renderPane)
             .call(mapData.renderPane)
             .call(issues.renderPane)
+            .call(preferences.renderPane)
             .call(help.renderPane);
 
         ui.info = uiInfo(context);

modules/ui/preferences.js

@@ -0,0 +1,131 @@
+import { event as d3_event, select as d3_select } from 'd3-selection';
+
+import { svgIcon } from '../svg/icon';
+import { t, textDirection } from '../util/locale';
+import { tooltip } from '../util/tooltip';
+import { uiDisclosure } from './disclosure';
+import { uiTooltipHtml } from './tooltipHtml';
+
+
+export function uiPreferences(context) {
+  const key = t('preferences.key');
+  let _pane = d3_select(null);
+  let _showThirdPartyIcons = context.storage('preferences.privacy.thirdpartyicons') || true;
+
+  const paneTooltip = tooltip()
+    .placement((textDirection === 'rtl') ? 'right' : 'left')
+    .html(true)
+    .title(uiTooltipHtml(t('preferences.description'), key));
+
+
+  function renderPrivacyOptions(selection) {
+    // enter
+    let privacyOptionsListEnter = selection.selectAll('.privacy-options-list')
+      .data([0])
+      .enter()
+      .append('ul')
+      .attr('class', 'layer-list privacy-options-list');
+
+    let thirdPartyIconsEnter = privacyOptionsListEnter
+      .append('li')
+      .attr('class', 'privacy-third-party-icons-item')
+      .append('label')
+      .call(tooltip()
+        .title(t('preferences.privacy.third_party_icons.tooltip'))
+        .placement('bottom')
+      );
+
+    thirdPartyIconsEnter
+      .append('input')
+      .attr('type', 'checkbox')
+      .on('change', () => {
+        d3_event.preventDefault();
+        _showThirdPartyIcons = !_showThirdPartyIcons;
+        context.storage('preferences.privacy.thirdpartyicons', _showThirdPartyIcons);
+        update();
+      });
+
+    thirdPartyIconsEnter
+      .append('span')
+      .text(t('preferences.privacy.third_party_icons.description'));
+
+
+    // Privacy Policy link
+    selection.selectAll('.privacy-link')
+      .data([0])
+      .enter()
+      .append('div')
+      .attr('class', 'privacy-link')
+      .append('a')
+      .attr('target', '_blank')
+      .call(svgIcon('#iD-icon-out-link', 'inline'))
+      .attr('href', 'https://github.com/openstreetmap/iD/blob/master/FAQ.md')  // TODO replace
+      .append('span')
+      .text(t('preferences.privacy.privacy_link'));
+
+    update();
+
+
+    function update() {
+      selection.selectAll('.privacy-third-party-icons-item')
+        .classed('active', _showThirdPartyIcons)
+        .select('input')
+        .property('checked', _showThirdPartyIcons);
+    }
+  }
+
+
+  uiPreferences.togglePane = () => {
+    if (d3_event) d3_event.preventDefault();
+    paneTooltip.hide();
+    context.ui().togglePanes(!_pane.classed('shown') ? _pane : undefined);
+  };
+
+
+  uiPreferences.renderToggleButton = (selection) => {
+    selection
+      .append('button')
+      .on('click', uiPreferences.togglePane)
+      .call(svgIcon('#fas-user-cog', 'light'))
+      .call(paneTooltip);
+  };
+
+
+  uiPreferences.renderPane = (selection) => {
+    _pane = selection
+      .append('div')
+      .attr('class', 'fillL map-pane preferences-pane hide')
+      .attr('pane', 'preferences');
+
+    let heading = _pane
+      .append('div')
+      .attr('class', 'pane-heading');
+
+    heading
+      .append('h2')
+      .text(t('preferences.title'));
+
+    heading
+      .append('button')
+      .on('click', () => context.ui().togglePanes())
+      .call(svgIcon('#iD-icon-close'));
+
+
+    let content = _pane
+      .append('div')
+      .attr('class', 'pane-content');
+
+    content
+      .append('div')
+      .attr('class', 'preferences-privacy')
+      .call(uiDisclosure(context, 'preferences_third_party', true)
+        .title(t('preferences.privacy.title'))
+        .content(renderPrivacyOptions)
+      );
+
+    context.keybinding()
+      .on(key, uiPreferences.togglePane);
+  };
+
+  return uiPreferences;
+}

svg/fontawesome/fas-user-cog.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="user-cog" class="svg-inline--fa fa-user-cog fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M610.5 373.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 400.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm201.2 226.5c-2.3-1.2-4.6-2.6-6.8-3.9l-7.9 4.6c-6 3.4-12.8 5.3-19.6 5.3-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-5.5-17.7 1.9-36.4 17.9-45.7l7.9-4.6c-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-16-9.2-23.4-28-17.9-45.7.9-2.9 2.2-5.8 3.2-8.7-3.8-.3-7.5-1.2-11.4-1.2h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c10.1 0 19.5-3.2 27.2-8.5-1.2-3.8-2-7.7-2-11.8v-9.2z"></path></svg>