#201 Added "Add task" button #231

sammysamx20 · 2018-10-26T23:16:35Z

Fixes #201.

Not completed yet, I wanted you to check code style if you can!

helfi92

Let's make Travis happy.

https://travis-ci.org/taskcluster/taskcluster-web/builds/446948435?utm_source=github_status&utm_medium=notification

sammysamx20 · 2018-10-27T18:33:37Z

@helfi92 Strange it should've worked... I'll push again and see whats going on.

sammysamx20 · 2018-10-27T18:36:43Z

@helfi92 It passes!

helfi92

Let's try using a "fab" button and placing it on the left side of the speed dial button.

The code of a fab button will be similar to:

taskcluster-web/src/views/Hooks/ListHooks/index.jsx

Lines 81 to 90 in 8d1015b

    
           <Tooltip title="Create Hook"> 
        
             <Button 
        
               color="secondary" 
        
               variant="fab" 
        
               onClick={this.handleCreateHook} 
        
               className={classes.actionButton} 
        
             > 
        
               <PlusIcon /> 
        
             </Button> 
        
           </Tooltip>

helfi92 · 2018-10-30T20:29:34Z

How is it going @sammysamx20? Let me know if I can help :)

sammysamx20 · 2018-10-30T20:36:11Z

Hey sorry I got busy this last weekend! I should be able to work on this today

helfi92 · 2018-10-30T20:54:18Z

No worries! Just wanted to see if everything was okay :)

sammysamx20 · 2018-10-31T08:32:09Z

Actually I do have one question, I was planning to wrap the buttons in a div. But I was wondering how you got the hamburger menu down at the bottom right and where the CSS is for that?

helfi92 · 2018-10-31T12:48:01Z

I was planning to wrap the buttons in a div

Yes, you can definitely wrap the button in a div. Something like that:

<Tooltip title="Create Task"> 
  <div>
    <Button 
      variant="fab" 
       // ...
    > 
      <PlusIcon /> 
    </Button> 
  <div>
</Tooltip>

But I was wondering how you got the hamburger menu down at the bottom right and where the CSS is for that?

To have the button have the "circle" shape, you have to provide the variant="fab" prop. In order to have it positioned in the bottom right, you'll need to extend it with a class. Because we do this in many places in our app, we have the following class that you can use: https://github.com/taskcluster/taskcluster-web/blob/master/src/theme.js#L114-L121. You can refer to it via theme.mixins.fab. For example, it is done in

taskcluster-web/src/components/SecretForm/index.jsx

Lines 26 to 28 in 0a187e3

    
           fab: { 
        
             ...theme.mixins.fab, 
        
           },

.

Hope that helps.

sammysamx20 · 2018-10-31T20:35:06Z

@helfi92 Sorry for the long delay here's what I have!

helfi92 · 2018-10-31T20:51:44Z

Do you mind rebasing on master, otherwise it gets hard to review this patch. There's a couple of ways to do this but I usually do:

# step 1: from your branch, run
git pull https://github.com/taskcluster/taskcluster-web.git master --rebase

# step 2: if there's a file conflict, fix it, then git add. Notice that you don't do git commit after git add here:
git add <file-with-conflict>
git rebase --continue

# step 3: if there's another conflict, go back to step 2

# step 4:  force push your change
git push origin <your-branch-name> --force

sammysamx20 · 2018-10-31T21:21:07Z

Should work now with rebase @helfi92

helfi92

Looks good. Minor changes :)

helfi92 · 2018-11-01T01:56:44Z

src/views/Tasks/CreateTask/index.jsx

      createdTaskId,
      loading,
    } = this.state;
-


Add newline.

helfi92 · 2018-11-01T01:59:26Z

src/views/Tasks/CreateTask/index.jsx

-                  tooltipOpen
-                  icon={<PlusIcon />}
+              <Tooltip
+                style={{ position: 'fixed', bottom: 16, right: 90 }}


Let's not mix css with javascript. Add the style after

taskcluster-web/src/views/Tasks/CreateTask/index.jsx

Line 65 in a44d2c3

},

and you can then do:

<Tooltip className={classes.tooltip} ...>

helfi92 · 2018-11-01T02:00:23Z

src/views/Tasks/CreateTask/index.jsx

+                title="Create Task"
+              >
+                <Button
+                  color="secondary"


Remove color. The color is already specified in classes.createIcon.

sammysamx20 · 2018-11-01T02:42:02Z

Let me know if this works.

helfi92 · 2018-11-01T02:52:12Z

src/views/Tasks/CreateTask/index.jsx

  },
+  toolTip: {
+    position: 'fixed',
+    bottom: 16,


bottom: theme.spacing.double,

helfi92 · 2018-11-01T02:53:44Z

src/views/Tasks/CreateTask/index.jsx

+  toolTip: {
+    position: 'fixed',
+    bottom: 16,
+    right: 90,


right: theme.spacing.unit * 11,

helfi92 · 2018-11-01T02:54:24Z

src/views/Tasks/CreateTask/index.jsx

+    position: 'fixed',
+    bottom: 16,
+    right: 90,
+    background: '#4CAF50',


Remove this.

sammysamx20 · 2018-11-01T03:42:44Z

When i remove the background attribute CSS, it turns the button white

sammysamx20 · 2018-11-01T04:48:28Z

Actually I think I figured it out

helfi92

Almost there! Added some requested changes. Also, when I click the light theme button (light bulb icon in the app bar), the icon becomes black on green. It should stay the same as the dark theme.

helfi92 · 2018-11-01T12:40:37Z

src/views/Tasks/CreateTask/index.jsx

-                  icon={<PlusIcon />}
+              <Tooltip
+                className={classes.createIcon}
+                placement="left"


placement="top".

helfi92 · 2018-11-01T12:42:52Z

src/views/Tasks/CreateTask/index.jsx

+                title="Create Task"
+              >
+                <Button
+                  variant="fab"


Could you also add requiresAuth, please. We don't want users to create tasks when signed out.

<Button requiresAuth variant="fab" // ...

sammysamx20 · 2018-11-01T22:06:01Z

Do you know what is causing the light mode to turn it to black?

sammysamx20 · 2018-11-01T22:12:42Z

Actually I think I got it

helfi92 · 2018-11-01T22:13:21Z

It's probably

taskcluster-web/src/App/Main.jsx

Lines 21 to 23 in 8d1015b

    
           '.mdi-icon': { 
        
             fill: theme.palette.text.primary, 
        
           },

. In Main.jsx, you can create another style fabIcon with the following style:

+    fabIcon: {
+      '& .mdi-icon': {
+        fill: 'white',
+      },
+    },

Then from the creat task view, you can do:

  createIcon: {
    ...theme.mixins.successIcon,
    ...theme.mixins.fabIcon,
    position: 'fixed',
    bottom: theme.spacing.double,
    right: theme.spacing.unit * 11,
},

I think that should fix it.

sammysamx20 · 2018-11-01T22:14:57Z

I pushed some changes let me know if it works!

helfi92

Looks good to me. A rebase is needed however.

…ton in the hamburger menu

sammysamx20 · 2018-11-01T22:47:49Z

is this okay?

helfi92

LGTM 😍

sammysamx20 · 2018-11-01T22:50:43Z

phew I'm glad it works thanks for the help!!

helfi92 · 2018-11-01T22:52:01Z

No problem. Awesome work!

helfi92 · 2018-11-01T22:53:34Z

src/views/Tasks/CreateTask/index.jsx

-                  icon={<PlusIcon />}
+              <Tooltip title="Create Task">
+                <Button
+                  requireAuth


Oops. This needs to be requiresAuth 😅

Aw man I'll do that now :(

sammysamx20 requested a review from helfi92 as a code owner October 26, 2018 23:16

helfi92 suggested changes Oct 27, 2018

View reviewed changes

helfi92 suggested changes Oct 28, 2018

View reviewed changes

sammysamx20 force-pushed the master branch from 806bdf5 to a44d2c3 Compare October 31, 2018 21:20

helfi92 suggested changes Nov 1, 2018

View reviewed changes

helfi92 reviewed Nov 1, 2018

View reviewed changes

sammysamx20 added 5 commits November 1, 2018 15:34

Added loading circle when searching for certain client

0c1b3ad

Removed extra lines from Viewclients and Search

f2095e2

Removed empty line in 192

3e8ac92

Added hover functionality so the title name turns into the Logo Image.

c0212c1

Removed unecessary new lines

2a07619

sammysamx20 added 19 commits November 1, 2018 15:34

Removed extra lines from Viewclients and Search

411f6e9

Removed empty line in 192

f6afbf8

Added hover functionality so the title name turns into the Logo Image.

b944860

Removed unecessary new lines

c10cced

Fixed Helfi92 Requested Changes

4db6fcf

Added button outside of menu

9ccfda7

Ran linter program

117210c

Removed px from Logostyle

bcde1f7

Fixed styling errors

9946c54

Fixed line spacing and removed quotation marks from logostyle

074d8dd

Changed margin to theme.spacing.unit

b437055

Added add task button

99bc3b9

Styled Create Task button outside of menu

bd367a4

Fixed for Travis CI

e024238

Added create button next to hamburgur menu and removed the create but…

70aab40

…ton in the hamburger menu

Changed button to turn green with set background due to themes glith

b139f08

Fixed button color error by putting the styling in the buttonIcon css

5609949

Changed plus icon on create button to not turn black on light mode

12153bc

Fixed merge Errors

30f595a

sammysamx20 force-pushed the master branch from f1d9929 to 30f595a Compare November 1, 2018 22:46

Fixed merge Errors

7c41317

helfi92 approved these changes Nov 1, 2018

View reviewed changes

helfi92 reviewed Nov 1, 2018

View reviewed changes

Added correct spelling of requiresAuth

f433f5f

helfi92 approved these changes Nov 2, 2018

View reviewed changes

helfi92 merged commit 9221013 into taskcluster:master Nov 2, 2018

helfi92 mentioned this pull request Nov 13, 2018

Highlight a leaf helfi92/material-ui-treeview#27

Open

	<Tooltip title="Create Hook">
	<Button
	color="secondary"
	variant="fab"
	onClick={this.handleCreateHook}
	className={classes.actionButton}
	>
	<PlusIcon />
	</Button>
	</Tooltip>

#201 Added "Add task" button #231

#201 Added "Add task" button #231

Uh oh!

Conversation

sammysamx20 commented Oct 26, 2018

Uh oh!

helfi92 left a comment

Choose a reason for hiding this comment

Uh oh!

sammysamx20 commented Oct 27, 2018

Uh oh!

sammysamx20 commented Oct 27, 2018

Uh oh!

helfi92 left a comment

Choose a reason for hiding this comment

Uh oh!

helfi92 commented Oct 30, 2018

Uh oh!

sammysamx20 commented Oct 30, 2018

Uh oh!

helfi92 commented Oct 30, 2018

Uh oh!

sammysamx20 commented Oct 31, 2018

Uh oh!

helfi92 commented Oct 31, 2018

Uh oh!

sammysamx20 commented Oct 31, 2018

Uh oh!

helfi92 commented Oct 31, 2018

Uh oh!

sammysamx20 commented Oct 31, 2018

Uh oh!

helfi92 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sammysamx20 commented Nov 1, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sammysamx20 commented Nov 1, 2018

Uh oh!

sammysamx20 commented Nov 1, 2018

Uh oh!

helfi92 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

helfi92 Nov 1, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sammysamx20 commented Nov 1, 2018

Uh oh!

sammysamx20 commented Nov 1, 2018

Uh oh!

helfi92 commented Nov 1, 2018

Uh oh!

sammysamx20 commented Nov 1, 2018

Uh oh!

helfi92 left a comment

Choose a reason for hiding this comment

Uh oh!

sammysamx20 commented Nov 1, 2018

Uh oh!

helfi92 left a comment

Choose a reason for hiding this comment

Uh oh!

sammysamx20 commented Nov 1, 2018

Uh oh!

helfi92 Nov 1, 2018 •

edited

Loading