WIP Feature/style changes

babel.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          node: 'current'
+        }
+      }
+    ],
+    '@babel/preset-typescript'
+  ]
+}

contactsPane.js

@@ -431,7 +431,8 @@ export default {
           }
 
           peopleHeader.textContent =
-            cards.length > 5 ? '' + cards.length + ' contacts' : 'contact'
+            cards.length > 5 ? '' + cards.length + ' Contacts' : 'Contact'
+          peopleHeader.setAttribute('style', 'font-weight: bold;')
 
           function renderNameInGroupList (person) {
             const personRow = dom.createElement('tr')
@@ -617,7 +618,7 @@ export default {
             }))
         } // newGroupClickHandler
 
-        async function craeteNewCard (klass) {
+        async function createNewCard (klass) {
           cardMain.innerHTML = ''
           const ourBook = findBookFromGroups(book)
           try {
@@ -694,12 +695,14 @@ export default {
         const peopleFooter = bookFooter.appendChild(dom.createElement('td'))
         const cardFooter = bookFooter.appendChild(dom.createElement('td'))
 
+        // Putting it above on style doesn't work
+        bookTable.setAttribute('style', 'border-spacing: 3rem 0;')
         cardHeader.appendChild(dom.createElement('div')) // searchDiv
         // searchDiv.setAttribute('style', 'border: 0.1em solid #888; border-radius: 0.5em')
         const searchInput = cardHeader.appendChild(dom.createElement('input'))
         searchInput.setAttribute('type', 'text')
-        searchInput.style = style.searchInputStyle ||
-          'border: 0.1em solid #444; border-radius: 0.5em; width: 100%; font-size: 100%; padding: 0.1em 0.6em'
+        searchInput.setAttribute('placeholder', 'Search Contacts...')
+        searchInput.setAttribute('style', 'border: 1px solid #CCC; box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #FFF; border-radius: 0.3em; line-height: 1.5; font-weight: 400; color: #212529; text-align: left; font-size: 1rem; background-color: #fff; width: 60%;')
 
         searchInput.addEventListener('input', function (_event) {
           refreshFilteredPeople(true) // Active: select person if just one left
@@ -709,17 +712,17 @@ export default {
         cardMain.setAttribute('style', 'margin: 0;') // fill space available
         const dataCellStyle = 'padding: 0.1em;'
 
-        groupsHeader.textContent = 'groups'
+        groupsHeader.textContent = 'Groups'
         groupsHeader.setAttribute(
           'style',
-          'min-width: 10em; padding-bottom 0.2em;'
+          'min-width: 10em; padding-bottom 0.2em; font-weight: bold;'
         )
 
         function setGroupListVisibility (visible) {
           const vis = visible ? '' : 'display: none;'
           groupsHeader.setAttribute(
             'style',
-            'min-width: 10em; padding-bottom 0.2em;' + vis
+            'min-width: 10em; padding-bottom 0.2em; font-weight: bold;' + vis
           )
           const hfstyle = 'padding: 0.1em;'
           groupsMain.setAttribute('style', hfstyle + vis)
@@ -731,11 +734,7 @@ export default {
           selectedGroups[options.foreignGroup.uri] = true
         }
         if (book) {
-          const allGroups = groupsHeader.appendChild(dom.createElement('button'))
-          allGroups.textContent = 'All'
-          const style = 'margin-left: 1em; font-size: 100%;'
-          allGroups.setAttribute('style', style)
-          allGroups.addEventListener('click', function (_event) {
+          const allGroupsClickHandler = function (_event) {
             allGroups.state = allGroups.state ? 0 : 1
             peopleMainTable.innerHTML = '' // clear in case refreshNames doesn't work for unknown reason
             if (allGroups.state) {
@@ -756,7 +755,11 @@ export default {
               selectedGroups = {}
               refreshGroupsSelected()
             }
-          }) // on button click
+          }
+          const allGroupsButton = UI.widgets.button(dom, undefined, 'All', allGroupsClickHandler)
+          allGroupsButton.setAttribute('style', 'padding: 0.5em; float: right; ')
+          const allGroups = groupsHeader.appendChild(allGroupsButton)
+
           kb.fetcher.nowOrWhenFetched(groupIndex.uri, book, function (ok, body) {
             if (!ok) return console.log('Cannot load group index: ' + body)
             syncGroupTable()
@@ -774,9 +777,10 @@ export default {
         peopleMain.setAttribute('style', 'overflow:scroll;')
 
         // New Contact button
-        const newContactButton = dom.createElement('button')
+        const newContactClickHandler = async _event => createNewCard(ns.vcard('Individual'))
+        const newContactButton = UI.widgets.button(dom, undefined, 'New Contact', newContactClickHandler)
+        newContactButton.setAttribute('style', 'margin: 0.5em;')
         const container = dom.createElement('div')
-        newContactButton.setAttribute('type', 'button')
         if (!me) newContactButton.setAttribute('disabled', 'true')
         authn.checkUser().then(webId => {
           if (webId) {
@@ -785,14 +789,13 @@ export default {
           }
         })
         container.appendChild(newContactButton)
-        newContactButton.innerHTML = 'New Contact' // + IndividualClassLabel
         peopleFooter.appendChild(container)
-        newContactButton.addEventListener('click', async _event => craeteNewCard(ns.vcard('Individual')), false)
 
         // New Organization button
-        const newOrganizationButton = dom.createElement('button')
+        const newOrganizationClickHandler = async _event => createNewCard(ns.vcard('Organization'))
+        const newOrganizationButton = UI.widgets.button(dom, undefined, 'New Organization', newOrganizationClickHandler)
+        newOrganizationButton.setAttribute('style', 'margin: 0.5em;')
         const container2 = dom.createElement('div')
-        newOrganizationButton.setAttribute('type', 'button')
         if (!me) newOrganizationButton.setAttribute('disabled', 'true')
         authn.checkUser().then(webId => {
           if (webId) {
@@ -801,27 +804,17 @@ export default {
           }
         })
         container2.appendChild(newOrganizationButton)
-        newOrganizationButton.innerHTML = 'New Organization' // + IndividualClassLabel
         peopleFooter.appendChild(container2)
-        newOrganizationButton.addEventListener('click', async _event => craeteNewCard(ns.vcard('Organization')), false)
 
         // New Group button
         if (book) {
           const newGroupButton = groupsFooter.appendChild(
-            dom.createElement('button')
-          )
-          newGroupButton.setAttribute('type', 'button')
-          newGroupButton.innerHTML = 'New Group' // + IndividualClassLabel
-          newGroupButton.addEventListener(
-            'click', newGroupClickHandler,
-            false
+            UI.widgets.button(dom, undefined, 'New Group', newGroupClickHandler)
           )
+          newGroupButton.setAttribute('style', 'margin: 0.5em;')
 
           // Tools button
-          const toolsButton = cardFooter.appendChild(dom.createElement('button'))
-          toolsButton.setAttribute('type', 'button')
-          toolsButton.innerHTML = 'Tools'
-          toolsButton.addEventListener('click', function (_event) {
+          const toolsClickHandler = (_event) => {
             cardMain.innerHTML = ''
             cardMain.appendChild(
               toolsPane(
@@ -833,7 +826,9 @@ export default {
                 me
               )
             )
-          })
+          }
+          const toolsButton = cardFooter.appendChild(UI.widgets.button(dom, undefined, 'Tools', toolsClickHandler))
+          toolsButton.setAttribute('style', 'margin: 0.5em;')
         } // if book
 
         cardFooter.appendChild(newAddressBookButton(book))

dev/context.ts

@@ -0,0 +1,21 @@
+import {DataBrowserContext, PaneRegistry} from "pane-registry";
+import { store } from "solid-ui";
+import { solidLogicSingleton } from "solid-logic";
+import {default as contactsPane } from "../contactsPane";
+import { LiveStore } from "rdflib";
+
+export const context: DataBrowserContext = {
+  session: {
+    store: store as LiveStore,
+    paneRegistry: {
+      byName: (name: string) => {
+        return contactsPane
+      }
+    } as PaneRegistry,
+    logic: solidLogicSingleton
+  },
+  dom: document,
+  getOutliner: () => null,
+};
+
+export const fetcher = store.fetcher;

dev/index.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <title>profile-pane dev server</title>
+    <style>
+        body {
+            margin: 0;
+            font-family: sans-serif;
+        }
+        h1 {
+            padding: 0.5rem;
+            margin: 0;
+            color: #666;
+        }
+        #loginBanner {
+            display: grid;
+            padding: 0.5rem;
+            grid-gap: 1rem;
+            grid-auto-flow: column;
+            justify-content: flex-start;
+            align-items: center;
+        }
+        .banner {
+            margin: 0;
+            height: 1rem;
+            width: 100%;
+            background: repeating-linear-gradient(
+                    -45deg,
+                    #ffffff,
+                    #d8d9d5 20px,
+                    #d41717 20px,
+                    #984646 40px
+            );
+        }
+    </style>
+</head>
+<body>
+<h1>pane under development</h1>
+<div>
+    <div id="webId"></div>
+  </div>
+<div id="loginBanner"></div>
+<div class="banner"></div>
+<div id="app">Rendering...</div>
+</body>
+</html>

dev/index.ts

@@ -0,0 +1,42 @@
+import { sym } from "rdflib";
+import { default as pane } from "../contactsPane";
+import { context, fetcher } from "./context";
+import { authn } from "solid-ui";
+import { loginStatusBox } from "solid-ui/lib/login/login";
+
+const loginBanner = document.getElementById("loginBanner");
+const webId = document.getElementById("webId");
+
+loginBanner.appendChild(loginStatusBox(document, null, {}));
+
+async function finishLogin() {
+  await authn.authSession.handleIncomingRedirect();
+  const session = authn.authSession;
+  if (session.info.isLoggedIn) {
+    // Update the page with the status.
+    webId.innerHTML = "Logged in as: " + authn.currentUser().uri;
+  } else {
+    webId.innerHTML = "";
+  }
+}
+
+
+
+
+// https://testingsolidos.solidcommunity.net/profile/card#me
+// https://timbl.inrupt.net/profile/card#me
+//
+// const webIdToShow = "https://angelo.veltens.org/profile/card#me";
+const webIdToShow = "https://testingsolidos.solidcommunity.net/profile/card#me";
+// const webIdToShow = "https://timbl.inrupt.net/profile/card#me";
+// const addressBookToShow = "https://sstratsianis.solidcommunity.net/private/Friends/index.ttl#this"
+const addressBookToShow = "https://timbl.com/timbl/Public/Test/Contacts/index.ttl#this";
+
+
+finishLogin().then(() => { fetcher.load(webIdToShow).then(() => {
+  fetcher.load(addressBookToShow).then(() => {
+    const app = pane.render(sym(addressBookToShow), context);
+    document.getElementById("app").replaceWith(app)
+  })
+})
+})

jest.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: ['./jest.setup.ts'],
+  transformIgnorePatterns: ['/node_modules/(?!lit-html).+\\.js']
+}

jest.setup.ts

@@ -0,0 +1,4 @@
+import "@testing-library/jest-dom";
+import fetchMock from "jest-fetch-mock";
+
+fetchMock.enableMocks();