Skip to content

Commit b8ee97f

Browse files
one-communityone-community
authored
Merge pull request #4878 from OneCommunityGlobal/venkataramanan_fix_add_intangible_time_entry_formatting
Venkataramanan fix: intangible time entry formatting
2 parents 1fc56e5 + 520b7c2 commit b8ee97f

1 file changed

Lines changed: 173 additions & 166 deletions

File tree

‎src/components/Timelog/Timelog.jsx‎

Lines changed: 173 additions & 166 deletions
Original file line numberDiff line numberDiff line change
@@ -820,179 +820,186 @@ return (
820820
: timeLog.cardHeaderShadow
821821
}
822822
>
823-
<Row style={{ minWidth: '100%' }} className="px-0 mx-0">
824-
<Col style={{ minWidth: '100%' }} className="px-0 mx-0">
825-
<CardTitle tag="h4">
826-
<div className="d-flex align-items-center">
827-
<span className={`${timeLog.taskboardHeaderTitle} mb-1 mr-2`}>
828-
Tasks and Timelogs
829-
</span>
830-
<EditableInfoModal
831-
areaName="TasksAndTimelogInfoPoint"
832-
areaTitle="Tasks and Timelogs"
833-
fontSize={24}
834-
isPermissionPage
835-
role={authUser.role} // Pass the 'role' prop to EditableInfoModal
836-
darkMode={darkMode}
837-
/>
823+
<Row className="d-flex flex-nowrap align-items-start w-100 gx-0">
824+
{/* LEFT: title/subtitle takes remaining space */}
825+
<Col className="px-0 flex-grow-1" style={{ minWidth: 0 }}>
826+
<CardTitle tag="h4">
827+
<div className="d-flex align-items-center flex-wrap">
828+
<span className={`${timeLog.taskboardHeaderTitle} mb-1 mr-2`}>
829+
Tasks and Timelogs
830+
</span>
838831

839-
<span className="mr-2" style={{ color: '#7cfc00', padding: '1px' }}>
840-
<ActiveCell
841-
isActive={displayUserProfile.isActive}
842-
user={displayUserProfile}
843-
onClick={() => {
844-
props.updateUserProfile({
845-
...displayUserProfile,
846-
isActive: !displayUserProfile.isActive,
847-
endDate:
848-
!displayUserProfile.isActive === false
849-
? moment(new Date()).format('YYYY-MM-DD')
850-
: undefined,
851-
});
852-
}}
853-
/>
854-
</span>
855-
<ProfileNavDot
856-
userId={displayUserId}
857-
style={{ marginLeft: '2px', padding: '1px' }}
832+
<EditableInfoModal
833+
areaName="TasksAndTimelogInfoPoint"
834+
areaTitle="Tasks and Timelogs"
835+
fontSize={24}
836+
isPermissionPage
837+
role={authUser.role}
838+
darkMode={darkMode}
839+
/>
840+
841+
<span className="mr-2" style={{ color: '#7cfc00', padding: '1px' }}>
842+
<ActiveCell
843+
isActive={displayUserProfile.isActive}
844+
user={displayUserProfile}
845+
onClick={() => {
846+
props.updateUserProfile({
847+
...displayUserProfile,
848+
isActive: !displayUserProfile.isActive,
849+
endDate:
850+
!displayUserProfile.isActive === false
851+
? moment(new Date()).format('YYYY-MM-DD')
852+
: undefined,
853+
});
854+
}}
858855
/>
859-
</div>
860-
</CardTitle>
861-
<CardSubtitle
862-
tag="h6"
863-
className={`${darkMode ? 'text-azure' : `text-muted ${timeLog['text-muted']} text-muted`} ${timeLog['responsive-font-size']}`}
864-
>
865-
Viewing time entries logged in the last 3 weeks
866-
</CardSubtitle>
867-
</Col>
868-
<Col className="px-0">
869-
{isAuthUser ? (
870-
<div className={`${timeLog.tasksAndTimelogHeaderAddTimeDiv} mt-2`}
856+
</span>
857+
858+
<ProfileNavDot
859+
userId={displayUserId}
860+
style={{ marginLeft: '2px', padding: '1px' }}
861+
/>
862+
</div>
863+
</CardTitle>
864+
865+
<CardSubtitle
866+
tag="h6"
867+
className={`${
868+
darkMode ? 'text-azure' : `text-muted ${timeLog['text-muted']} text-muted`
869+
} ${timeLog['responsive-font-size']}`}
870+
>
871+
Viewing time entries logged in the last 3 weeks
872+
</CardSubtitle>
873+
</Col>
874+
875+
{/* RIGHT: button stays compact and right-aligned (never becomes a big centered block) */}
876+
<Col className="px-0 d-flex justify-content-end flex-shrink-0">
877+
{isAuthUser ? (
878+
<div
879+
className={timeLog.tasksAndTimelogHeaderAddTimeDiv}
871880
style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}
872-
>
873-
<div>
874-
<div className={`${timeLog['followupTooltipButton']}`}>
875-
876-
<Button
877-
className="btn btn-success"
878-
onClick={toggle}
879-
style={darkMode ? boxStyleDark : boxStyle}
880-
>
881-
Add Intangible Time Entry
882-
<TooltipPortal
883-
darkMode={darkMode}
884-
maxWidth={720}
885-
trigger={<i className={`fa fa-info-circle ${timeLog['fa-info-circle']} ml-2`} aria-label="More info" />}
886-
>
887-
{/* your same tooltip HTML goes here; keep the stopPropagation on links if you like */}
888-
<div
889-
style={{
890-
fontSize: "14px",
891-
lineHeight: "1.5",
892-
textAlign: "left",
893-
textColor: darkMode ? "#ffffff" : "#000000",
894-
}}
895-
>
896-
<p>
897-
Clicking this button only allows for <strong>“Intangible Time”</strong> to be
898-
added to your time log. You can manually log Intangible Time, but it does not
899-
count towards your weekly time commitment.
900-
</p>
901-
902-
<p>
903-
<strong>“Tangible Time”</strong> is the default for logging time using the timer
904-
at the top of the app. It represents all work done on assigned action items and
905-
counts towards a person’s weekly volunteer time commitment.
906-
</p>
907-
908-
<p>
909-
The only way for a volunteer to log Tangible Time is by using the clock in/out
910-
timer.
911-
</p>
912-
913-
<p>
914-
Intangible Time is almost always used only by the management team. It is used for
915-
weekly Monday night management team calls, monthly management team reviews and
916-
Welcome Team Calls, and non-action-item-related research, classes, and other
917-
learning or meetings that benefit or relate to the project but are not tied to a
918-
specific action item in the{" "}
919-
<a
920-
href="https://www.tinyurl.com/oc-os-wbs"
921-
target="_blank"
922-
rel="noopener noreferrer"
923-
style={{ color: "#1d4ed8", textDecoration: "underline" }}
924-
>
925-
One Community Work Breakdown Structure
926-
</a>.
927-
</p>
928-
929-
<p>
930-
Intangible Time may also be logged by a volunteer when in the field or for other
931-
reasons when the timer was not able to be used. In these cases, the volunteer
932-
will use this button to log time as “Intangible Time” and then request that an
933-
Admin manually change the log from Intangible to Tangible.
934-
</p>
935-
</div>
936-
937-
</TooltipPortal>
938-
</Button>
939-
</div>
940-
</div>
941-
</div>
942-
) : (
943-
!(
944-
viewingUser &&
945-
viewingUser.role === 'Owner' &&
946-
authUser.role !== 'Owner'
947-
) &&
948-
canPutUserProfileImportantInfo && (
949-
<div className={`${timeLog.tasksAndTimelogHeaderAddTimeDiv}`}>
950-
<div>
951-
<Button color="warning" onClick={toggle} style={boxStyle}>
952-
Add Time Entry {!isAuthUser && `for ${fullName}`}
953-
</Button>
954-
</div>
955-
</div>
956-
)
957-
)}
958-
<Modal
959-
isOpen={timeLogState.infoModal}
960-
toggle={openInfo}
961-
className={darkMode ? `text-light ${timeLog['text-light']}` : ''}
962881
>
963-
<ModalHeader className={darkMode ? 'bg-space-cadet' : ''}>Info</ModalHeader>
964-
<ModalBody className={darkMode ? 'bg-yinmn-blue' : ''}>
965-
{timeLogState.information}
966-
</ModalBody>
967-
<ModalFooter className={darkMode ? 'bg-space-cadet' : ''}>
882+
<div className={timeLog.followupTooltipButton}>
968883
<Button
969-
onClick={openInfo}
970-
color="primary"
971-
style={darkMode ? boxStyleDark : boxStyle}
884+
className="btn btn-success"
885+
onClick={toggle}
886+
style={{
887+
...(darkMode ? boxStyleDark : boxStyle),
888+
whiteSpace: 'nowrap',
889+
alignSelf: 'flex-start',
890+
}}
972891
>
973-
Close
974-
</Button>
975-
<Button onClick={openInfo} color="secondary">
976-
Edit
892+
Add Intangible Time Entry
893+
<TooltipPortal
894+
darkMode={darkMode}
895+
maxWidth={720}
896+
trigger={
897+
<i
898+
className={`fa fa-info-circle ${timeLog['fa-info-circle']} ml-2`}
899+
aria-label="More info"
900+
/>
901+
}
902+
>
903+
<div
904+
style={{
905+
fontSize: '14px',
906+
lineHeight: '1.5',
907+
textAlign: 'left',
908+
textColor: darkMode ? '#ffffff' : '#000000',
909+
}}
910+
>
911+
<p>
912+
Clicking this button only allows for <strong>“Intangible Time”</strong> to be
913+
added to your time log. You can manually log Intangible Time, but it does not
914+
count towards your weekly time commitment.
915+
</p>
916+
917+
<p>
918+
<strong>“Tangible Time”</strong> is the default for logging time using the timer
919+
at the top of the app. It represents all work done on assigned action items and
920+
counts towards a person’s weekly volunteer time commitment.
921+
</p>
922+
923+
<p>The only way for a volunteer to log Tangible Time is by using the clock in/out timer.</p>
924+
925+
<p>
926+
Intangible Time is almost always used only by the management team. It is used for
927+
weekly Monday night management team calls, monthly management team reviews and
928+
Welcome Team Calls, and non-action-item-related research, classes, and other
929+
learning or meetings that benefit or relate to the project but are not tied to a
930+
specific action item in the{' '}
931+
<a
932+
href="https://www.tinyurl.com/oc-os-wbs"
933+
target="_blank"
934+
rel="noopener noreferrer"
935+
style={{ color: '#1d4ed8', textDecoration: 'underline' }}
936+
>
937+
One Community Work Breakdown Structure
938+
</a>
939+
.
940+
</p>
941+
942+
<p>
943+
Intangible Time may also be logged by a volunteer when in the field or for other
944+
reasons when the timer was not able to be used. In these cases, the volunteer
945+
will use this button to log time as “Intangible Time” and then request that an
946+
Admin manually change the log from Intangible to Tangible.
947+
</p>
948+
</div>
949+
</TooltipPortal>
977950
</Button>
978-
</ModalFooter>
979-
</Modal>
980-
{/* This TimeEntryForm is for adding intangible time throught the add intangible time enty button */}
981-
<TimeEntryForm
982-
from="TimeLog"
983-
edit={false}
984-
toggle={toggle}
985-
isOpen={timeLogState.timeEntryFormModal}
986-
data={intangibletimeEntryFormData}
987-
userProfile={displayUserProfile}
988-
roles={roles}
989-
maxHoursPerEntry={40}
990-
/>
991-
<ReactTooltip id="registerTip" place="bottom" effect="solid">
992-
Click this icon to learn about the timelog.
993-
</ReactTooltip>
994-
</Col>
995-
</Row>
951+
</div>
952+
</div>
953+
) : (
954+
!(
955+
viewingUser &&
956+
viewingUser.role === 'Owner' &&
957+
authUser.role !== 'Owner'
958+
) &&
959+
canPutUserProfileImportantInfo && (
960+
<div className={timeLog.tasksAndTimelogHeaderAddTimeDiv}>
961+
<div>
962+
<Button color="warning" onClick={toggle} style={boxStyle}>
963+
Add Time Entry {!isAuthUser && `for ${fullName}`}
964+
</Button>
965+
</div>
966+
</div>
967+
)
968+
)}
969+
970+
<Modal
971+
isOpen={timeLogState.infoModal}
972+
toggle={openInfo}
973+
className={darkMode ? `text-light ${timeLog['text-light']}` : ''}
974+
>
975+
<ModalHeader className={darkMode ? 'bg-space-cadet' : ''}>Info</ModalHeader>
976+
<ModalBody className={darkMode ? 'bg-yinmn-blue' : ''}>{timeLogState.information}</ModalBody>
977+
<ModalFooter className={darkMode ? 'bg-space-cadet' : ''}>
978+
<Button onClick={openInfo} color="primary" style={darkMode ? boxStyleDark : boxStyle}>
979+
Close
980+
</Button>
981+
<Button onClick={openInfo} color="secondary">
982+
Edit
983+
</Button>
984+
</ModalFooter>
985+
</Modal>
986+
987+
<TimeEntryForm
988+
from="TimeLog"
989+
edit={false}
990+
toggle={toggle}
991+
isOpen={timeLogState.timeEntryFormModal}
992+
data={intangibletimeEntryFormData}
993+
userProfile={displayUserProfile}
994+
roles={roles}
995+
maxHoursPerEntry={40}
996+
/>
997+
998+
<ReactTooltip id="registerTip" place="bottom" effect="solid">
999+
Click this icon to learn about the timelog.
1000+
</ReactTooltip>
1001+
</Col>
1002+
</Row>
9961003
</CardHeader>
9971004
<CardBody
9981005
className={

0 commit comments

Comments
 (0)