{"action":"created","issue":{"url":"https://api.github.com/repos/substance/substance/issues/302","labels_url":"https://api.github.com/repos/substance/substance/issues/302/labels{/name}","comments_url":"https://api.github.com/repos/substance/substance/issues/302/comments","events_url":"https://api.github.com/repos/substance/substance/issues/302/events","html_url":"https://github.com/substance/substance/issues/302","id":119310244,"number":302,"title":"More flexible panel/dialog construction","user":{"login":"michael","id":2931,"avatar_url":"https://avatars.githubusercontent.com/u/2931?v=3","gravatar_id":"","url":"https://api.github.com/users/michael","html_url":"https://github.com/michael","followers_url":"https://api.github.com/users/michael/followers","following_url":"https://api.github.com/users/michael/following{/other_user}","gists_url":"https://api.github.com/users/michael/gists{/gist_id}","starred_url":"https://api.github.com/users/michael/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/michael/subscriptions","organizations_url":"https://api.github.com/users/michael/orgs","repos_url":"https://api.github.com/users/michael/repos","events_url":"https://api.github.com/users/michael/events{/privacy}","received_events_url":"https://api.github.com/users/michael/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/substance/substance/labels/priority","name":"priority","color":"eb6420"}],"state":"open","locked":false,"assignee":null,"milestone":{"url":"https://api.github.com/repos/substance/substance/milestones/2","html_url":"https://github.com/substance/substance/milestones/Beta%202","labels_url":"https://api.github.com/repos/substance/substance/milestones/2/labels","id":1271177,"number":2,"title":"Beta 2","description":"","creator":{"login":"michael","id":2931,"avatar_url":"https://avatars.githubusercontent.com/u/2931?v=3","gravatar_id":"","url":"https://api.github.com/users/michael","html_url":"https://github.com/michael","followers_url":"https://api.github.com/users/michael/followers","following_url":"https://api.github.com/users/michael/following{/other_user}","gists_url":"https://api.github.com/users/michael/gists{/gist_id}","starred_url":"https://api.github.com/users/michael/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/michael/subscriptions","organizations_url":"https://api.github.com/users/michael/orgs","repos_url":"https://api.github.com/users/michael/repos","events_url":"https://api.github.com/users/michael/events{/privacy}","received_events_url":"https://api.github.com/users/michael/received_events","type":"User","site_admin":false},"open_issues":9,"closed_issues":132,"state":"open","created_at":"2015-08-25T10:35:03Z","updated_at":"2015-11-28T18:03:28Z","due_on":"2015-11-26T23:00:00Z","closed_at":null},"comments":1,"created_at":"2015-11-28T18:03:28Z","updated_at":"2015-11-28T20:33:55Z","closed_at":null,"body":"Been thinking about better managing panels and dialogs today. In Lens we have the problem that we can't hide the context toggles when the current panel is a dialog and make it use up all space. We can't do this atm without breaking modularity (e.g. with a CSS override). The problem is that when we render the contextToggles we don't know about what panel we are going to render (a regular panel or a dialog) so this information needs to made made available where the ContextToggles are created.\r\n\r\nLet's say we provide only the contents of our panels as component classes so we have Toc instead of TocPanel. Then we will provide a ScrollablePanel and Dialog implementation as described in #274. \r\n\r\n```js\r\n// to be wrapped into ContentPanel\r\nArticleBody.Prototype = function() {\r\n  this.render = function() {\r\n    return $$('div').append(\r\n      var config = this.context.config;\r\n      $$(CoverEditor).ref('coverEditor'),\r\n\r\n      // The full fledged document (ContainerEditor)\r\n      $$(\"div\").ref('main').addClass('document-content').append(\r\n        $$(ContainerEditor, {\r\n          name: 'main',\r\n          containerId: config.containerId,\r\n          commands: config.main.commands,\r\n          textTypes: config.main.textTypes\r\n        }).ref('mainEditor')\r\n      ),\r\n      $$(BibliographyComponent).ref('bib')\r\n    )\r\n  };\r\n};\r\n\r\n// To be wrapped into Panel with native scrollbars\r\nTOC.Prototype = function() {\r\n  this.render = function() {\r\n    // .sc-toc\r\n    //   .se-toc-items\r\n    //      .se-toc-item\r\n    //      .se-toc-item\r\n    // etc.\r\n  };\r\n};\r\n\r\n// To be wrapped into a DialogPanel\r\nAddBibItems.Prototype = function() {\r\n  this.render = function() {\r\n    return $$('div').append(\r\n      // .sc-add-bib-items\r\n      // etc.\r\n    )\r\n  };\r\n};\r\n```\r\n\r\nLet's also define an explicit panelconfiguration on app level. That's important to have things extensible. Once we have our Package API, Lens would define an API to announce panels to the app.\r\n\r\n```js\r\nvar panelConfig = {\r\n  'bib-items': {\r\n    type: 'panel',\r\n    props: {\r\n      scrollbar: {\r\n        position: 'right',\r\n        type: 'substance'\r\n      }\r\n    }\r\n  },\r\n  'toc': {\r\n    type: 'panel',\r\n    props: {\r\n      scrollbar: {\r\n        position: 'right',\r\n        type: 'native'\r\n      }\r\n    }\r\n  },\r\n  'add-bib-items': {\r\n    type: 'dialog',\r\n    props: {\r\n      scrollbar: {\r\n        position: 'right',\r\n        type: 'native'\r\n      }      \r\n    }\r\n  },\r\n  ...\r\n};\r\n```\r\n\r\nThe current implementation for rendering contextPanel is hacky and not reusable (see https://github.com/substance/lens/blob/master/LensController.js#L108-L115 and https://github.com/substance/lens/blob/master/LensController.js#L129-L136 ):\r\n\r\nI would provide a sidebar component (*better name it needs*) that can be used by Lens-ish 2-column apps. In this sketch our app exposes this.context.activePanel to have all info to build the sidebar according to the panelConfig we provided.\r\n\r\n```js\r\nSidebar.Prototype = function() {\r\n  render: function() {\r\n    // LensWriter exposes this as an API\r\n    var activePanel = this.context.activePanel;\r\n    var el = $$('div').addClass('sc-sidebar');\r\n    // Only render context toggles when we are dealing with a dialog\r\n    if (activePanel.type === 'dialog') {\r\n      el.append($$(ContextToggles));\r\n      el.append(\r\n        $$(DialogPanel, activePanel.panelProps).append(\r\n          // activePanel.content props has the doc and the the state values\r\n          // e.g. {doc: ..., bibItemId: '12'}\r\n          $$(activePanel.PanelContentClass, activePanel.contentProps)\r\n        )\r\n      )\r\n    } else {\r\n      // Wrap panel content into a ScrollabelPanel\r\n      el.append(\r\n        $$(ScrollablePanel).append(\r\n          $$(activePanel.PanelContentClass, activePanel.props)\r\n        )\r\n      );\r\n    }\r\n    return el;\r\n  }\r\n};\r\n```\r\n\r\nOliver does that make sense to you? I would want to solve this soon, because the display of LensWriter suffers from this limitation. Should be able to do in a few hours if confirmed. So maybe I can accomplish this within the beta2 release."},"comment":{"url":"https://api.github.com/repos/substance/substance/issues/comments/160334030","html_url":"https://github.com/substance/substance/issues/302#issuecomment-160334030","issue_url":"https://api.github.com/repos/substance/substance/issues/302","id":160334030,"user":{"login":"oliver----","id":284099,"avatar_url":"https://avatars.githubusercontent.com/u/284099?v=3","gravatar_id":"","url":"https://api.github.com/users/oliver----","html_url":"https://github.com/oliver----","followers_url":"https://api.github.com/users/oliver----/followers","following_url":"https://api.github.com/users/oliver----/following{/other_user}","gists_url":"https://api.github.com/users/oliver----/gists{/gist_id}","starred_url":"https://api.github.com/users/oliver----/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/oliver----/subscriptions","organizations_url":"https://api.github.com/users/oliver----/orgs","repos_url":"https://api.github.com/users/oliver----/repos","events_url":"https://api.github.com/users/oliver----/events{/privacy}","received_events_url":"https://api.github.com/users/oliver----/received_events","type":"User","site_admin":false},"created_at":"2015-11-28T20:33:55Z","updated_at":"2015-11-28T20:33:55Z","body":"I understand and like your proposal. While it is solving this problem, it would increase code reuse even more, as the Panel content implementations are so much simplified.\r\ngo for it :+1: "}}