Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Merge branch 'fix/user-form-design' into 'feature/acl'

Browse Source 
Invite user form design

See merge request theappsmith/internal-tools-client!707
This commit is contained in:
Trisha Anand 2020-06-11 06:10:52 +00:00
commit 4b39dcc8e5
3 changed files with 31 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/client/src/components/editorComponents/SelectComponent.tsx
View File

@ -11,6 +11,7 @@ type SelectComponentProps = {
options?: Array<{ id: string; name: string }>; options?: Array<{ id: string; name: string }>;
placeholder?: string; placeholder?: string;
size?: "large" | "small"; size?: "large" | "small";
outline?: boolean;
}; };
export const SelectComponent = (props: SelectComponentProps) => { export const SelectComponent = (props: SelectComponentProps) => {
@ -35,7 +36,7 @@ export const SelectComponent = (props: SelectComponentProps) => {
props.options.filter(option => props.input.value === option.id)[0] props.options.filter(option => props.input.value === option.id)[0]
.name .name
: props.placeholder, : props.placeholder,
outline: true, outline: props?.outline ?? true,
size: props.size, size: props.size,
}, },
openDirection: "down", openDirection: "down",

2
app/client/src/components/editorComponents/form/fields/SelectField.tsx
View File

@ -25,6 +25,7 @@ type SelectFieldProps = {
placeholder?: string; placeholder?: string;
options?: Array<{ id: string; name: string; value?: string }>; options?: Array<{ id: string; name: string; value?: string }>;
size?: "large" | "small"; size?: "large" | "small";
outline?: boolean;
}; };
export const SelectField = (props: SelectFieldProps) => { export const SelectField = (props: SelectFieldProps) => {
@ -35,6 +36,7 @@ export const SelectField = (props: SelectFieldProps) => {
component={renderComponent} component={renderComponent}
options={props.options} options={props.options}
size={props.size} size={props.size}
outline={props.outline}
/> />
); );
}; };

47
app/client/src/pages/organization/InviteUsersFromv2.tsx
View File

@ -25,13 +25,15 @@ import {
INVITE_USERS_SUBMIT_ERROR, INVITE_USERS_SUBMIT_ERROR,
} from "constants/messages"; } from "constants/messages";
import history from "utils/history"; import history from "utils/history";
import { Colors } from "constants/Colors";
const StyledForm = styled.div` const StyledForm = styled.div`
width: 100%; width: 100%;
background: white; background: white;
padding: ${props => props.theme.spaces[5]}px; padding: ${props => props.theme.spaces[5]}px;
&&& { &&& {
.bp3-input { .bp3-input {
width: 50vh; width: calc(100vh - 285px);
box-shadow: none;
} }
} }
.manageUsers { .manageUsers {
@ -43,16 +45,17 @@ const StyledInviteFieldGroup = styled.div`
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
.users {
width: 300px;
}
.wrapper { .wrapper {
display: flex; display: flex;
width: 100%; width: 100%;
flex-direction: row; flex-direction: row;
alignItem: "center", justify-content: space-between;
justifyContent: "center", padding-right: 5px;
border-width: 1px;
border-right: 0px;
border-style: solid;
border-color: ${Colors.ATHENS_GRAY};
} }
`; `;
@ -72,7 +75,8 @@ const UserList = styled.div`
const StyledButton = styled(Button)` const StyledButton = styled(Button)`
&&&.${Classes.BUTTON} { &&&.${Classes.BUTTON} {
width: 83px; width: 83px;
height: 40px; height: 41px;
border-radius: 0px;
} }
`; `;
@ -103,19 +107,22 @@ const InviteUsersForm = (props: any) => {
/> />
)} )}
<StyledInviteFieldGroup> <StyledInviteFieldGroup>
<TagListField <div className="wrapper">
name="users" <TagListField
placeholder="Enter email address" name="users"
type="email" placeholder="Enter email address"
label="Emails" type="email"
intent="success" label="Emails"
/> intent="success"
<SelectField />
name="role" <SelectField
placeholder="Select a role" name="role"
options={props.roles} placeholder="Select a role"
size="large" options={props.roles}
/> size="large"
outline={false}
/>
</div>
<StyledButton <StyledButton
className="invite" className="invite"
text="Invite" text="Invite"