Added menu and dialog icons.

web/src/App.css

@@ -11,9 +11,10 @@
     cursor: pointer ;
 }
 [data-reach-menu-list] { padding: 5px ; }
-[data-reach-menu-item] { padding: 5px ; }
+[data-reach-menu-item] { display: flex ; height: 1.25em ; padding: 5px ; }
 [data-reach-menu-item][data-selected] { background: #90caf9 ; color: black ; }
 [data-reach-menu-list] .divider { height: 0 ; margin: 2px 0 ; border-top: 1px solid #aaa ; }
+[data-reach-menu-list] img { height: 100% ; margin-top: -0.1em ; margin-right: 0.5em ; }
 
 .MuiDialogTitle-root { padding: 10px 16px 6px 16px !important ; }
 .MuiDialogContent-root>div { margin-bottom: 1em ; }

web/src/App.js

@@ -78,19 +78,25 @@ export class App extends React.Component
             const menu = ( <Menu id="app">
                 <MenuButton />
                 <MenuList>
-                    <MenuItem id="menu-show-publishers" onSelect={this._showPublishers.bind(this)}> Show publishers </MenuItem>
-                    <MenuItem id="menu-search-technique" onSelect={this._showTechniqueArticles.bind(this)}> Show technique </MenuItem>
-                    <MenuItem id="menu-search-tips" onSelect={this._showTipsArticles.bind(this)}> Show tips </MenuItem>
+                    <MenuItem id="menu-show-publishers" onSelect={ () => this._showPublishers() } >
+                        <img src="/images/icons/publisher.png" alt="Show publishers." /> Show publishers
+                    </MenuItem>
+                    <MenuItem id="menu-search-technique" onSelect={ () => this._showTechniqueArticles() } >
+                        <img src="/images/icons/technique.png" alt="Show technique articles." /> Show technique
+                    </MenuItem>
+                    <MenuItem id="menu-search-tips" onSelect={ () => this._showTipsArticles() } >
+                        <img src="/images/icons/tips.png" alt="Show tip articles." /> Show tips
+                    </MenuItem>
                     <div className="divider" />
-                    <MenuItem id="menu-new-publisher"
-                        onSelect = { () => PublisherSearchResult.onNewPublisher( this._onNewPublisher.bind(this) ) }
-                    >New publisher</MenuItem>
-                    <MenuItem id="menu-new-publication"
-                        onSelect = { () => PublicationSearchResult.onNewPublication( this._onNewPublication.bind(this) ) }
-                    >New publication</MenuItem>
-                    <MenuItem id="menu-new-article"
-                        onSelect = { () => ArticleSearchResult.onNewArticle( this._onNewArticle.bind(this) ) }
-                    >New article</MenuItem>
+                    <MenuItem id="menu-new-publisher" onSelect={ () => PublisherSearchResult.onNewPublisher( this._onNewPublisher.bind(this) ) } >
+                        <img src="/images/icons/publisher.png" alt="New publisher." /> New publisher
+                    </MenuItem>
+                    <MenuItem id="menu-new-publication" onSelect={ () => PublicationSearchResult.onNewPublication( this._onNewPublication.bind(this) ) } >
+                        <img src="/images/icons/publication.png" alt="New publication." /> New publication
+                    </MenuItem>
+                    <MenuItem id="menu-new-article" onSelect={ () => ArticleSearchResult.onNewArticle( this._onNewArticle.bind(this) ) } >
+                        <img src="/images/icons/article.png" alt="New article." /> New article
+                    </MenuItem>
                 </MenuList>
             </Menu> ) ;
             // generate the main content

web/src/ArticleSearchResult.js

@@ -103,12 +103,12 @@ export class ArticleSearchResult extends React.Component
         const menu = ( <Menu>
             <MenuButton className="sr-menu" />
             <MenuList>
-                <MenuItem className="edit"
-                    onSelect = { this.onEditArticle.bind( this ) }
-                >Edit</MenuItem>
-                <MenuItem className="delete"
-                    onSelect = { this.onDeleteArticle.bind( this ) }
-                >Delete</MenuItem>
+                <MenuItem className="edit" onSelect={ () => this.onEditArticle() } >
+                    <img src="/images/icons/edit.png" alt="Edit." /> Edit
+                </MenuItem>
+                <MenuItem className="delete" onSelect={ () => this.onDeleteArticle() } >
+                    <img src="/images/icons/delete.png" alt="Delete." /> Delete
+                </MenuItem>
             </MenuList>
         </Menu> ) ;
 

web/src/ArticleSearchResult2.js

@@ -264,8 +264,12 @@ export class ArticleSearchResult2
         } ;
 
         // show the form
+        const title = ( <div style={{display:"flex"}}>
+            <img src="/images/icons/article-grey.png" alt="Dialog icon." />
+            {isNew ? "New article" : "Edit article"}
+        </div> ) ;
         gAppRef.showModalForm( "article-form",
-            isNew ? "New article" : "Edit article", "#d3edfc",
+            title, "#d3edfc",
             content, buttons
         ) ;
     }

web/src/ModalForm.css

@@ -1,6 +1,8 @@
 .modal-form .MuiDialog-paper { width: 80% ; max-width: 50em !important ; height: 80% ; }
 .modal-form .MuiPaper-rounded { border-top-right-radius: 15px ; }
 
+.modal-form .MuiDialogTitle-root img { height: 1.25em ; margin-right: 0.5em ; }
+
 .modal-form .row { display: flex ; align-items: center ; margin-bottom: 0.25em ; }
 .modal-form .row label { margin-top: 3px ; }
 .modal-form .row input , .row textarea , .row .react-select { flex-grow: 1 ; }

web/src/PublicationSearchResult.js

@@ -66,12 +66,12 @@ export class PublicationSearchResult extends React.Component
         const menu = ( <Menu>
             <MenuButton className="sr-menu" />
             <MenuList>
-                <MenuItem className="edit"
-                    onSelect = { this.onEditPublication.bind( this ) }
-                >Edit</MenuItem>
-                <MenuItem className="delete"
-                    onSelect = { this.onDeletePublication.bind( this ) }
-                >Delete</MenuItem>
+                <MenuItem className="edit" onSelect={ () => this.onEditPublication() } >
+                    <img src="/images/icons/edit.png" alt="Edit." /> Edit
+                </MenuItem>
+                <MenuItem className="delete" onSelect={ () => this.onDeletePublication() } >
+                    <img src="/images/icons/delete.png" alt="Delete." /> Delete
+                </MenuItem>
             </MenuList>
         </Menu> ) ;
 

web/src/PublicationSearchResult2.js

@@ -279,8 +279,12 @@ export class PublicationSearchResult2
 
         // show the form
         const isNew = Object.keys( vals ).length === 0 ;
+        const title = ( <div style={{display:"flex"}}>
+            <img src="/images/icons/publication.png" alt="Dialog icon." />
+            {isNew ? "New publication" : "Edit publication"}
+        </div> ) ;
         gAppRef.showModalForm( "publication-form",
-            isNew ? "New publication" : "Edit publication", "#e5cea0",
+            title, "#e5cea0",
             doRender, buttons
         ) ;
     }

web/src/PublisherSearchResult.js

@@ -47,12 +47,12 @@ export class PublisherSearchResult extends React.Component
         const menu = ( <Menu>
             <MenuButton className="sr-menu" />
             <MenuList>
-                <MenuItem className="edit"
-                    onSelect = { this.onEditPublisher.bind( this ) }
-                >Edit</MenuItem>
-                <MenuItem className="delete"
-                    onSelect = { this.onDeletePublisher.bind( this ) }
-                >Delete</MenuItem>
+                <MenuItem className="edit" onSelect={ () => this.onEditPublisher() } >
+                    <img src="/images/icons/edit.png" alt="Edit." /> Edit
+                </MenuItem>
+                <MenuItem className="delete" onSelect={ () => this.onDeletePublisher() } >
+                    <img src="/images/icons/delete.png" alt="Delete." /> Delete
+                </MenuItem>
             </MenuList>
         </Menu> ) ;
 

web/src/PublisherSearchResult2.js

@@ -136,8 +136,12 @@ export class PublisherSearchResult2
 
         // show the form
         const isNew = Object.keys( vals ).length === 0 ;
+        const title = ( <div style={{display:"flex"}}>
+            <img src="/images/icons/publisher.png" alt="Dialog icon." />
+            {isNew ? "New publisher" : "Edit publisher"}
+        </div> ) ;
         gAppRef.showModalForm( "publisher-form",
-            isNew ? "New publisher" : "Edit publisher", "#eabe51",
+            title, "#eabe51",
             content, buttons
         ) ;
     }